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 lets you sample any colour from an image and read its exact code, so you can reuse that shade with confidence anywhere else. Point the eyedropper at a single pixel and you instantly get the colour in every format you might need — HEX, RGB, HSL, HSV and CMYK — ready to copy into your design tool, stylesheet or print artwork.
Colour pickers are used across web design, front-end development, print and branding, and accessibility work — anywhere the precise value of a colour matters. Ours is completely free and private: every image is processed in your browser and never uploaded to a server. On top of the core eyedropper you get automatic palette extraction from a photo, ready-made colour harmonies (complementary, analogous, triadic and more) and a built-in WCAG contrast checker so you can confirm your text stays legible.
How to pick a colour from an image
- 1
Upload or drag in your image
Drag an image straight onto the page, paste it with Ctrl/Cmd + V, or browse for a PNG, JPG, WEBP or GIF. Nothing leaves your device — the picker works entirely in your browser.
- 2
Click the eyedropper on a pixel
Move your cursor over the image and click the exact pixel you want. Zoom in for fine detail so you sample the precise shade rather than a neighbouring one.
- 3
Read and copy the colour codes
The readout panel shows the live HEX, RGB, HSL, HSV and CMYK values for the pixel you picked. Tap any value to copy it straight to your clipboard.
- 4
Extract a palette from the photo
Let the picker pull the dominant colours out of your image to build an instant palette. Select any swatch to see its full set of codes, or right-click to copy it.
- 5
Generate colour harmonies
From your chosen colour, generate complementary, analogous, triadic, tetradic, split-complementary and monochromatic combinations to build a balanced scheme.
- 6
Check contrast, then save or export
Pair your colour with a background in the WCAG contrast checker to confirm it passes AA or AAA, then save the colours you like and export them as CSS, JSON or a PNG swatch sheet.
HEX, RGB, HSL, HSV and CMYK explained
The same colour can be written several ways, and each format suits a different job. HEX and RGB describe colours for screens, HSL and HSV make colours easier to tweak by eye, and CMYK describes the ink mix used for print. The picker gives you all five at once so you never have to convert by hand — here is what each one is best for.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web and CSS — the most common way to write colours in HTML and stylesheets. |
| RGB | rgb(59, 130, 246) | Digital screens — additive red, green and blue values, ideal for on-screen work. |
| HSL | hsl(217, 91%, 60%) | Intuitive editing — adjust hue, saturation and lightness without guessing at numbers. |
| HSV | hsv(217, 76%, 96%) | Design tools — the hue, saturation and value model used by most colour pickers. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print — cyan, magenta, yellow and key (black) ink percentages for physical output. |
Web & UI design
Sample colours from a mockup, brand asset or reference photo and drop the exact HEX values into Figma, Sketch or your design system. Extract a palette to keep buttons, backgrounds and accents perfectly consistent across every screen.
Front-end development
Grab the precise colour you need and paste it straight into your stylesheet — including as CSS custom properties like --brand: #3B82F6;. Export a whole palette as ready-to-use CSS variables to keep your codebase tidy and your theming consistent.
Print & branding
Read the CMYK breakdown for any colour so your artwork prints the way it looks on screen. Sample colours from a logo or scanned brand guide to build a palette you can hand to a printer with confidence.
Accessibility
Use the built-in WCAG 2.1 contrast checker to make sure text and background colours meet AA or AAA requirements. Test any foreground and background pair, see the exact contrast ratio, and adjust until it passes for readers of every ability.
How we compare
Plenty of tools let you grab a HEX code from an image. Here is how our colour picker compares with a typical online picker such as imagecolorpicker.com.
| Colour models | HEX, RGB, HSL, HSV and CMYK, all shown at once | Mainly HEX and RGB |
| CMYK for print | Yes — full CMYK percentages | Rarely included |
| WCAG contrast checker | Built in, with AA/AAA pass or fail | Not available |
| Colour harmonies | Six harmony types generated automatically | Limited or none |
| Ads & privacy | No ads; images processed privately in your browser | Ad-supported, image often uploaded |
Frequently asked questions
How do I pick a colour from an image?
Upload or drag your image into the picker, then click the eyedropper on the exact pixel you want. The panel immediately shows that colour’s HEX, RGB, HSL, HSV and CMYK values, and you can copy any of them with a single tap. Everything happens in your browser, so your image is never uploaded.
What is a HEX colour code?
A HEX code is a six-digit way of writing a colour for the web, such as #3B82F6. The three pairs of characters represent the red, green and blue components in hexadecimal (base 16), from 00 to FF. It is the most common format in HTML and CSS because it is compact and unambiguous.
How do I convert RGB to HEX?
You convert each of the red, green and blue values (0–255) into a two-character hexadecimal number and join them together. For example, rgb(59, 130, 246) becomes #3B82F6. The colour picker does this for you automatically — pick a colour and every format, including the HEX code, is shown side by side ready to copy.
Can I build a palette from a photo?
Yes. After loading an image, use the palette extraction feature to pull out its dominant colours automatically. Each swatch comes with its full set of colour codes, and you can save the ones you like and export the whole palette as CSS variables, JSON or a PNG swatch sheet.
How do I check colour contrast for accessibility?
Open the WCAG contrast checker, set a text (foreground) colour and a background colour, and the tool shows the contrast ratio along with whether it passes WCAG 2.1 AA and AAA for normal and large text. Adjust either colour until it passes so your content stays readable for everyone.
Is the colour picker free and private?
Completely. The colour picker is free to use with no sign-up and no ads, and it is private by design: your image is processed entirely in your browser and never sent to a server. Nothing you pick or upload leaves your device.
