How to use the Image Color Picker
- Drag and drop the image you want to check, or click to choose it. You can also paste a screenshot straight in with Ctrl+V.
- Move your mouse over the image and the color under the cursor shows up live. Click a spot to lock in that color and add it to your history.
- Click the HEX, RGB or HSL button to copy the color code in that format.
- Check the dominant colors section below to see the image's main colors and how much of the image each one covers.
How to find a color code in a photo
A digital image is made up of tiny dots called pixels. Each pixel stores the strength of three colors of light, red (R), green (G) and blue (B), as a number from 0 to 255. This tool reads the exact RGB value of the pixel you click and shows it in these formats:
| Format | Example | Common uses |
|---|---|---|
| HEX | #2563EB | The web (CSS), color fields in Figma and Photoshop |
| RGB | rgb(37, 99, 235) | CSS, programming, video editing |
| HSL | hsl(221, 83%, 53%) | Adjusting hue, saturation and lightness |
In a photo, even a single object has slightly different colors from pixel to pixel because of lighting and compression. If you need an exact color, such as a logo color, pick the largest flat area of solid color. To convert to another format such as CMYK, use the color code converter.
How the dominant color palette is worked out
The dominant colors come from k-means clustering. The tool samples several thousand pixels evenly across the image and groups similar colors together. It takes the average color of each group and lists the groups from largest to smallest share of the image. Transparent areas are left out.
Dominant colors are a good starting point for a color scheme for a website or slide deck. Use the color with the largest share as a background and the second or third color as an accent, and the design will sit well with the photo. Choosing more colors splits the palette into finer shades.
Get colors from a website or app with a screenshot
- On the screen you want to sample, capture an area with
Win + Shift + Son Windows orCmd + Shift + 4on a Mac. - Come back to this page and press
Ctrl + V(Cmd + Von a Mac). The screenshot opens right away. - Click the button or text you want and copy its color code.
Your monitor's color settings, dark mode or browser zoom can make a captured color differ slightly from the original design value. If you need an exact value, such as a brand color, check the original design file or the official brand guidelines.