How to pick a colour from an image
- Upload a photo, screenshot, logo or design.
- Move your cursor over the image to preview colours, then click or tap to pick one. On a keyboard, focus the image, move with the arrow keys and press Enter.
- Copy the HEX, RGB or HSL value with the button beside it.
- Click any colour in the palette or history to select it and copy its HEX code.
Accurate colours, three formats
The colour picker reads pixels from the full-resolution image rather than the scaled preview, so you get the exact value at that point. HEX codes like #1E78C8 are standard in web design and most design apps. RGB shows the red, green and blue amounts from 0 to 255, and HSL describes hue, saturation and lightness, which makes it easy to create lighter or darker versions of a colour.
The palette groups similar colours and shows up to eight of the most common, distinct shades in your image, which is a quick way to build a colour scheme from a photo or match a brand’s existing artwork. Everything runs in your browser with the Canvas API.
Ideas for using the colour picker
- Matching your website colours to your logo.
- Finding the exact shade used in a screenshot or competitor design.
- Building a palette for slides or social posts from a photo.
- Getting paint or fabric inspiration from a picture.
Color picker FAQ
Why are colours slightly different from the original design file?
JPG compression and colour profiles can shift colours by a point or two. For exact brand colours, pick from a PNG or the original design.
Can I pick colours from my screen?
Take a screenshot first, then upload it here.
How do I use the colour in CSS?
Copy the HEX value, for example color: #1E78C8;, or the RGB or HSL value, which also work in CSS.