Image Color Picker

How to pick a color from an image

1. Upload a photo, logo or screenshot. It stays in your browser while you pick.
2. Move over the image. A magnifier shows the pixels under the pointer and the HEX code. On a phone, touch and drag.
3. Click or lift your finger to keep the color. The last 12 picks stay in the list; click any HEX, RGB or HSL value to copy it.

For the main colors of the whole image instead of one point, choose how many colors you want and press Extract palette.

HEX, RGB and HSL color codes

• HEX such as #1E88E5 is the six-digit code used in CSS, Canva, Figma and most design apps.
• RGB such as rgb(30, 136, 229) gives red, green and blue from 0 to 255. Photoshop, PowerPoint and Excel color dialogs use it.
• HSL such as hsl(208, 79%, 51%) gives hue, saturation and lightness, which makes it easy to build lighter and darker shades of the same color in CSS.

All three describe the same color in the sRGB color space, so you can paste whichever one your app asks for.

Getting an exact color from a logo or screenshot

• Pick from the middle of a flat area. Edges of text and shapes are blended with the background, so pixels there are in-between colors.
• Use a PNG when you can. JPG compression shifts colors by a few values, especially around sharp edges.
• Screenshots can differ slightly from the design file. Some screens, including many Macs, use a wider color space, and the screenshot can store slightly different values than the brand guide.

Make a color palette from a photo

Extract palette groups similar pixels together and returns the most common colors, largest share first. Three to five colors work well for a brand palette, six to eight for a mood board. Copy them as a HEX list, as CSS variables (--color-1 and so on) or as JSON with HEX, RGB and HSL. Picking colors happens entirely in your browser; extracting a palette sends the image to our server to compute the colors.