Image Color Picker & Palette

Finds the main colors of an image and shows them as HEX, RGB and HSL codes, and gives the code of any point you press. Use it to take colors from a photo for a design, or to check a logo color.

How to use

1. Drop an image onto the box or click to choose one.
2. "Main colours" lists the most used colors and their shares. Try a different "Number of colours" (5 to 10) or "Method".
3. Press or drag on the image to see that point's color under "Picked colour". You can zoom in first, and "Pick area" can average the nearby pixels.
4. Press a code to copy it. For the whole palette, use "Copy as CSS variables", "Copy as JSON" or "Save as PNG".

How it works

• The main colors are found on a copy reduced to at most 256 pixels on its longer side. Transparent pixels are not counted.
• Median cut repeatedly splits the group with the widest spread of colors at its median value; k-means repeatedly recalculates the center of each group. K-means takes a little longer.
• The last 30 picked colors are kept in this browser on this device. The image is not uploaded.

Questions and answers

How do I get the color code from a picture?

Open the image and press the spot you want. The HEX, RGB and HSL codes appear under "Picked colour"; press a code to copy it.

What is the difference between HEX and RGB?

They are two ways to write the same color. RGB gives red, green and blue as numbers from 0 to 255, and HEX writes the same three values as two hexadecimal digits each. rgb(255, 0, 0) is #FF0000.

Why is the picked color slightly different from what I see?

Neighboring pixels in a photo often differ a little. Set "Pick area" to the average of 3 × 3 or 5 × 5 pixels for a steadier value.

Can I pick a color from outside this page?

Only in browsers that support it. There, a "Pick from anywhere on screen" button appears and lets you pick any point on the screen.