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 click on any part of an image and get back the precise colour underneath it, expressed in whichever format you need — HEX, RGB, HSL, HSV or CMYK. Instead of eyeballing a shade or guessing at a code, you sample the pixel directly and reuse the exact same colour elsewhere.
Designers, developers, print professionals and anyone working on accessibility all rely on this kind of precision — a mismatched colour on screen versus in print, or on a brand page versus a mockup, is an easy mistake to avoid with the right tool. This one is free and private by design: every image is processed inside your own browser, never on a remote server. Alongside the eyedropper, you get automatic palette extraction from any photo, one-click colour harmony generation, and a WCAG contrast checker to keep your text readable.
How to pick a colour from an image
- 1
Upload or drag in your image
Drag a PNG, JPG, WEBP or GIF onto the page, paste one directly, or browse to select a file from your device. Processing happens locally, so your image is never uploaded.
- 2
Click the eyedropper on a pixel
Position the eyedropper over the exact point you want and click. Zoom in beforehand if you need to be sure you are sampling the right pixel.
- 3
Read and copy the live colour values
The moment you sample a pixel, its HEX, RGB, HSL, HSV and CMYK values are displayed together. Click any value to copy it to your clipboard.
- 4
Extract a palette from the image
Use the palette tool to automatically detect the dominant colours across the whole image and turn them into a set of usable swatches.
- 5
Generate colour harmonies
Starting from your sampled colour, build complementary, analogous, triadic, tetradic, split-complementary or monochromatic combinations for a cohesive scheme.
- 6
Check contrast, then save or export
Test your colour against a background in the WCAG contrast checker, then keep the ones you like and export them as CSS, JSON or a PNG swatch sheet.
HEX, RGB, HSL, HSV and CMYK explained
The same colour looks identical on screen no matter how it is written, but the notation you choose depends on what you are doing with it. HEX and RGB are built around how screens render colour, HSL and HSV describe it in terms a person can adjust by feel, and CMYK reflects the ink used in printing. This picker converts your sampled colour into all five at once.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web and CSS — the everyday shorthand for colour in HTML and stylesheets. |
| RGB | rgb(59, 130, 246) | Digital screens — expresses colour as red, green and blue light intensities. |
| HSL | hsl(217, 91%, 60%) | Intuitive editing — change hue, saturation or lightness without recalculating RGB. |
| HSV | hsv(217, 76%, 96%) | Design tools — the hue/saturation/value model behind most colour-picker interfaces. |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Print — the cyan, magenta, yellow and key ink percentages used by printers. |
Web & UI design
Sample a colour from a screenshot, competitor site or photograph and take its exact HEX code into Figma, Sketch or wherever you design. Extracting a full palette from one reference image helps keep buttons, backgrounds and accents consistent throughout a project.
Front-end development
Take a sampled colour straight into your stylesheet as a CSS custom property, such as --brand-blue: #3B82F6;. Exporting an entire palette as CSS variables in one go keeps a codebase’s theming organised and easy to update later.
Print & branding
Check the CMYK figures for any colour before sending artwork to print, so the finished piece matches what you designed on screen. Pull colours directly from a logo or scanned brand guideline to assemble a print-ready palette.
Accessibility
Use the built-in WCAG 2.1 contrast checker to confirm that any text and background combination meets AA or AAA thresholds. See the precise contrast ratio and adjust either colour until the pairing is comfortably legible for all readers.
How we compare
Many free colour pickers give you a HEX code and little else. Here is how this tool compares with a typical online picker such as imagecolorpicker.com.
| Colour models | HEX, RGB, HSL, HSV and CMYK all at once | Mostly limited to HEX and RGB |
| CMYK for print | Full CMYK percentages provided | Usually not included |
| WCAG contrast checker | Built in, with instant AA/AAA results | Not available |
| Colour harmonies | Six harmony types generated for you | Minimal or missing |
| Ads & privacy | Ad-free, image never leaves your browser | Ad-supported, image often sent to a server |
Frequently asked questions
How do I pick a colour from an image?
Bring your image into the picker by uploading, dragging or pasting it, then click the eyedropper on the pixel you want to sample. Its HEX, RGB, HSL, HSV and CMYK values appear instantly, and any of them can be copied with one click. Because everything runs in your browser, the image itself is never uploaded.
What is a HEX colour code?
A HEX code is a six-character code, like #3B82F6, made up of three two-digit hexadecimal pairs for red, green and blue, each ranging from 00 to FF. It is the standard way colours are written in HTML and CSS because it packs the full colour into a short, exact string.
How do I convert RGB to HEX?
Convert each red, green and blue value (0 to 255) into two hexadecimal digits, then join the three pairs together — for example, rgb(59, 130, 246) becomes #3B82F6. The colour picker does this conversion automatically as soon as you sample a colour, listing every format at once.
Can I build a palette from a photo?
Yes. Once an image is loaded, the palette extraction feature identifies its dominant colours and lays them out as swatches, each with its own set of codes. You can save the swatches you want to keep and export the whole palette as CSS, JSON or a PNG sheet.
How do I check colour contrast for accessibility?
Open the contrast checker, pick a foreground (text) colour and a background colour, and it will show you the contrast ratio plus whether it passes WCAG 2.1 AA and AAA for normal and large text. Adjust the colours as needed until the combination passes.
Is the colour picker free and private?
It is, completely. There is no cost, no account required and no advertising. Your image is processed entirely within your own browser rather than on a remote server, so nothing you upload or pick ever leaves your device.
