Colour Picker
Drop in an image and click anywhere to read the colour. Or type a colour in any format to convert it.
Drop an image to pick colours from it
Click anywhere on the image to read that colour.
Palette from this image
HEX, RGB and HSL are the same colour
All three describe identical colours in different notations. HEX is two hexadecimal digits each for red, green and blue — #0F7D6B is 15 red, 125 green, 107 blue. RGB says the same thing in decimal. HSL is the useful one for design work: hue as an angle on the colour wheel, saturation and lightness as percentages, which means you can make a colour lighter by changing one number instead of guessing three. The contrast figure shown is the WCAG ratio against white and black, which determines whether text will actually be readable.
Contrast ratios, and why they matter
The contrast ratio between text and its background determines whether people can actually read it. WCAG sets thresholds that are also, in many places, a legal requirement for public-facing sites.
| Ratio | Meets | Applies to |
|---|---|---|
| 3:1 | AA | Large text (18pt+, or 14pt bold) and UI components |
| 4.5:1 | AA | Body text — the usual target |
| 7:1 | AAA | Body text, enhanced |
Mid-tone colours are the trap: a medium grey or a mid-saturation brand colour often fails against both white and black, which means it cannot carry text on either. The readout above shows both ratios so you can see that immediately.
Why designers work in HSL
Take #0F7D6B. To make a lighter version in HEX you would have to guess at three values and check. In HSL it is hsl(170, 79%, 27%) — raise the lightness to 40% and you have a lighter version of exactly the same colour.
That is why HSL is how palettes are usually built: fix the hue, vary lightness for a tint scale, and vary hue by 30° steps for related colours. It makes systematic palettes possible rather than accidental.
How to use the Colour Picker
- Type a colour in any format, or use the swatch picker.
- Or drop in an image and click anywhere on it to read that pixel.
- Copy the HEX, RGB or HSL code, or pick from the extracted palette.
Frequently asked questions
How do I get the colour code from an image?
Drop the image in and click anywhere on it. The HEX, RGB and HSL values for that exact pixel appear immediately.
Is my image uploaded?
No. It is drawn to a canvas in your browser and read locally. Nothing is transmitted.
What is a good contrast ratio?
At least 4.5:1 for body text and 3:1 for large text, to meet WCAG AA. The readout shows the ratio against both white and black.
What is the difference between HEX and RGB?
Only notation. HEX writes each channel as two hexadecimal digits; RGB writes them as decimal numbers. They describe exactly the same colours.
How is the palette chosen?
Pixels are grouped into coarse colour buckets and the eight most common are averaged and shown. It reflects what actually dominates the image rather than what looks most striking.
Related tools
Last reviewed September 4, 2026. Results are estimates for general information only.