Illustration Color Palette Extractor

What this tool does

Drop in an image and the tool clusters its pixels in the perceptual OKLab color space to find a set of representative colors. Each swatch is shown with its share of the image area, the color difference to the nearest other swatch, its lightness, and its contrast ratio on white and black backgrounds, so colors too close to tell apart are flagged immediately. You control it with the target color count, how aggressively similar colors get merged, whether the background is excluded, and whether low-saturation colors are pulled toward neutral gray. The extraction range narrows the pixels that reach the clustering down to one color family — skin tones, a hue family, or a custom range around a reference color — so the whole color count is spent on shades inside that family.

Where it fits in your workflow

• Pulling a numeric color scheme out of an existing illustration or reference photo so it can be reused deliberately.
• Locking down a character or series palette that stays consistent across multiple pieces of art.
• Separating the base, shadow, and blush tones of skin to check whether the shadows have gone muddy or lost their warmth.
• Studying how another artist paints skin: how many colors it takes and how far apart they sit.
• Checking whether your colors read as lines or text, and catching near-duplicate colors before they clutter a limited palette.

How to use it

1. Load an image and choose how many colors to extract.
2. To look at one color family only — skin, blues, and so on — pick it under "Extraction range." For anything else, choose "Custom color range" and set a reference color and tolerance.
3. If too many near-duplicate colors show up, raise "Merge strength." The OKLab distance threshold it maps to is shown live next to the slider.
4. For illustrations where the background fills most of the frame, turn on "Exclude background color."
5. To collapse muddy, low-saturation colors into a single neutral family, enable "Group low-saturation colors into neutrals."
6. Review each card for its area share, nearest color difference, lightness, and contrast ratio on white and black.
7. Pick a sort order, or reorder, add, and delete swatches by hand, then export as JSON, CSS, CSV, or PNG.

What each setting means

Number of colors

How many representative colors to pull out (2 to 12). Merging similar colors afterward can push the final count lower.

Extraction method

Balanced (K-means) builds representative colors around the largest areas of the image, good for grasping the overall color structure. Accent-focused (median cut) splits color space by the range it occupies, so a small-area hue is more likely to survive as its own color.

Extraction range

Restricts the pixels that reach the clustering to one color family. Skin tones is tuned for illustration skin: the window runs from pale pink-orange highlights to deep brown shadows, and excludes vivid oranges that are far too saturated to be skin. Red through pink are hue bands in OKLCh with a minimum saturation, so near-neutral whites and grays never land in a family.

Reference color and tolerance

Used by "Custom color range." Only pixels within the given OKLab color difference of the reference color are extracted. For scale: 0.02 is where two colors only look different side by side, 0.10 is where they read as separate colors, and 0.42 spans the palest to the deepest skin tone.

Merge strength

Colors within this OKLab distance of each other are combined into one. The resulting threshold is shown as a number on screen.

Exclude background color

Removes the color estimated from the image edges, and colors close to it. If the edges are not uniform, no background is estimated and this has no effect.

Group low-saturation colors into neutrals

Pulls the saturation out of any color below the threshold, moving it toward neutral gray. Lightness differences are preserved, so white and black are never collapsed together.

Nearest color difference

The OKLab distance from a swatch to the closest other color in the palette. Below 0.02 the swatch is flagged as "too close" to another one.

Contrast ratio (white / black)

How a color reads against white versus black. 4.5:1 or higher is safe for body text; 3:1 or higher works for large text and graphical elements.

Reading the results and bringing them into Clip Studio Paint

• The area bar on each card shows how much of the image that color covers. Large shares are your main tones; small shares are accents.
• When an extraction range is active, a note above the palette says which range the colors came from. If fewer than 64 pixels matched, that is called out too — a handful of pixels cannot describe a color scheme.
• If many swatches are flagged as too close, lower the color count or raise the merge strength. Intentional near-duplicates can be left as they are.
• CLIP STUDIO PAINT color sets cannot import a CSV. Type each HEX value into a color set by hand, or load the exported swatch PNG onto a canvas and pick colors with the eyedropper.
• The CSV export includes HEX and RGB values, pixel count, area share, nearest color difference, and both contrast ratios.

How the calculation works

Extraction runs K-means clustering in OKLab space, ten iterations, on pixels scaled down to a 160px long edge. OKLab is used rather than raw RGB so that two nearly identical whites or beiges do not end up as separate colors. Starting centroids are chosen deterministically, by repeatedly picking the color with the largest "area times squared distance from the nearest seed," so the same image always produces the same palette. The extraction range is applied before clustering, not after: each pixel is converted to OKLCh and tested against a hue, saturation, and lightness window. Filtering first is what makes it useful: filtering afterward would still let the rest of the image decide where the cluster centers land, collapsing skin into one or two colors. Merging similar colors uses complete-linkage clustering, judged by the maximum distance between two groups; the minimum distance would let a chain of barely-different colors collapse the palette. Accent-focused (median cut) skips the centroid search, splitting the widest-ranging box at its median and averaging each box by pixel count. Contrast ratios come from WCAG relative luminance.

Accuracy and limitations

Extraction is purely a pixel statistic: it favors colors that cover a large area over colors that are important to the composition, so a small accent may not appear unless you raise the color count. Because the image is downscaled to a 160px long edge first, a single pixel or a thin line will not survive.

• Colors are treated as sRGB. Embedded ICC profiles and CMYK appearance are ignored — check print color shifts with the print preflight tool instead.
• The extraction range judges color values alone, so it cannot separate skin from wood, leather, or brown hair in the same part of color space.
• There is no export to CSP color set files or Adobe swatch formats.
• Background estimation looks at the most common color along the image edges. Narrowing the extraction range thins out those edge pixels too, so the background may stop being detected.

How your image and data are handled

Loading the image, extracting the palette, and calculating every metric all happen entirely in your browser. Nothing — not the image and not the resulting palette — is ever uploaded or sent anywhere. Your extraction settings, extraction range, and sort order are saved to the browser's localStorage so they persist between visits, but the loaded image is never saved and disappears when you close the page.

Frequently asked questions