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 a single colour from any image and instantly see its exact code, so you can carry that shade into another piece of work with total accuracy. Click on one pixel and the tool reads it back to you in every format designers and developers rely on — HEX, RGB, HSL, HSV and CMYK — no guesswork, no manual conversion.
Whether you are building a website, writing CSS, preparing artwork for print or checking that your text is legible for every reader, having the right colour value in the right format matters. This picker is free to use and completely private — images are handled locally in your browser and never uploaded anywhere. Beyond the eyedropper itself, you can pull a full palette out of a photo, generate colour harmonies from any shade you pick, and run a built-in WCAG contrast check before you commit to a design.
How to pick a colour from an image
- 1
Upload or drag in an image
Drop a PNG, JPG, WEBP or GIF onto the page, paste one from your clipboard, or browse for a file. The image stays on your device — nothing is sent to a server.
- 2
Click the eyedropper on a pixel
Hover over the exact spot you want to sample and click. Zoom in first if you need to land on a precise pixel rather than one nearby.
- 3
Read and copy the live colour codes
As soon as you pick a pixel, the readout updates with its HEX, RGB, HSL, HSV and CMYK values. Click any of them to copy it to your clipboard immediately.
- 4
Extract a palette
Run the palette extractor to pull out the dominant colours in your image automatically, giving you a ready-made set of swatches to work from.
- 5
Generate colour harmonies
Take your sampled colour as a base and generate complementary, analogous, triadic, tetradic, split-complementary or monochromatic schemes around it.
- 6
Check contrast, then save or export
Run your colour past the WCAG contrast checker against a background of your choice, then save your favourites and export them as CSS, JSON or a PNG swatch sheet.
HEX, RGB, HSL, HSV and CMYK explained
Every colour can be described in more than one way, and each notation exists for a reason. HEX and RGB are built for screens, HSL and HSV are laid out so a human can adjust them intuitively, and CMYK describes how much ink a printer needs to lay down. This tool converts between all five automatically, so you always have the right one on hand.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web and CSS — the standard shorthand used in HTML, stylesheets and design tools. |
| RGB | rgb(59, 130, 246) | Digital screens — combines red, green and blue light values for on-screen colour. |
| HSL | hsl(217, 91%, 60%) | Intuitive editing — tweak hue, saturation and lightness independently. |
| HSV | hsv(217, 76%, 96%) | Design tools — the hue, saturation and value wheel found in most colour pickers. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print — cyan, magenta, yellow and key ink percentages for physical printing. |
Web & UI design
Lift a colour straight from a screenshot, mockup or brand photo and drop its HEX value into your design file. Extracting a palette from a reference image is a quick way to keep buttons, backgrounds and highlights consistent across a whole interface.
Front-end development
Copy a sampled colour straight into your stylesheet, including as a CSS custom property such as --brand-blue: #3B82F6;. Exporting a full palette as CSS variables keeps your theme centralised and easy to maintain.
Print & branding
Check the CMYK breakdown of any colour before it goes to press, so what you see on screen matches what comes off the printer. Sample colours straight from a logo file or a scanned brand guide to build a print-ready palette.
Accessibility
Run any foreground and background pairing through the WCAG 2.1 contrast checker to confirm it meets AA or AAA before you ship it. See the exact ratio and adjust either colour until your text is comfortably readable.
How we compare
Most online colour pickers stop at a HEX code. Here is how this tool stacks up against a typical alternative such as imagecolorpicker.com.
| Colour models | HEX, RGB, HSL, HSV and CMYK shown together | Usually just HEX and RGB |
| CMYK for print | Full CMYK percentages included | Often missing entirely |
| WCAG contrast checker | Built in, with clear AA/AAA results | Not offered |
| Colour harmonies | Six harmony types generated instantly | Basic or absent |
| Ads & privacy | No ads — images stay in your browser | Ad-heavy, images often uploaded |
Frequently asked questions
How do I pick a colour from an image?
Load your image into the picker by uploading, dragging or pasting it, then click the eyedropper on the pixel you want to sample. The colour’s HEX, RGB, HSL, HSV and CMYK values appear straight away, ready to copy with a single click. The whole process happens in your browser, so the image is never uploaded.
What is a HEX colour code?
A HEX code represents a colour using six hexadecimal digits, for example #3B82F6. The digits form three pairs — one each for red, green and blue — running from 00 up to FF. It is the format most commonly seen in web design because it is short and precise.
How do I convert RGB to HEX?
Each of the red, green and blue values, ranging from 0 to 255, is converted into a two-digit hexadecimal number and the three are strung together. So rgb(59, 130, 246) becomes #3B82F6. The picker handles this conversion the instant you sample a colour, showing every format side by side.
Can I build a palette from a photo?
Yes — once your image is loaded, use the palette extraction tool to automatically pull out its most prominent colours. Every swatch carries its own full set of codes, and you can save your favourites or export the entire palette as CSS, JSON or a PNG sheet.
How do I check colour contrast for accessibility?
Open the contrast checker, choose a foreground (text) colour and a background colour, and it will calculate the contrast ratio and tell you whether it passes WCAG 2.1 AA and AAA for both normal and large text. Keep adjusting the colours until you get a pass.
Is the colour picker free and private?
Yes, entirely. There is no charge, no account needed, and no adverts. Every image you use is processed locally in your browser rather than being sent to a server, so nothing you pick or upload ever leaves your device.
