Image Color Extractor

About Image Color Extractor

How Does Colour Extraction Work?

The tool draws the uploaded image onto an HTML Canvas element, reads every pixel's colour data using the Canvas API's getImageData() method, then groups similar colours together using a quantization algorithm. A 24-bit colour image can contain up to 16.7 million unique colours (256 x 256 x 256 combinations of red, green, and blue). Quantization reduces that to a manageable set of 5-10 representative colours by clustering pixels with similar RGB values and averaging each cluster into a single swatch.

The algorithm works in five stages:

Step	What Happens
1. Load image	Image is drawn onto a hidden Canvas element, scaled down to 800px on its longest side for processing speed
2. Read pixel data	The Canvas API returns a Uint8ClampedArray with four values per pixel (R, G, B, A in that order). Up to 50,000 pixels are sampled for efficiency
3. Colour quantization	Each pixel's RGB values are rounded to the nearest multiple of 24, grouping visually similar colours. Clusters within a distance of 60 (sum of absolute RGB differences) are merged
4. Rank by frequency	Merged clusters are sorted by pixel count, and the top N clusters become the palette
5. Display palette	Each colour is shown as a swatch with its hex code, RGB values, and percentage of the image it represents

Transparent pixels (alpha below 128) are excluded from the count, so PNG images with transparency produce palettes based only on the visible content.

Understanding the Output

The results include several formats designed for different workflows:

Element	What It Tells You	Where to Use It
Colour swatch	Visual preview of each extracted colour - click to copy the hex code	Quick visual comparison
Hex code	The colour in #RRGGBB format, where each pair of hex digits represents a value from 0 to 255	CSS, Figma, Sketch, brand guidelines
RGB values	Red, green, and blue components as decimal numbers (0-255)	Code, design software, LED/hardware
Percentage	How much of the image this colour represents by pixel area	Identifying dominant vs accent colours
Palette bar	Proportional colour distribution rendered across the full width	Visual balance check at a glance
CSS variables	Ready-to-paste --color-1 through --color-N custom property declarations	Drop directly into a stylesheet

Click any swatch or hex code to copy it to the clipboard. The CSS variables block has a "Copy All" button that grabs every declaration at once.

The 60-30-10 Rule and Extracted Palettes

One of the most practical ways to apply an extracted palette is the 60-30-10 rule, a design principle used in interior design, fashion, and UI for decades. The rule suggests dividing colour usage into three proportions: 60% for the dominant colour (typically a neutral or muted tone), 30% for a secondary supporting colour, and 10% for an accent that draws attention.

When extracting colours from an image, the percentage breakdown maps naturally onto this framework. The colour with the highest percentage is usually a good candidate for the 60% dominant role (backgrounds, large surfaces). Mid-range percentages work as the 30% secondary (navigation bars, cards, sidebars). The smallest slices often make strong accents for buttons, links, and call-to-action elements.

Worked example: Suppose an extraction returns five colours with percentages of 38%, 24%, 18%, 12%, and 8%. The first colour (38%) serves as the page background. The second and third (24% + 18% = 42%) combine for secondary elements like headers and cards. The last two (12% + 8% = 20%) are accent candidates for buttons and highlights. Adjust exact assignments based on contrast and readability - run text/background pairs through a contrast checker to confirm they meet WCAG AA (4.5:1 ratio for normal text).

Colour Formats Explained

This tool outputs colours in two formats. Here is how they relate:

Format	Syntax	Range per Channel	Total Possible Colours
Hex (hexadecimal)	#RRGGBB	00-FF (0-255)	16,777,216
RGB (decimal)	rgb(R, G, B)	0-255	16,777,216

Both represent the same sRGB colour space - hex is just a more compact notation. #FF6B35 and rgb(255, 107, 53) describe the same orange. The hex format was adopted in the earliest HTML specifications and remains the most common format in CSS and design tools. If a project needs HSL or other formats, run the extracted hex values through a colour converter.

Modern displays increasingly support the Display-P3 colour space, which covers roughly 25% more colours than sRGB. The extracted values from this tool are sRGB, which remains the safe default for web and print work. P3 values require the CSS color(display-p3 ...) function and a compatible device.

How Many Colours Should You Extract?

The right number depends on the source image and the intended use. Here is a rough guide:

Extraction Count	Best For	Why
5 colours	Logos, icons, flat illustrations	Flat graphics have few intentional colours. Extracting more adds noise from anti-aliasing and compression artefacts
6 colours	Illustrations, simple scenes	Captures the main palette plus one or two transition tones between major areas
8 colours	Photographs, paintings	Good balance between detail and simplicity. Captures shadows and highlights as distinct swatches
10 colours	Complex scenes, gradients, detailed art	Picks up subtle variations in skin tones, skies, and foliage that fewer colours would merge together

If the extracted palette contains near-duplicate colours (two very similar blues, for example), drop down to a lower count. The quantization algorithm merges colours within a distance threshold, but highly detailed images can still produce clusters that look nearly identical at small swatch sizes.

Common Use Cases

Use Case	How to Apply the Extracted Palette
Website colour scheme from hero image	Extract 5 colours from the banner photo. Use the dominant colour as the page background and the smallest-percentage colours for buttons and links
Brand colour matching	Upload a client's business card or product packaging to identify their exact brand colours as hex and RGB values
Social media consistency	Extract colours from a product photo to create matching overlay text, borders, and call-to-action graphics
Presentation design	Pull colours from a key visual to set the slide deck's background, heading, and accent colours
Interior design	Upload a room photo to identify the existing palette before choosing new paint, fabric, or furniture
Game or app theming	Extract palette from concept art to generate UI colour tokens and environment tints
Data visualisation	Pull colours from a source photograph to build a chart colour scheme that feels connected to the subject matter
Print materials	Match a brochure or poster palette to an existing product photo so that typography and imagery feel unified

Tips for Better Extraction Results

Tip	Why It Helps
Crop the image to the area of interest first	Removes background colours that dilute the palette. Use an image cropper if needed
Use fewer extraction colours (5) for logos and flat graphics	Logos typically have 2-4 intentional colours. More extraction slots capture noise from compression artefacts
Use more extraction colours (8-10) for photographs	Photos have subtle gradients, shadows, and highlights worth capturing separately
Try different images of the same subject	Lighting and angle change the extracted colours significantly. Indoor and outdoor shots of the same scene produce very different palettes
Check contrast after extraction	Extracted colours may look great together but fail accessibility contrast requirements for text on background pairs
Reduce image size before uploading	Smaller images process faster. The tool scales to 800px internally, but uploading a 50MP photo still adds load time

From Extraction to Design System

An extracted palette is a starting point, not a finished design system. To build a complete set of design tokens from an image palette:

Step	Action	Tool
1	Extract dominant colours from the reference image	This tool
2	Generate shade scales (50-950) for each key colour	Colour Shades Generator
3	Check contrast of every text/background pair against WCAG AA	Colour Contrast Checker
4	Convert colours to HSL, OKLCH, or other formats as needed	Colour Converter

Most professional design systems use 5-9 base colours, each with 10-12 shade variations. Extracting from imagery gives a natural starting point that already has visual harmony, since the colours come from a real scene with real lighting.

Common Mistakes When Using Extracted Palettes

Colour extraction gives raw data, not a finished design decision. A few frequent mistakes to avoid:

• Using all extracted colours equally. The 60-30-10 rule exists because equal distribution looks chaotic. Let one or two colours dominate and keep the rest as accents.
• Ignoring contrast. Two extracted colours might be adjacent in the image but have a contrast ratio below 3:1, making them unusable as a text-on-background pair. Always verify with a contrast checker before committing.
• Extracting from a compressed JPEG. Heavy JPEG compression introduces colour banding and artefacts. A sky that looks smooth to the eye might produce three slightly different blues in the palette. Use the highest-quality source image available, or reduce the extraction count to merge those artefacts away.
• Treating extraction as exact colour matching. Quantization rounds colours to cluster centres. If a brand requires precise Pantone or hex values, use the extracted palette as a reference and manually confirm against the official brand guide.
• Forgetting dark mode. A palette extracted from a bright outdoor photo will be dominated by light, warm tones. Those colours may not work on a dark background without adjustments to saturation and lightness.

Privacy and Processing

Everything runs client-side in the browser using the Canvas API. The image is never uploaded to a server, never transmitted over the network, and never stored anywhere beyond the current browser tab. Closing or refreshing the page discards all data. Blob URLs created for previewing are revoked when a new image is loaded.

Sources

• MDN - Pixel Manipulation with Canvas
• Wikipedia - Median Cut Algorithm
• Wikipedia - Web Colors (Hex Format History)
• W3C - CSS Color Module Level 4