How to Find the Hex Code of Any Color in an Image — Free, 3 Steps

A hex color code is a six-character string (like #3A7BD5) that precisely identifies a color for use in CSS, design tools, and any digital application. If you see a color in an image and need its hex code, you can get it in about 20 seconds using a free browser tool — no Photoshop, no color meter app, no downloads.

Step 1: Open the color extractor in your browser

Navigate to the Kingfisher Color Extractor on any device with a browser — desktop, iPhone, Android, iPad. The tool loads immediately with no account or installation required.

The main area shows a drop zone. On desktop, drag your image file directly onto this zone. On mobile, tap the zone and select the image from your photo library or files app.

Supported formats: JPG, PNG, WebP, GIF, BMP, SVG — any image format your browser can render.

Step 2: Click or tap the specific color you want

Once the image loads, you can get the hex code two ways:

Method A — Dominant color extraction: The tool automatically extracts the 8 most dominant colors and shows each swatch with its hex code. If the color you want is prominent in the image, it will appear here. Click or tap any swatch to copy its hex code.

Method B — Pixel picker: Click or tap anywhere on the image preview to pick the exact color at that precise point. The hex code and RGB value appear instantly in a strip below the image. This method gives you any color in the image regardless of whether it is a dominant color. Tap "Copy" to copy the value.

For most use cases, the pixel picker is more useful when you want a specific color rather than the overall palette.

Sell Custom Apparel — We Handle Printing & Free Shipping

Step 3: Copy the hex code and use it anywhere

The hex code is a standard six-character CSS color value. After copying it from the tool, paste it into:

• CSS/code: color: #3A7BD5; or background: #3A7BD5;
• Figma: click any color in the Fill or Stroke panel and paste the hex code directly
• Canva: click the color picker, scroll to the hex input at the bottom, and paste
• PowerPoint/Word: use "More Colors" then "Custom" and enter the hex value
• Photoshop/Affinity: paste into the hex input in the color picker

The same hex code works in all of these. If a tool asks for RGB instead of hex, note the RGB values shown alongside the hex in the tool.

Tips for accurate color picking from images

• Use PNG instead of JPEG when possible — JPEG compression blurs colors at edges; PNG preserves exact pixel values
• Click in the middle of a solid color area rather than near an edge — edges have anti-aliasing pixels that are mixtures of two colors
• Take multiple readings if the color looks slightly different across the image (which happens with photos due to lighting) and average the RGB values manually
• Use screenshots at full screen resolution for the most accurate screen color extraction
• Zoom into the image on your device before taking a screenshot if the area you want to sample is small

Frequently Asked Questions

What is the difference between HEX and RGB color codes?

HEX (#3A7BD5) and RGB (rgb(58, 123, 213)) represent the same color in different notation. HEX is most common in CSS and design tools. RGB is used in some applications and is also used in print work (though print typically uses CMYK). Both are shown by the tool and either can be copied.

Can I get the hex code from a color on a website without an image file?

Yes — use your browser's DevTools to inspect the element and see its CSS color values directly. For a visual approach without DevTools, take a screenshot of the web page and then use the color extractor on the screenshot.