How to Get the Color Code from an Image
Find the exact HEX or RGB code of any color in a photo, logo or screenshot, and pull a whole palette from an image, with a free image color picker.
Published
Free tool: Image Color PickerYou've found the perfect shade in a photo, a brand's logo or a screenshot, and now you need its code to use it in a design, a website or a presentation. An image color picker reads the exact color of any pixel and can pull a whole palette from a picture. This guide explains how, and what to watch out for, using the free Image Color Picker.
Why pick colors from an image?
- Match a brand. Get the exact colors from a logo when no style guide is available.
- Build a palette from a photo you love, such as a sunset or a room, for a website, slides or a painting.
- Recreate a design from a screenshot.
- Keep charts and graphics consistent with an existing image.
How to pick a color with Graph Maker
- Open the Image Color Picker and add an image: a photo, logo or screenshot.
- Move the pointer over the image and click the color you want. With the keyboard, the arrow keys move the picker and Enter picks.
- Copy the code. The picked color appears with its HEX, RGB and HSL codes, each with a copy button.
- Get a palette. The tool also finds the image's main colors automatically; choose how many (3 to 10) with Number of colors.
- Copy the palette as a list of HEX codes or as ready-to-paste CSS variables.
The image is analyzed in your browser, so it isn't uploaded.
Tips for accurate colors
- Use the original image rather than a screenshot of it where you can. Screenshots, resizing and compression can shift colors slightly.
- Pick from a flat area. Edges between colors blend pixels together, so click well inside a solid patch.
- Avoid compression artifacts. In heavily compressed JPGs, a "solid" area may contain several slightly different shades; pick a few spots and compare.
- Beware of lighting in photos. The same red wall can look different across a photo because of shadows and highlights. Choose the shade you want, not necessarily the "true" color.
- Check contrast before using a color for text. The Color Picker shows how readable a color is on white and black.
Turning a palette into a color scheme
A palette pulled from a photo is a great starting point. To balance it, pick one main color, one or two supporting colors and a neutral, and use them in roughly 60-30-10 proportions. The Color Wheel suggests matching colors for any shade you picked; see How to Choose Colors That Go Together.
Frequently asked questions
How do I find the HEX code of a color in a picture?
Open the picture in the Image Color Picker, click the color, and copy the HEX code shown next to the picked color.
Can I get all the colors from an image?
The tool finds the most important colors rather than every single pixel color, which can run into the thousands in a photo. Choose 3 to 10 colors for a usable palette.
Why is the color code slightly different from the brand's official color?
Images are often resized, compressed or color-adjusted, which shifts colors a little. If accuracy matters, use the brand's official style guide or the original vector logo.