No account · OKLab analysis · Your image stays in your browser
Image Color Territory Explorer
A palette identifies colors. A territory shows coverage, rare accents, and where each tone appears. It also suggests external interface accents with contrast measurements to support your choice.
Your image
Read an image's color territory
Drop it here or click to choose · JPG, PNG, WebP, AVIF, GIF, or SVG, up to 20 MB · analyzed in your browser, without uploading.
Upload an image to begin.
Reading
Dominant colors
Rare accents
Color location map
Click “view map” on a color to locate similar tones in the image.
Click the image to mark a point, then drag to move it. The magnifier shows the exact pixel. Choose “move” to use the arrow keys; Shift makes finer steps and Delete removes the point.
Points
What lies under each point
Each point provides six readings: the exact pixel, two local averages, the perceptual average, its territory, and a version with lightness constrained for interface use. Below them is a five-stop ramp extracted from neighboring pixels with a similar hue.
- Click the image to mark a point.
External accents
Colors the image does not have, but your interface needs
Generated, not extracted: candidates outside the territory, in four families. Click “use” to apply one to the token preview, or “details” to inspect the reasoning.
Token preview
Check contrast before choosing
The dominant color becomes the background. Text is derived from it, while the selected accent colors the button and link. If the accent does not reach 4.5:1 contrast, the link is adjusted and the change is explained here.
- background · dominant 1
- text · derived from background
- accent · selected external color
- link · contrast-adjusted accent
Export
Bring the color territory into your project
/* Analyze an image to generate variables */CSS variables include tokens, dominant colors, rare and external accents, and each point ramp. JSON adds OKLCH, coverage, distance, and contrast values.
What is an image's color territory?
A palette identifies the colors present. A territory answers three additional questions. How much of each color, because blue covering 40% and red covering 0.4% play different roles in a design decision. Which is an accent: a small red detail that immediately draws attention. And where each tone occurs, distinguishing a color spread across the photo from one concentrated in a corner. Calculations use OKLab, a color space designed to better approximate perceived color differences than raw RGB distances.
Dominant and rare colors: why they are counted separately
The analysis groups similar pixels and ranks groups by coverage. Those covering more than 7% are dominant colors: backgrounds, walls, skies, and other large areas. It then searches pixels outside those groups. A vivid tone covering less than 6.5% may still form a connected region (connected pixels rather than isolated specks), it is identified as rare accent. Requiring connected pixels helps distinguish a flower from compression artifacts. A simple pixel count can bury these colors under dominant groups.
Points, magnifier, and ramps: from pixel to region
Click to mark a point and inspect the exact pixel at 12× magnification. A single pixel may contain noise or glare, so each point offers six readings: the pixel, 3 × 3 and 11 × 11 linear-light averages, an OKLab perceptual average, the containing territory, and a version with lightness bounded from 0.32 to 0.82 for interface exploration. Below is the region ramp: the tool grows a region from the point through neighboring pixels with similar hue and chroma, then extracts five lightness stops (shadow, low, mid, high, highlight) from that region. The scale comes from the image itself.
External accents: colors outside the image
When designing over a photo, you may need a color that does not appear in it, so a button, label, or link stands apart from the background. External accents are built on an OKLCH grid, filtered to sRGB, and scored by distance from the territory and nearest image pixel. Four families have distinct targets: vivid (high chroma, for calls to action), soft (low chroma, more restrained), deep (dark, for buttons and strong marks), and light (for subtle highlights). Each option explains its distances under “details,” so you can make an informed choice.
Token preview: contrast before you choose
The dominant color becomes the background. Text retains some of its hue, while the selected accent colors the button and link. Pairwise WCAG 2.1 contrast checks use 4.5:1 for AA normal text. If needed, the link color is adjusted toward a nearby passing variant, with a visible explanation. CSS exports include tokens, territory colors, external accents, and point ramps. JSON also includes OKLCH values, coverage, distances, and contrast results for inspection or reuse.
Frequently asked questions
How does it differ from the palette extractor?
A palette shows which colors are present. A territory shows coverage, rare accents, and where colors occur. It also suggests colors outside the image, with contrast checks, for an interface designed around the photo.
What is a rare accent?
A color covering less than 6.5% of the image but forming a connected region, such as a flower, sign, or garment. The tool searches for it separately from dominant colors and checks pixel connectivity to help distinguish meaningful accents from compression noise.
What are external accents?
Generated colors, not extracted colors: candidates outside the image territory, grouped into vivid, soft, deep, and light families. Try them for a button, label, or link that needs to stand apart from a photo. Each candidate shows its distance from the territory and contrast against the dominant color.
Is my image uploaded to a server?
No. The image is opened and analyzed in a browser worker. The image file is not uploaded. After the page and its dependencies have loaded, image analysis can work without an Internet connection.
What do Δ OK and tolerance mean?
Δ OK measures distance between colors in OKLab. Around 0.02 can be subtle; around 0.08 generally represents a clearer difference, depending on viewing conditions. Tolerance controls the differences admitted by the provenance map and each point ramp. Increase it for grain or compression, or reduce it to isolate a tone.
Only need the photo's colors with shades and harmonies? Use the image palette extractor. To start from a color instead of an image, try the palette generator classic.
Turn color choices into usable design tokens
Choose a base color or load a reference image. Inspect extracted colors, shade steps, and the displayed contrast values before exporting. Rare accents and generated external accents are labeled separately: a generated suggestion is not a color found in the original photo. Contrast checks apply to the selected pair, not to every possible layout.
Are image files uploaded?
The image analysis runs in this browser. Keep a copy of the original image; export only the colors and formats you need.