Free publishing tool
Color picker from image
For matching a brand colour from a logo, a screenshot or a competitor's post when nobody sent you the style guide. Upload, paste or drag an image in, hover to read a colour, click to keep it. The pixels are read by your browser and the image is never uploaded, so an unreleased design is safe here.
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.
Picking a brand colour from a screenshot
- Paste a screenshot with Ctrl+V or Cmd+V, drag a file onto the picker, or choose one from your device. Large photos are scaled to 1,000 pixels on the long side so the page stays quick; brand colours are areas, so nothing that matters is lost.
- Leave the sample size at 3×3 for screenshots and photos. It averages nine pixels, which smooths out compression noise. Switch to 1×1 for pixel art or a flat logo where a neighbouring pixel is a different colour on purpose.
- Hover over the solid middle of the button, logo or heading you want, away from its edges, and click to keep it. You can keep up to twelve picks.
- Copy the HEX value for a design tool or CSS, and confirm it against the brand's own file if you can get it.
A worked example: clicking the purple of a button returns #7C3AED, which the picker also shows as rgb(124, 58, 237) and hsl(262, 83%, 58%). For a lighter tint of the same purple, keep the first two HSL numbers and raise the last: hsl(262, 83%, 70%) is about #A273F2. Text in white on #7C3AED has a contrast ratio of 5.7 to 1, which passes the 4.5 to 1 that normal-size body text needs.
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 handles the last of those. 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. Every social platform also re-compresses what you upload, so a colour picked from a downloaded Instagram or LinkedIn post has been through that twice.
How the six-colour palette is chosen
The palette is a frequency count, not a design judgement. Up to 40,000 pixels are sampled from the image, each is rounded into one of 4,096 colour buckets, and the most common buckets are taken in order as long as each is clearly different from the ones already chosen. That last rule is why a photo with a big blue sky returns one blue rather than six.
Transparent pixels are skipped, so a logo exported on a transparent background gives you the logo's colours rather than a palette of white or black. The flip side is that the most common colour in most photos is the background, so pick the brand colour by clicking on it and use the palette for supporting shades.
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 | 262°, 83%, 58% | Making a darker or lighter variant of the same hue: change the last number and nothing else |
Contrast before you post text on a picked colour
Social graphics put text on colour more than websites do, and mid-tone brand colours fail against white more often than people expect. The amber #F59E0B has a contrast ratio of only 2.15 to 1 with white text, below even the 3 to 1 allowed for large text, and 9.8 to 1 with black. The same colour that looks warm and readable on your monitor is hard to read in a bright feed on a phone.
One primary, one accent and two neutrals is a full palette for a social template. Write the HEX values down once, in one place; a palette that lives in three people's heads drifts within a month.
Questions about picking colours from images
Is my image uploaded anywhere?
No. The file is read by your browser into a canvas on this page, and every colour is read from that canvas locally. Nothing is sent to Cadencz or anyone else, which is why the picker works on a logo that has not been announced yet.
Why is the HEX code slightly different from the brand guide?
The image has been compressed, colour-converted or anti-aliased since it left the designer's file, so neighbouring values shift by a few points. #1E4DD6 against an official #1D4ED8 is a typical gap. Use the picked value to identify the colour, then use the official one in your work.
What does the sample size setting do?
It decides how many pixels are averaged for each reading: one, a 3 by 3 block, or a 5 by 5 block. Averaging makes a reading repeatable on a JPEG, where two adjacent pixels can differ visibly. Use one pixel only for flat artwork.
Can I paste a screenshot instead of saving it first?
Yes. Take the screenshot to your clipboard and paste it onto the page. The picker also accepts a dragged file or one chosen from your device, in any format your browser can display.
How do I check if text will be readable on a colour I picked?
Compare the contrast ratio between the text colour and the background. Normal body text needs at least 4.5 to 1 and large text at least 3 to 1 under WCAG. White on #7C3AED is 5.7 to 1 and passes; white on #F59E0B is 2.15 to 1 and fails, so use dark text on light brand colours.
Related tools
Set the graphic to 4:5, 1:1 or 9:16 before you put your picked colours on it.
Turn a WebP saved from a website into a PNG so other design tools will open it.