Free publishing tool
Color picker from image
Upload, paste or drag an image in, hover to read a colour, click to keep it. Nothing is uploaded; the pixels are read by your browser and stay there.
Sample size
Average of a 3×3 block, which smooths out JPEG noise.
rgb(124, 58, 237)
hsl(262, 83%, 58%)
How to read a colour
| Format | What it is | Use it for |
|---|---|---|
HEX#7C3AED | Six hex digits, two per channel, in red, green, blue order. #RGB is the same thing with each digit doubled. | CSS, design tools and brand guidelines. The form most people are asked for. |
RGBrgb(124, 58, 237) | The same three channels as decimal numbers from 0 to 255. | Code that builds colours, alpha variants like rgba(), and checking one channel by eye. |
HSLhsl(262, 83%, 58%) | Hue as a position on a 360-degree wheel, saturation and lightness as percentages. | Making a lighter or darker tint of the same hue without guessing at hex digits. |
Nothing is uploaded: the image is decoded and read in your browser. Colours come from the pixels as the browser decodes them, and JPEG compression, embedded colour profiles and your screen's calibration each shift the result slightly, so treat a picked brand colour as a starting point and confirm it against the source file.
Why the picked colour is never exactly the brand colour
A brand guide says the blue is #1D4ED8. The screenshot of the website says it is #1E4DD6. Neither is wrong. Between the design file and your screen the colour passed through JPEG compression, which smooths nearby values together; a colour-profile conversion, because most phones capture in a wider gamut than the web displays; and anti-aliasing at every edge, which blends the blue with whatever sits next to it.
The sample-size control exists for the last of those. Averaging a small square instead of reading one pixel stops a click on a compressed edge from returning a colour that appears nowhere in the design. It does not fix the first two, which is why a colour read from an image is a starting point to confirm against the source file, not a specification.
HEX, RGB and HSL are the same colour written three ways
| Format | Looks like | Reach for it when |
|---|---|---|
| HEX | #7C3AED | Pasting into CSS, a design tool, a brand guide or a Canva colour field |
| RGB | 124, 58, 237 | Working in code or an image editor that asks for channels |
| HSL | 263°, 83%, 58% | Making a darker or lighter variant of the same hue: change the last number and nothing else |
Using a palette without ruining it
- The dominant colours of a photo are mostly its background. Pick the brand colour by clicking on the thing that is the brand, and use the extracted palette for the supporting shades.
- One primary, one accent and two neutrals is a full palette for a social template. Six is a starting list to cut from, not a set to use.
- Check contrast before putting text on a picked colour. Body text needs roughly a 4.5-to-1 contrast ratio against its background to be readable by everyone, and most mid-tone brand colours fail that against white.
- Write the HEX values down once, in one place. A palette that lives in three people's heads drifts within a month.