How to Find the Color Code of Any Image

Identifying the exact code of a color is a constant need in design: matching the color of a reference logo, extracting a palette from an inspiration photo, keeping consistency across different pieces of a visual identity. Depending on the context — whether you have access to the file, whether the color is in an online image, on a website, or in a photo taken with your phone — the most efficient method varies.

Understanding color code formats

Before getting into the methods, it's worth understanding the three most common formats for representing colors digitally:

HEX and RGB represent the same information in different formats — you can always convert from one to the other. HSL describes color in terms of hue, saturation, and lightness, which is more intuitive for manual adjustments. CMYK is exclusive to printing.

Method 1: Online color extractor (the fastest)

To identify the dominant colors of an entire image — or precisely locate a specific pixel — an online color extractor is the most direct solution. Just upload the image and the tool automatically identifies the most prominent colors, with HEX codes ready to copy.

ImageTools' Color Extractor analyzes any photo or image and returns the dominant colors with their HEX codes. Everything runs directly in your browser — the image never leaves your device.

1. Open the color extraction tool.
2. Upload the image or drag the file into the indicated area.
3. The tool automatically identifies the most prominent colors in the image.
4. Click any color to copy its HEX code.

Method 2: Using your browser's eyedropper (Chrome DevTools)

If the color you want to identify is on a website — the background of a page, a button, a logo — Chrome has a built-in tool for that.

1. Open the site in Google Chrome.
2. Press F12 (or right-click and choose "Inspect").
3. In the DevTools panel, click the cursor icon in the top-left corner (or press Ctrl+Shift+C).
4. Hover over any element on the page — DevTools will show the CSS properties, including colors in HEX or RGB.
5. To open the visual color picker, click the colored square next to any color value in the CSS panel.

Chrome DevTools also has a built-in Color Picker: clicking the color square in the CSS styles panel opens a picker that lets you browse the spectrum and see values in HEX, RGB, HSL, and HSLA all at once.

Method 3: Eyedropper in Canva

If you're working in Canva and want to capture a color from an image already in your project:

1. Select the element whose fill you want to change (a text, shape, or background).
2. Click the element's color in the side panel to open the color picker.
3. In the picker, click the eyedropper icon.
4. Click any point on the image in the canvas to capture the exact color of that pixel.
5. The HEX code will show up in the picker's text field.

Method 4: Eyedropper in Photoshop and Illustrator

Photoshop

With the image open, select the Eyedropper tool (shortcut: I). Click any point on the image — the captured color shows up in the color box in the tools panel. To see the HEX code, double-click the color box (opens the Color Picker) and the HEX value appears in the bottom-right field.

Illustrator

With the file open, select an object, then click the fill or stroke color in the tools panel. In the Color Picker that opens, the HEX code is in the bottom field. Alternatively, use the Eyedropper tool (shortcut: I) to pick up the color from any point on the canvas.

Method 5: Browser extension — ColorZilla

The ColorZilla extension (available for Chrome and Firefox) adds a permanent eyedropper to your browser. With it installed, you can:

• Capture the color of any pixel on any site with one click.
• See the code in HEX, RGB, and HSL instantly.
• Copy the value with one click.
• Access a history of recently collected colors.

It's the most practical solution for anyone who needs to capture colors from websites often, without opening DevTools every time.

Method 6: Color-capture apps on your phone

To identify colors from physical objects — a wall, a product, packaging — or from images on your phone, there are dedicated apps:

• Color Grab (Android) — point the camera at any surface and capture the HEX code in real time.
• Palette Cam (iOS/Android) — extracts the full color palette from photos taken on the spot or from your gallery.
• Canva (iOS/Android) — the eyedropper in Canva mobile works on imported images.

How to use the extracted color codes

Once you've identified a color's HEX code, the most common applications are:

In CSS / web development

Use it directly in your code: color: #3ecf8e; or background-color: #3ecf8e;. For lighter or darker variants, use HSL — it's much more intuitive to adjust lightness than to manipulate HEX values by hand.

In Canva, Figma, or Adobe

Paste the HEX code into the color field of any element. All major design tools accept HEX directly.

To build a full palette

With the base color identified, the Color Palette Generator automatically produces harmonious combinations — complementary, analogous, triadic, and monochromatic — with all the codes in HEX, RGB, and HSL ready to use in your project.

For printing

Convert HEX to CMYK before sending to the printer. On-screen colors (RGB/HEX) and printed colors (CMYK) have different gamuts — what looks identical on your monitor can show a visible shift once printed. Tools like Adobe Illustrator and Affinity Designer handle this conversion automatically when exporting for print.

Why the extracted color may not be exactly what you wanted

An important detail: photographic images rarely have a perfectly uniform color across an area. What looks like a solid blue in a photo can have dozens of subtle pixel-to-pixel variations, caused by lighting, JPG compression, and camera noise. The eyedropper captures the exact color of one specific pixel — which can be slightly different from the "overall blue" you're trying to identify.

For photographic areas, it's best to use an extractor that calculates the dominant color of a region — like the Color Extractor does — instead of capturing a single pixel. The result is a more representative color, and more useful for design work.

Frequently asked questions