Color Palette Extractor,
dominant colors from any image.

Color extraction guide

How color palette extraction works, and why it matters for design.

How the extractor works under the hood

This tool reads your image entirely in the browser using the HTML5 Canvas API — no upload to any server occurs. The pipeline has three stages:

• Downsample — the image is drawn onto an off-screen canvas scaled to a maximum of 160 × 160 pixels. Full-resolution processing would produce identical results but take 100× longer, since color patterns repeat at this scale.
• Pixel sampling — every opaque pixel (alpha channel > 50%) is read from the canvas using getImageData(), giving a flat array of RGB triplets.
• K-means clustering — the pixel array is partitioned intok groups where each group's centroid represents the "average color" of its members. The algorithm iterates until no pixel changes its cluster assignment, then the centroids are sorted by cluster size (dominance) and returned as the palette.

K-means clustering for color quantization

K-means is an unsupervised machine-learning algorithm that groups data points by minimizing within-cluster variance. For color extraction, each pixel is a point in three-dimensional RGB space, and the algorithm finds kcluster centers that best summarize the distribution of all colors in the image.

The initialization strategy matters significantly for result quality. This tool uses a hue-sorted initialization: pixels are sorted by their HSL hue angle (0–360°) and k evenly-spaced pixels are selected as starting centroids. This ensures the initial centroids are spread across the color wheel rather than clustered in one region, which produces more visually diverse palettes.

After initialization, the algorithm alternates between two steps until convergence or 30 iterations:

• Assignment step — each pixel is assigned to the nearest centroid using Euclidean distance in RGB space.
• Update step — each centroid is recalculated as the arithmetic mean (average) of all pixels assigned to it.

Why a strong color palette matters for web design

Color is the most immediately perceived attribute of a user interface. Before a user reads a word or clicks a button, they have already formed an emotional impression of the page based on its colors. A well-defined palette serves several concrete functions:

• Visual hierarchy — A primary brand color, a secondary accent, and neutral background tones give designers a toolkit to emphasize important actions and de-emphasize secondary content without relying on size and position alone.
• Brand consistency — When every button, link, and heading uses the same small set of intentional colors, the interface feels cohesive across pages. Inconsistent color use is one of the leading causes of interfaces that feel "cheap" or untrustworthy.
• Accessibility — A well-planned palette makes it easier to ensure that all text meets WCAG contrast ratios. Ad-hoc color choices frequently result in text that fails the 4.5:1 ratio required for AA compliance.
• Implementation efficiency — Defining a palette as CSS custom properties (or a Tailwind theme) means that global rebranding requires changing a single source of truth rather than hunting through hundreds of hex codes scattered across stylesheets.

The 60-30-10 color rule

A common starting framework for applying an extracted palette to a UI is the 60-30-10 rule, borrowed from interior design:

• 60% — dominant color. This is typically the background or the most neutral color in the palette. It sets the overall tone without overwhelming the eye.
• 30% — secondary color. Often used for sidebars, cards, and secondary containers. Provides enough contrast from the dominant color to define structure.
• 10% — accent color. The most vivid or saturated color in the palette. Used for call-to-action buttons, links, and highlights. Its scarcity makes it effective at drawing attention.

When you extract a palette from a reference image, sort the swatches by their percentage contribution to identify which role each color should play.

Understanding color spaces: RGB, HSL, and HEX

• HEX — A six-digit hexadecimal representation of the RGB channels (#RRGGBB). The most common format in CSS and design tools. Compact and universally supported, but not intuitive for human reasoning about hue or lightness.
• RGB — Explicit red, green, and blue channel values from 0 to 255. Direct representation of how monitors mix phosphor intensities. Useful for rgba() transparency and when doing arithmetic on color channels.
• HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). The most intuitive model for human reasoning: hue is the color family, saturation is the vividness, and lightness is how dark or light it is. Adjusting a palette by shifting only the lightness value in HSL produces accessible tint and shade scales.

Practical use cases for palette extraction

• Brand photography matching — Extract colors from a brand's photography library to ensure UI colors harmonize with the images that will appear alongside them.
• Competitive analysis — Screenshot a competitor's website and extract their palette to understand their visual positioning and differentiate yours.
• Art direction — Use a reference artwork or photograph as a mood board to derive a palette for a campaign's digital assets.
• Dark mode adaptation — Extract a light-mode palette, then use the HSL values to systematically derive dark equivalents by adjusting lightness while preserving hue and saturation relationships.