How to pick a color from an image
- Select Choose file and pick a picture, or drop it on the box.
- Click or tap any spot on the image. The color appears with its HEX, RGB and HSL values, each with a Copy button.
- Below the picture, the Dominant colors list shows the six main colors found in the image. Click a swatch to copy it and see its values.
What the values mean
HEX is a six-digit code such as #2b55e0, the common way to write colors in CSS and design tools. RGB gives the red, green and blue amounts from 0 to 255. HSL describes the color by hue (0 to 360 degrees on the color wheel), saturation and lightness in percent, which makes it easy to make a color lighter or darker.
How the palette is found
The tool shrinks a copy of your image and groups similar pixels using k-means clustering. Each of the six groups is averaged into one color, and the list is ordered by how much of the picture it covers. Transparent pixels are ignored. The result is the same every time you use the same image.
Colors are read from the decoded image, so a pixel in a compressed JPG may differ slightly from what the original artwork used. Screens also show colors differently depending on their settings. On browsers that support it, a Pick from screen button also lets you sample anything visible on your display.
Tips
- Pick from a flat area for a color that matches the design. Edges blend two colors.
- Use the palette to match text or buttons to a photo.
- Trim the picture first with the crop tool so the palette shows only what matters.
- Make a small text version of an image with Image to Base64.
The image never leaves your device. Colors are read in your browser.