Color picker from image

When you click a point on the image, the tool reads that pixel and shows its color three ways:

Click a code and it is copied to your clipboard, ready to paste into Figma, Canva, PowerPoint, Word, a website builder or your stylesheet.

Below the image you also get the main colors of the picture: the tool groups similar pixels and shows the eight most common color groups. Click one to see its codes.

• Matching brand colors from a logo when nobody can find the brand guide.
• Designing with a photo: pick text and background colors that harmonize with an image on a website, slide or social post.
• Interior and fashion: find the code of a paint, fabric or product color from a photo, then search for similar colors. Note that photos are affected by lighting, so the code is an approximation of the real-world color.
• Web development: grab exact colors from a screenshot of a design mockup.
• Mood boards: collect a palette from inspiration images; the mood board maker can also extract one automatically.

• Use the original file, not a screenshot of a compressed image; JPG compression slightly shifts colors near edges.
• Click in the middle of a flat area, away from edges and text, where anti-aliasing blends colors.
• Check several points on gradients and photos, because neighboring pixels can vary a lot.
• Screen color is not print color. HEX and RGB describe colors on screens. For printing, a designer converts them to CMYK or matches them to a Pantone swatch, and results vary by printer and paper.

The image is analyzed in your browser and never uploaded, so confidential mockups and photos stay private.

All three formats describe the same screen color:

• RGB gives the amount of red, green and blue light, each from 0 to 255.
• HEX is the same three numbers written in hexadecimal: #RRGGBB. For example, 255 is FF, so pure red is #FF0000.
• HSL describes hue (0–360° around the color wheel), saturation (0–100%) and lightness (0–100%). It is the easiest to adjust by hand: keep the hue and change the lightness to get a lighter or darker shade of the same color.

To build a color scheme, a tip: take the main color's HSL code, then create lighter and darker variants by changing only the lightness value.

Accessibility check: if you use picked colors for text and backgrounds on a website, make sure the contrast is high enough to read. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal body text. Dark text on a very light background, or the reverse, is the safest choice.