Image tool
Colour Picker
Click a colour in a picture and copy it as hex, RGB, or HSL, for CSS, design work, or a matching palette.
1. Choose an image
The image is read in this tab. Nothing is uploaded.
Choose an image, or drop one here
You can also paste an image with Ctrl or Command and V
JPG, PNG, or WebP
—Hex
—RGB
—HSL
Picked so far
Choose an image to begin. Nothing is uploaded.
2. Click a colour
The image will appear here. Click it to pick a colour.
Without a mouse, focus the image and use the arrow keys to move the reading point.
This picks one pixel, not a palette. The colour you get is the exact pixel under the pointer, taken from the full-resolution image rather than the preview. A photograph is made of thousands of slightly different tones, so sample several points to find the colour you actually meant. For a small group of dominant colours, sample a few representative areas by hand.
Using the colours you pick
Hex for CSS
The six character form, ready to paste into a stylesheet. It is what most colour pickers produce.
RGB for design tools
Design software usually wants 0 to 255 values per channel, which is exactly this format.
HSL for adjusting
Hue, saturation, and lightness make it easy to make a lighter or darker version of the same colour.
What a hex value actually is
A hex code is not a colour, it is an address for a colour inside a particular colour space, normally sRGB. The same address on a different display, or in a document saved in a wider space such as Display P3, resolves to a visibly different colour. This is why a hex lifted from a screenshot of a modern phone can look flat when you paste it into a design tool, and it is a property of the format rather than a fault in the picker.
Click the middle of an area, never the edge
Every pixel along a boundary between two regions is a blend of both, because the display that produced the image had to blend them too. Clicking an outline, a letter’s edge or a soft shadow gives you a colour that exists nowhere. Click well inside a flat region and the value is reliable.
Transparency gives you a meaningless answer
A semi-transparent pixel has no single colour until something is behind it. The checkerboard you can see through a transparent PNG is a drawing aid and is not part of the picture. If you need the colour that was there before an image was made transparent, it is not in the file, and no tool can read it back.
Check the contrast before you use the colour
The practical use for a picked colour is usually text or a background, and those have a measured requirement rather than a preference. Body text needs a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1. Two colours that look comfortable side by side on one screen regularly fail that on another, so check the ratio with a contrast checker rather than trusting the appearance.
Pull a palette from one picture
Five or six picks from a single photograph will tend to agree with each other, which is why picking beats inventing for a brand, a slide, or a set of cards. Picking each colour separately is how a design ends up with six shades of the same beige.
Reading values you can rely on, and sharing them usefully
The value this reports is read from the pixel directly under your pointer, which is what you want for a graphic, a screenshot, or a flat area of colour. In a photograph the value changes from pixel to pixel, so treat any single reading as a sample rather than as the colour of that object.
For a photograph, sample from the middle of a region rather than from near an edge, and sample two or three places to see how much the colour varies. If the readings differ noticeably, you are looking at lighting and texture, and a single hex code will not represent it.
Most design tools accept a hex code, which is what the copy button gives you. If the destination asks for RGB or HSL, the values are shown alongside rather than only as hex, so you can type them without converting by hand.
One caution: screenshot colour is affected by your display profile and by any colour management the application applies. For work where the exact value matters, such as brand colour, confirm against the original specification rather than against a screenshot.
Further reading: Read the full guide: Colour Picker
Common questions
Are my images uploaded?
No. The image is opened in this tab and every colour is read on your machine. Nothing is uploaded.
What are Hex, RGB and HSL for?
They are three ways of writing the same colour, for different jobs. Hex is what goes in CSS. RGB is what design tools tend to use. HSL separates the colour from how bright and how saturated it is, which is what you want when you need a lighter or darker version of the same colour rather than a different one.
Why should I click the middle of a colour rather than the edge?
Because edges are where two colours meet, and the pixel there may be a blend of both. Click the flat middle of a solid area and you get that colour; click its border and you get whatever the tool happened to average across the join, which is often nothing you would have chosen.
What happens with a transparent image?
A transparent pixel has no colour to read, so any value reported for one is meaningless. Where an image has transparency, treat only the visible areas as answerable and ignore the rest.
Can I get a whole palette from one picture?
Yes, pick several colours across the image and they are kept together. A few from one photograph usually look like a set, whereas colours chosen one at a time tend not to.