ToolsHub
Image Tools

Image Color Extractor

Find the exact colour of any pixel in a photo, logo or screenshot. Hover to see a magnified view and live colour codes, click to save the colours you need, and copy them in the format your project uses.

  • Files stay on your device
  • No sign-up
  • Free to use

How to use Image Color Extractor

  1. Drop an image onto the upload area or paste a screenshot with Ctrl+V.
  2. Move the pointer over the image. The magnifier and colour codes update as you go.
  3. Click to save a colour. Keyboard users can focus the image, move with the arrow keys and press Enter.
  4. Copy individual values, or export all saved colours as a HEX list, CSS variables or JSON.

Image Color Extractor features

Pixel-level magnifier

An 11 × 11 pixel zoom shows exactly which pixel you are picking, even on anti-aliased edges.

Every common format

HEX, RGB, HSL, HSV and CMYK values, each copyable with one click, plus a descriptive colour name.

Saved colour list

Collect several colours from the same image, then copy them all at once.

Developer exports

Export saved colours as CSS custom properties or a JSON array.

Keyboard accessible

Inspect and save colours without a mouse using the arrow keys and Enter.

Private

The image is analysed in your browser and never uploaded.

When to use Image Color Extractor

  • Matching a brand colour from a logo or screenshot when the official code is unknown.
  • Recreating a website design and finding the exact colours used.
  • Choosing paint, fabric or decor colours from a photo.
  • Checking the colour of a UI element for accessibility contrast tests.
  • Building a mood board or style guide from inspiration images.

Image Color Extractor FAQ

Why does the picked colour differ slightly from the original design?

Images saved as JPG are compressed, which shifts colours slightly, especially near edges. Screenshots can also be affected by display colour profiles. Pick from a large, flat area of colour and, if possible, from a PNG or the original file.

What is the difference between HEX, RGB and HSL?

They describe the same colour in different ways. HEX and RGB give the amounts of red, green and blue, in hexadecimal or decimal. HSL describes hue, saturation and lightness, which is easier for adjusting a colour by hand. CMYK is an approximation for printing.

Is the CMYK value accurate for printing?

It is a mathematical conversion without a printer profile, so treat it as a starting point. Professional printing uses colour-managed conversions specific to the press and paper.

How do I pick colours from a website?

Take a screenshot (Print Screen on Windows, Shift+Command+4 on Mac), then paste it here with Ctrl+V or Command+V.

Does it work with transparent images?

Yes. Colour values are shown for each pixel along with its opacity when it is partly transparent.

Image Palette Extractor Turn a photo, artwork or screenshot into a ready-to-use colour palette. Choose how… Dominant Color Finder Discover which colour defines an image. Drop one picture or a whole folder and get… Color Picker Choose a colour, type a code or sample one from an image, and get every format you… Color Palette Generator Create a harmonious colour scheme from a base colour, or pull a palette out of a…

How colours are stored in an image

A digital image is a grid of pixels, and each pixel stores its colour as three numbers from 0 to 255: how much red, green and blue light it should emit. That gives about 16.7 million combinations. The HEX code used in web design is the same three numbers written in base 16, so #FF8800 means red 255, green 136 and blue 0. An optional fourth value, alpha, records how opaque the pixel is.

Picking a colour from a photograph is less precise than picking from a flat graphic. Photos contain noise, gradients and compression artefacts, so neighbouring pixels rarely share exactly the same value. Look at the magnifier: if it shows a range of shades, pick from the middle of a uniform area, or use the Dominant Color Finder to get an average that represents the region better.

Colour models other than RGB exist because they match different tasks. HSL and HSV separate the hue, the position on the colour wheel, from how vivid and how light the colour is, which makes it easy to create lighter or darker variants. CMYK models ink on paper, where colours are subtracted from white rather than added to black.

For design systems, saving colours as CSS custom properties makes them reusable across a whole website: change one variable and every element using it updates. The export option produces exactly that format.

Other useful tools