How to use the Image Color Picker
- Drop an image onto the box, choose a file, or paste a screenshot with Ctrl+V.
- Move the pointer over the image to see the magnified loupe, then click to pick a color. On a phone, touch and drag, then lift your finger to pick.
- Copy the color as HEX, RGB or HSL with the buttons beside each value. Your recent picks are saved below.
- Use the Dominant colors palette to grab the main colors of the whole image, or copy them all as CSS variables.
Features
- Pixel-precise picking with an 11 × 11 zoom loupe
- HEX, RGB and HSL values with one-click copy
- History of recent picks, remembered on this device
- Automatic palette of 6 or 8 dominant colors
- Copy the palette as a HEX list or CSS variables
- Mouse, touch and keyboard support
HEX, RGB and HSL explained
Screens build every color from red, green and blue light, each on a scale from 0 to 255. The same color can be written three common ways:
- RGB lists the three amounts directly:
rgb(91, 76, 240)is a strong violet-blue. - HEX writes the same three numbers in base 16, two digits each: 91 is 5B, 76 is 4C and 240 is F0, so the color is
#5B4CF0. HEX is the most common format in web design and design tools. - HSL describes hue (the angle on the color wheel, 0–360°), saturation (how intense, 0–100%) and lightness (from black at 0% to white at 100%). The same color is
hsl(245, 85%, 62%). HSL is handy when you want a lighter or darker version: keep the hue and saturation and change only the lightness.
All three are accepted by CSS, so pick whichever your tool or code prefers. For more conversions, such as CMYK, use the Color Converter.
Picking the exact pixel
Photos are rarely made of flat colors. A shirt that looks plain red contains dozens of slightly different reds from lighting, texture and compression. The loupe magnifies an 11 × 11 pixel area around the pointer so you can see this and land on a representative pixel rather than a highlight or a shadow. On edges, text and icons, anti-aliasing blends the foreground and background, so pick from the middle of a shape, not its border.
Keyboard users can focus the image, move the picker one pixel at a time with the arrow keys (ten pixels with Shift held) and press Enter to pick.
How the dominant colors are found
The palette uses k-means clustering, a standard technique for grouping similar values. A sample of the image's pixels is taken, then the tool:
- Chooses starting colors spread far apart from each other (the k-means++ method).
- Assigns every sampled pixel to the nearest starting color.
- Moves each color to the average of the pixels assigned to it.
- Repeats steps 2 and 3 until the groups stop changing.
The result is a set of average colors that together describe the image, sorted by how many pixels belong to each. The percentages show each color's share. Because they are averages, palette colors may not match any single pixel exactly; use the picker when you need one precise value. Fully transparent pixels are ignored, so logos on transparent backgrounds give useful palettes too.
Why the picked color might differ from the original design
- Compression. JPG and WebP shift colors slightly, especially in flat areas and near edges. Pick from a PNG or the original design file when exact brand colors matter.
- Color profiles. Photos from some cameras and phones use wide-gamut profiles such as Display P3. Browsers convert them for display, so the value you pick describes the color as shown on screen in standard RGB.
- Screen versus print. A HEX value describes light on a screen. Printed ink colors need CMYK or a spot color system and should be matched against a physical swatch.
Ideas for using it
Match a website's buttons to a brand photo, build a color scheme from a holiday picture, find the paint-like tone of a wall in a photo for inspiration, or check the colors in a competitor's screenshot. Once you have a color, check readable text combinations with the Contrast Checker or expand it into a scheme with the Color Palette Generator.
Your image is read by your browser on your device and is never uploaded.
Frequently asked questions
How do I get the HEX code of a color in a picture?
Add the image, move the pointer over the color you want and click. The HEX code appears on the right; press Copy to put it on your clipboard.
Does this color picker work on phones?
Yes. Touch the image and drag to aim with the loupe shown above your finger, then lift your finger to pick the color under it.
How is the color palette calculated?
It groups a sample of the image’s pixels into 6 or 8 clusters with the k-means algorithm and shows the average color of each cluster, sorted by how much of the image it covers.
Why is the picked color slightly different from my design file?
JPG compression, color profiles and anti-aliased edges all shift pixel values a little. Pick from the center of a flat area, ideally in a PNG export.
Is my image uploaded?
No. The image is drawn and read in your browser, and nothing is sent to a server. Your pick history is stored only in this browser.