How to Find Color Code From Image — Free Tool

What is a hex color code?

A hex color code is a six-character code that represents a specific color in web design and digital graphics. It starts with a hash symbol (#) followed by three pairs of hexadecimal numbers, like #1E40AF. Each pair controls the red, green, and blue light in the color, from 00 (none) to FF (full).

HEX codes are used in CSS, Canva, Photoshop, and almost every design tool. RGB and HSL are alternative ways to write the same colour. All three describe the same visual result, just in different formats. [Source: W3C CSS Color Module]

How to find the color code from an image with MentorMakers

The MentorMakers Image Color Picker lets you click any pixel in a photo or screenshot to get the exact colour code. It runs entirely in your browser, so the file never leaves your device.

1. Open the Image Color Picker on your phone or computer.
2. Upload an image, drag and drop it, or paste a screenshot directly using Ctrl+V (or Cmd+V on Mac).
3. Move your mouse or finger over the image. A magnifier appears, showing the exact pixels.
4. Click the pixel whose colour you want. The HEX, RGB, and HSL codes appear.
5. Click any code to copy it to your clipboard.
6. The tool also lists the main colours in the image, grouped and sorted by frequency. Use this to build a quick palette.

If you need to check whether two colours are readable together (for text on a background), use the Color Contrast Checker. If you need to convert a code from one format to another, use the Color Converter.

Worked example. A student is designing a poster and wants to match the exact blue from a university logo. They download the logo, open it in the Image Color Picker, click the blue area, and copy #1E40AF. They paste it into Canva and get an exact match. They also check the "main colours" list to see the secondary colours used in the logo.

What is the difference between HEX, RGB, and HSL?

HEX, RGB, and HSL are three ways to describe the same colour. You do not need to choose one for the image; the tool gives you all three. You choose the format based on where you are pasting the code.

FormatExampleBest forWhere it is usedHEX#1E40AFWeb design, CSS, most design appsHTML, CSS, Canva, Photoshop, FigmaRGB30, 64, 175Microsoft Office, some design toolsWord, PowerPoint, Excel ("More colours")HSL220, 65%, 40%Creating lighter or darker shadesCSS (modern syntax), design systems

Use HEX for websites and most design tools. Use RGB for Microsoft Office. Use HSL when you want to adjust only the lightness or saturation without changing the hue.

How do I extract a full color palette from an image?

The tool lists the main colours of the image automatically. After you upload an image, scroll below the picker to see the largest colour groups, listed by frequency. This is useful for building a brand palette from a logo or a photo.

Click any of the listed colours to copy its HEX code. If you want to save the palette, copy each code into your design tool and save it as a swatch library.

Can I pick a color from my screen without uploading an image?

Yes, if you are using Chrome or Edge on a desktop. The tool has a screen picker button that lets you pick a colour from anywhere on your screen, including other apps, without uploading an image.

This is useful when the colour you need is inside a PDF viewer, a design tool, or a video player. Just click the screen picker button and then click the colour on your screen.

Common mistakes when picking colors from images

• Picking a pixel with a shadow or gradient. A single pixel might be darker or lighter than the true colour. Zoom in first if you can, and click a flat area of the colour.
• Using RGB in CSS. CSS uses HEX or modern rgb() syntax. If you copy 30, 64, 175 into a CSS file without wrapping it in rgb(), it will not work. Use the HEX code for CSS.
• Forgetting that JPG compresses colours. A JPG image may have slight colour variations due to compression. Use a PNG screenshot if you need the exact original colour.
• Assuming the screen picker works on mobile. The screen picker button is only available on Chrome and Edge for desktop. On mobile, upload an image and pick from the image preview.

Troubleshooting: why is the color code wrong?

"The colour looks different from the original." The image may have been compressed as JPG, or your screen's colour profile may be affecting what you see. Use a PNG screenshot and compare the HEX code to the original source if possible.

"The code won't copy." Some browsers block clipboard access on insecure pages. Make sure you are using the HTTPS version of the tool.

"The screen picker does not work." The screen picker is only available on Chrome and Edge for desktop. If you are on a different browser or on mobile, upload an image instead.

Key takeaways

• A hex colour code starts with # and has six characters, like #1E40AF.
• Click any pixel in an image to get HEX, RGB, and HSL codes instantly.
• Click a code to copy it. Use HEX for CSS, RGB for Office, HSL for shade adjustments.
• The tool lists the image's main colours automatically for quick palettes.
• On Chrome and Edge for desktop, you can pick colours directly from your screen.

Ready to grab a colour? Find the exact HEX code from any image with the free MentorMakers Image Color Picker in seconds.