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 Picker

You'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

  1. Open the Image Color Picker and add an image: a photo, logo or screenshot.
  2. Move the pointer over the image and click the color you want. With the keyboard, the arrow keys move the picker and Enter picks.
  3. Copy the code. The picked color appears with its HEX, RGB and HSL codes, each with a copy button.
  4. Get a palette. The tool also finds the image's main colors automatically; choose how many (3 to 10) with Number of colors.
  5. 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.

Share this post :