Pick Colours From an Image

How to pick a colour

1. Select an image — it is displayed at full quality.
2. Click or tap anywhere. A magnifier shows the exact pixel under your cursor.
3. Read the value as HEX, RGB or HSL and copy it with one tap.
4. Picked colours are collected in a history strip as you go.

The three colour formats

• HEX — #3287D1. Three bytes as hexadecimal, in red-green-blue order. The web default; compact and unambiguous.
• RGB — rgb(50, 135, 209). The same numbers in decimal. Easier to manipulate in code, and the form CSS wants when you add an alpha channel.
• HSL — hsl(207, 63%, 51%). Hue as an angle, saturation and lightness as percentages. By far the most useful for design work: hold the hue and vary the lightness and you have a coherent tint scale.

The dominant palette

Alongside individual picks, the tool analyses the whole image and extracts five representative colours by clustering pixels in colour space and reporting the largest clusters. Near-identical shades are merged so you get five genuinely distinct colours rather than five variations of the sky.

Useful for building a design around a photograph, matching a brand colour from a logo, or checking that an image will sit comfortably next to your existing palette.

Accuracy notes

Colours are read from the decoded pixel data, so they are exact — but a few things affect what "exact" means:

• JPEG artefacts. Compression shifts individual pixels, especially near edges. Sample from a flat region for a reliable reading.
• Colour profiles. Images tagged with a wide-gamut profile such as Display P3 are converted to sRGB by the browser, so the numbers describe the sRGB rendering rather than the original values.
• Your screen. The value is correct even if your display shows it differently — do not trust your eye over the number.