Image Color 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.