Image Colour Picker Online Free

Pick any colour from any image — get the HEX code, RGB, HSL and CMYK values instantly. Free colour picker with zoom preview, history palette and WCAG contrast checker. No sign-up, no watermark.

No upload to server HEX · RGB · HSL · CMYK Colour history palette Pixel-level zoom preview

🎨 Drag & drop an image here

or click to browse

JPG · PNG · WebP · GIF · BMP · HEIC — No sign-up required

⏳ Decoding HEIC file in browser — this takes a few seconds…
👆 Click or hover to preview — click to save colour · On mobile drag to preview, lift finger to save
Position: —
8× zoom preview
HEX#000000
RGBrgb(0, 0, 0)
HSLhsl(0, 0%, 0%)
CMYKcmyk(0, 0, 0, 100)
Brightness
—
0–255
Luminance
—
WCAG relative
Contrast on white
—
WCAG ratio
Contrast on black
—
WCAG ratio
Colour History
Pick colours to build your palette
🎯

Pixel-Accurate Picking

Click any single pixel to get its exact HEX code and colour values. The 8× zoom preview shows surrounding pixels magnified so you can pinpoint exactly the colour you need.

🎨

Build a Colour Palette

Every colour you pick is saved to your history palette. Click any swatch to copy it again. Export your full palette as a text file with all four colour formats for each colour.

♿

WCAG Contrast Checker

Instantly see the WCAG accessibility contrast ratio against white and black — know immediately whether your colour meets AA or AAA accessibility standards.

How to Pick a Colour from an Image and Get the HEX Code — Free

This free online colour picker lets you extract any colour from any image with a single click — and get the HEX code, RGB, HSL and CMYK values instantly. Upload your image, hover to see the 8× zoom preview of the pixels around your cursor, then click to lock in the colour. Individual copy buttons for each format let you paste directly into CSS, Figma, Photoshop, Canva, Tailwind or any design tool — no sign-up required, no watermark.

Every colour you pick is added to your history palette at the bottom — so you can build a complete colour palette by picking multiple colours from a reference image. This is ideal for extracting brand colours from a logo or screenshot free online: upload the image and pick every colour to document your brand palette. The full palette exports as a plain text file with all four formats for every colour. Once you have your colours, use our watermark tool to brand your images or apply creative effects with our image filters tool.

The tool also shows WCAG accessibility contrast ratios against white and black backgrounds, helping designers immediately check whether a colour meets the minimum 4.5:1 ratio required for WCAG AA compliance. All processing happens entirely in your browser — your image is never uploaded to any server. After picking colours, you can convert the image format or compress it using our other free tools.

Colour Format Reference — HEX, RGB, HSL and CMYK Explained

Different design tools and contexts use different colour formats. This tool provides all four simultaneously so you can copy whichever you need without converting manually.

HEX

Web design, CSS and HTML

A six-character hexadecimal code representing colour as three pairs of hex digits for red, green and blue. The most universally recognised colour format in web design — used in CSS, HTML, Figma, Tailwind CSS and virtually every web tool.

Example: #3B82F6 · Range: #000000 to #FFFFFF
RGB

Digital screens and web development

Expresses colour as three numbers for Red, Green and Blue light channels, each ranging from 0 to 255. The native colour model of digital screens. Used widely in CSS, JavaScript canvas operations and digital image processing.

Example: rgb(59, 130, 246) · Range: 0–255 per channel
HSL

CSS colour theory and shade generation

Stands for Hue, Saturation and Lightness. More intuitive for colour adjustments — changing only Lightness creates tints and shades without affecting the hue. Ideal for generating colour palettes and design systems.

Example: hsl(217, 91%, 60%) · Hue: 0–360°, S/L: 0–100%
CMYK

Print design and physical media

Stands for Cyan, Magenta, Yellow and Key (Black) — the four ink colours used in physical printing. Required for assets prepared in Adobe Illustrator, InDesign or any professional print workflow.

Example: cmyk(76, 47, 0, 4) · Range: 0–100 per channel

Frequently Asked Questions

How do I get the HEX code of a colour from an image?

Upload your image using the drop zone above, hover over the image to see the 8× zoom preview, then click the pixel whose colour you want. The HEX code appears instantly with a Copy button — paste it directly into CSS, Figma, Canva, Photoshop or any design tool. No sign-up required and no watermark is added.

How do I extract brand colours from a logo free online?

Upload your logo or brand asset using the drop zone. Click each colour in the image — every colour is saved to your history palette below. Once you have picked all the brand colours, click Export Palette to download a text file with HEX, RGB, HSL and CMYK values for each colour. Free, no sign-up, works entirely in your browser.

How do I pick a colour from an image on mobile?

On mobile, drag your finger across the image to preview colours — the zoom strip updates as you drag so you can see the exact pixel. Lift your finger to save the colour to your palette. The tool works on iPhone and Android in any modern browser with no app needed.

What is the difference between HEX, RGB and HSL?

HEX is a six-character hexadecimal code (e.g. #3B82F6) used in web design and CSS. RGB expresses the same colour as three numbers for Red, Green and Blue (0–255 each). HSL stands for Hue, Saturation and Lightness — it is more intuitive for colour adjustments because changing Lightness alone creates tints and shades without affecting the hue.

What is the WCAG contrast ratio?

The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios to ensure readability for people with visual impairments. A ratio of at least 4.5:1 is required for WCAG AA for normal text, and 7:1 for AAA. This tool shows the ratio of your picked colour against both white and black so you can make accessibility-conscious colour choices immediately.

Can I build a full colour palette from an image?

Yes — every colour you click is saved to the history palette below the image. Pick as many colours as you need, then export the full palette as a text file with all four formats for each colour. Ideal for extracting brand colours from a logo, screenshot or reference design. You can then use those colours when adding a watermark or applying creative filters.

What other free image tools does FreeConverto offer?

FreeConverto offers a full suite of free browser-based tools including an image converter, compressor, resizer, cropper, rotator and image filters — all free, private and instant with no sign-up.

Scroll to Top