Color picker from image
Open, drop or paste a photo, screenshot or logo, then pick any pixel to copy its HEX, RGB, HSL, HSV or CMYK value and see the nearest CSS color name. It also checks contrast and builds a palette you can export.
- Free
- No sign-up
- Your image never leaves your device
How to use it
- 1Choose, drop or paste an image.
- 2Click or tap the pixel you want. A magnifier shows the pixels around your pointer so you can aim.
- 3Copy the HEX, RGB or HSL value, or export the palette as CSS variables, a Tailwind theme or a PNG strip.
HEX, RGB or HSL, and why contrast matters
HEX, RGB and HSL are three ways to write the same color. A HEX code is a # followed by six characters, two each for red, green and blue, and it is what CSS, brand guides and most design tools expect. RGB lists those same three channels as numbers from 0 to 255, which is how screens and most code libraries think. HSL describes a color as hue, saturation and lightness, so it is the easiest to adjust by hand: raise the lightness for a hover state, or lower the saturation for a quieter version of the same color.
Under “More formats” you also get HSV, the hue, saturation and value that Photoshop and Figma show in their color pickers, and CMYK. The CMYK numbers are worked out from RGB with a simple formula, so treat them as a starting point: a printer converts with its own ink and paper profile and may land on different values.
Contrast decides whether people can read text on a color. WCAG, the web accessibility standard, scores it as a ratio from 1:1 to 21:1. Normal text needs at least 4.5:1 to pass level AA, and 7:1 for AAA. Large text, roughly 24 px or 19 px bold and up, needs 3:1 for AA. The readout shows your picked color against white and against black, so you can see which one works for text on it.
Photos and JPEG files are noisy, so neighboring pixels are rarely identical: pick from a flat area, or use the palette, which averages similar pixels. The values are what your browser displays, which can differ slightly from the values a design app reads from an embedded color profile.
Get a color palette from an image
The palette shows the colors an image uses most, most used first. To find them, the tool shrinks a copy of the picture to 256 pixels on its longest side, groups similar colors and lists the most common groups. A big photo is just as quick, the same image always gives the same palette, and mostly transparent pixels are ignored.
You get six colors by default, or any number from 3 to 12 from the size menu. To keep a color the palette missed, pick it in the image and choose “Add picked color”. Pick a swatch to inspect it like any other color, with its codes, name and contrast. For the colors of one part of a picture, such as a logo on a photo, crop the image to that part before you open it.