How to Extract Color Palettes from Photos
How median-cut color quantization extracts dominant colors from images, the six-swatch UI palette anatomy, and exporting CSS variables for your design system.
Nature, architecture, and photography are the best sources of color inspiration. Extracting a palette from a strong photograph beats scrolling abstract color wheels. The image already contains harmonies that work. For a brand identity, a website theme, or an app UI, it is a reliable shortcut to cohesive color.
This is how color extraction works under the hood, the six-swatch structure worth building toward, and how to do it all in the browser without sending your source images anywhere.
How Color Extraction Works
A high-resolution photo contains millions of distinct colors, and a design system needs five to eight deliberate swatches. Getting from one to the other is called color quantization. Grouping pixel values into clusters and picking the colors that represent them.
The workhorse is the median cut algorithm, from the early days of color displays and still standard in modern tools. It works in a few steps. It plots every sampled pixel in a three-dimensional RGB space, a cube where the axes are red, green, and blue from 0 to 255. It finds the channel with the widest spread and splits the pixels at the median value, dividing the cube into two halves. It repeats on each half until the box count matches the palette size you want. Eight boxes for an eight-color palette. It averages the pixels in each box, and those averages become the swatches.
The result is mathematically representative. Dominant background hues and vivid accents both survive, because the clustering follows where the color actually is in the image.
Extracted palettes tend to be harmonious for a reason. Real scenes contain the relationships that color theory describes. A sunset holds analogous oranges and pinks. A forest floor pairs complementary greens and browns. A product shot on a blue background creates built-in contrast. The algorithm does not know any of this. It reflects what the image already has, which is why a photo-derived palette almost always feels more cohesive than one assembled from arbitrary swatches.
The Six-Swatch Anatomy of a UI Palette
Extracted colors become useful when they have roles. Six swatches cover most applications.
Primary. The dominant brand hue, for headers, active states, and key navigation. A forest photo gives you a rich pine green.
Secondary. A supporting hue that harmonizes without competing, for secondary links, badges, and tags.
Accent. A high-contrast pop used sparingly, reserved for CTAs and notification dots. Warm orange against cool blues is the classic.
Dark neutral. A deep, desaturated version of your primary for body text. Pure black strains the eyes on screens. A dark navy reads better and feels more intentional.
Light surface. A soft tint for card faces and backgrounds. Off-white with a hint of your brand color beats stark white.
Muted neutral. The mid-gray backbone for secondary text, captions, borders, and disabled states.
Six roles, one source image, and the interface hangs together because every color shares a common origin.
Why Extract Locally
The source images here are often exactly the ones you do not want to upload. Unreleased product photography, proprietary brand assets, personal photos. A cloud extractor uploads them, runs the analysis on a server, and returns JSON. You have no way to know what happens to the files afterward.
In-browser extraction avoids the round trip entirely. The image loads into a local Canvas element, the quantization reads pixel data with getImageData, and nothing is transmitted. For designers under NDAs, the difference between a usable tool and a liability. The median-cut math runs in a WebAssembly module, so a 4K image produces a palette in milliseconds. Iterating across several candidate photos becomes instant instead of a queue-waiting exercise.
From Photo to CSS Variables
The Color Palette Extractor turns an image into a working design system in a few steps. Drop in the photograph. The engine extracts dominant swatches with their HEX, RGB, and HSL values. Use the eyedropper to inspect specific pixels and click to add any accent the algorithm missed. Then grab the generated CSS custom properties:
:root {
--color-primary: #2563eb;
--color-secondary: #0ea5e9;
--color-accent: #f59e0b;
--color-background: #f8fafc;
--color-surface: #ffffff;
--color-text-dark: #0f172a;
--color-text-muted: #64748b;
--color-border: #e2e8f0;
}Those variables drop straight into Tailwind, styled-components, or vanilla CSS, which keeps the whole application consistent and makes theme updates a one-file change. The palette becomes part of the codebase, versioned and adjustable, instead of a screenshot in a design file.
Before shipping, check contrast. A palette that looks right in a hero image can fail for body text. Verify that the dark neutral and muted neutral pass WCAG contrast against the light surface, and that any text over an accent color still reads. Tools that show the ratios at export time make this a thirty-second check rather than a manual calculation.
Working with Photos vs. Brand Colors
Two approaches exist and they serve different jobs.
Photo-derived palettes capture the mood of the moment. The calm of a coastal scene, the energy of a street shot, the warmth of a candlelit interior. They are ideal for hero sections, campaign pages, and mood-forward branding, where the color story is the point.
Brand palettes are a different discipline. A small, deliberate set chosen for recognition, contrast, and meaning, then locked in for consistency.
The practical workflow uses both. Extract from photography to find the direction, then distill what works into a tightened brand set with verified contrast and clear roles. The extractor accelerates the first step, and the six-swatch structure gives the second a template to build on.
The Colors You Did Not Think to Extract
Beyond the dominant swatches, a good extraction session surfaces useful details. The darkest tone for text. The lightest for surfaces. The warmest and coolest accents for contrast. Designers often find the most valuable color in a photo is the one they would not have sampled by eye. A muted mid-tone or a subtle complementary hue that ties the palette together. Let the algorithm present the palette rather than hand-picking every swatch, then curate from there.
Color palettes do not need to be invented. They can be found. Photography gives you harmonies that already work, quantization extracts them reliably, and in-browser processing keeps the source images private while the palette lands in your CSS in seconds.