Colour Picker
Pick any colour from an image and get HEX, RGB, HSL, HSV and CMYK codes instantly.
Upload an image to pick a colour
Drag & drop, paste, or browse — PNG, JPG, WEBP or GIF
Tip: you can also paste an image with Ctrl/Cmd + V
Colour codes
Nearest colour name: Royal Blue
Colour harmonies
Contrast checker (WCAG)
Sample text
Saved colours
No saved colours yet — pick one and tap “Save colour”.
A colour picker is a tool that lets you sample the exact colour of any pixel in an image and read its value as a code you can use elsewhere. Instead of guessing at a shade or eyeballing a screenshot, you point at a pixel and get its precise HEX, RGB, HSL, HSV and CMYK values instantly — ready to paste straight into your stylesheet, design file or print spec.
Colour pickers are everywhere in creative and technical work: web designers use them to match brand colours, developers copy HEX and RGB codes into CSS, print designers convert screen colours to CMYK, and accessibility specialists check whether text and background colours meet contrast requirements. Our picker is completely free and private — every image you open is processed right in your browser and never uploaded to a server. On top of colour sampling you can extract a full palette from a photo, generate colour harmonies (complementary, analogous, triadic and more) and run a WCAG contrast check, all in one place.
How to pick a colour from an image
- 1
Upload or drag in your image
Drag and drop a photo onto the picker, paste it with Ctrl/Cmd + V, or browse for a file. PNG, JPG, WEBP and GIF are all supported, and nothing leaves your device — the image is loaded directly in your browser.
- 2
Click the eyedropper on a pixel
Move your cursor over the image and click the pixel you want to sample. Use the zoom preview to line up the eyedropper precisely so you capture the exact colour rather than a neighbouring pixel.
- 3
Read and copy the colour codes
The readout panel shows the sampled colour as HEX, RGB, HSL, HSV and CMYK at the same time. Click any value to copy it to your clipboard, ready to drop into CSS, a design tool or a print spec.
- 4
Extract a palette from the image
Select “Extract palette” to pull the dominant colours out of the whole image at once. It is the fastest way to build a coherent scheme from a photo, a screenshot or a piece of brand artwork.
- 5
Generate colour harmonies
From any picked colour, generate complementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies. Each harmony gives you a set of colours that work together, so you can move from one shade to a full palette in seconds.
- 6
Check WCAG contrast, then save or export
Pair a text colour with a background and the contrast checker shows the WCAG 2.1 ratio and whether it passes AA and AAA. When you are happy, save your colours and export them as CSS, JSON or a PNG swatch sheet.
HEX, RGB, HSL, HSV and CMYK explained
The same colour can be written in several different formats, and each one suits a different job. HEX and RGB describe colours the way screens produce them, HSL and HSV describe them the way people tend to think about them, and CMYK describes them the way ink is mixed for print. The picker gives you all five at once, so you can copy whichever format fits the tool you are working in.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web and CSS — the standard shorthand for colours in HTML and stylesheets. |
| RGB | rgb(59, 130, 246) | Digital screens — red, green and blue channels as used by displays. |
| HSL | hsl(217, 91%, 60%) | Intuitive editing — adjust hue, saturation and lightness independently. |
| HSV | hsv(217, 76%, 96%) | Design tools — hue, saturation and value, as seen in many colour panels. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print — cyan, magenta, yellow and key (black) ink percentages. |
Web and UI design
Sample colours from a mockup, a competitor’s site or a mood board and match them exactly across your interface. Extracting a palette from a hero image gives you a scheme that already feels cohesive, and the harmony tools help you find accent and hover colours that sit naturally alongside your primary shade.
Front-end development
Copy HEX or RGB values straight into your stylesheet, or export a whole palette as CSS custom properties to drop into your design system. Having HSL to hand also makes it easy to define consistent lighter and darker variants of a colour for states like hover, active and disabled.
Print and branding
Screen colours do not always translate cleanly to ink, so the picker shows CMYK alongside every sampled colour. That lets you check how a brand colour will behave in print and hand a designer or printer the cyan, magenta, yellow and key percentages they need for an accurate result.
Accessibility
Readable colour combinations are a core part of WCAG 2.1. The built-in contrast checker calculates the ratio between any text and background colour and tells you whether it meets AA and AAA for normal and large text, so you can catch low-contrast pairings before they reach your users.
How we compare
Tools like imagecolorpicker.com cover the basics of picking a colour from an image, but stop short on the parts that matter for real design, development and accessibility work. Here is how our colour picker compares.
| Colour models | HEX, RGB, HSL, HSV and CMYK, all shown at once | Mainly HEX and RGB |
| CMYK for print | Yes — CMYK percentages for every colour | Not provided |
| WCAG contrast checker | Built in, with AA and AAA results for normal and large text | Not included |
| Colour harmonies | Complementary, analogous, triadic, tetradic, split-complementary and monochromatic | Limited or none |
| Ads and privacy | No ads; images stay in your browser and are never uploaded | Ad-supported, with third-party tracking |
Frequently asked questions
How do I pick a colour from an image?
Upload or drag your image into the picker, then click the pixel you want to sample. The eyedropper reads that pixel and shows its HEX, RGB, HSL, HSV and CMYK values, which you can copy with a single click. Use the zoom preview to place the eyedropper exactly where you want it.
What is a HEX colour code?
A HEX code is a six-digit hexadecimal representation of a colour, written with a leading hash — for example #3B82F6. The first two digits set the red channel, the next two green and the last two blue, each from 00 to FF. HEX is the most common way to write colours in HTML and CSS.
How do I convert RGB to HEX?
Each of the red, green and blue values (0–255) is converted to a two-digit hexadecimal number and joined together behind a hash. For instance rgb(59, 130, 246) becomes #3B82F6. You do not need to do this by hand — pick any colour and the tool shows both RGB and HEX side by side.
How do I build a palette from a photo?
Load the photo and select “Extract palette”. The picker analyses the image and pulls out its dominant colours as a set of swatches. You can select any swatch to see its full colour codes, save the ones you like, and export the whole palette as CSS or JSON.
How do I check colour contrast for accessibility?
Open the contrast checker, then set a text colour and a background colour. The tool calculates the WCAG 2.1 contrast ratio and shows whether the pair passes AA and AAA for both normal and large text, helping you keep your content readable for everyone.
Is the colour picker free and private?
Yes. The colour picker is completely free to use with no sign-up, and it is private by design — every image is processed entirely in your browser and is never uploaded to a server. Your images and colours stay on your device.
