Color picker and palette from an image
Pick any pixel's hex, RGB and HSL code, pull a palette from a photo, and check the contrast between two colours. Your image stays on your device.
Drop an image, or click to choose
JPG, PNG, WebP or GIF. Screenshots work too.
Need several changes to one photo? The Photo editor does crop, text, filters and blur together.
How to get the hex code of a colour in an image
- Choose your image. A photo, a logo or a screenshot. It opens on your device and is never uploaded.
- Point at the colour. A magnifier shows the 11 by 11 pixels under the cursor, with the centre pixel marked, so you can land on exactly the one you want. On a phone, press and drag, then lift to pick.
- Copy the code. The colour shows as hex, RGB and HSL, each with its own Copy button.
From the keyboard, select the image, move the cursor with the arrow keys (hold Shift for bigger steps) and press Enter to pick.
Build a colour palette from a photo
As soon as the image opens, the tool lists its main colours: choose 5, 6, 7 or 8. It uses a method called median cut. Every pixel is placed in one box of colour space, and the box with the widest spread is split in half again and again until there is one box per colour. Each palette entry is the average of its box, and the percentage under it is roughly how much of the image that colour covers.
That makes the palette an approximation of the dominant colours, not a list of exact pixel values: an average can be a shade no single pixel has. When you need one exact colour, pick it from the image. The palette is built by this rule every time, so the same image always gives the same palette; no AI model is involved.
Hex, RGB and HSL explained
All three describe the same colour. Pick the one your tool expects:
Hex
#1a2b3c
The most common way to write a colour in CSS, design tools and brand guides.
RGB
rgb(26, 43, 60)
Red, green and blue from 0 to 255. Handy when a tool asks for the three numbers.
HSL
hsl(210, 40%, 17%)
Hue, saturation and lightness. The easiest to adjust by hand: change the last number to make a lighter or darker shade.
To convert between them, type or paste a colour in any of the three formats into a colour's field. The other two update straight away, so it also works as an RGB to hex or hex to RGB converter without an image.
Check contrast for readable text
The two colour cards are a foreground and a background. The tool shows their contrast ratio under the Web Content Accessibility Guidelines (WCAG 2.2) and whether it meets each threshold. A ratio runs from 1:1 (no contrast) to 21:1 (black on white). It is shown cut down to two decimals, never rounded up, so a pair that just misses a threshold never reads as a pass.
| What you are checking | Minimum ratio |
|---|---|
| Normal text, level AA | 4.5:1 |
| Large text (24 px, or 18.66 px bold), level AA | 3:1 |
| Normal text, level AAA | 7:1 |
| Large text, level AAA | 4.5:1 |
| Icons, borders and other graphics, level AA | 3:1 |
Export the palette
Copy the palette as CSS custom properties (--color-1, --color-2 and so on, ready to paste into a stylesheet) or as JSON with each colour's hex, RGB and HSL. Both can be saved as a file too.
Your image stays on your device
The picker reads the image with your browser's own canvas, so the picture is never sent anywhere. That matters for unreleased designs, client work and private photos. It is free, needs no sign-up, and keeps working offline once the page has loaded.
Related tools
- Favicon generator: Make favicon.ico, PNG and Apple icons from an image or letters.
- Convert image: Convert between PNG, JPG and WebP.
- Photo editor: Crop, adjust, filter, add text, emoji, blur and frames, with undo.