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.

• W3C: Understanding contrast minimum — Official reference; checked 2026-09-06

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

Custom color range keeps pixels within the selected OKLab distance of the reference color. The distance is a selection radius, not a universal perceptual threshold or a definition of human skin colors.

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.

Judging dominance and legibility from the numbers

• The area bar on each card shows how much of the image that color covers. The large shares are your dominant tones and the ones sitting at a few percent are your accents. If a color you intended as an accent takes up nearly as much area as a dominant tone, it is no longer reading as an accent in the picture.
• A distance below 0.02 is a cue to inspect similar colors, not proof that nobody can distinguish them. Compare their roles in the actual artwork and adjust lightness or chroma when needed. Intentional close shades can remain.
• Select the actual background color for the contrast summary. The white and black ratios are separate references. WCAG requires 4.5:1 for ordinary text and 3:1 for large text, against the background actually used; these are not universal art-quality criteria.
• 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.
• The CSV export includes HEX and RGB values, pixel count, area share, nearest color difference, and both contrast ratios.

Registering the colors in a Color Set palette

In Clip Studio Paint, the Color Set palette is shown from the Window menu by checking Color Set. The important detail is that [Add color] adds the *current* drawing color as a tile — it has no field to type a value into — so every color has to become the drawing color first before it can be added. That is the step most guides skip, and it is why the sequence below goes through the Color Settings dialog.

1. Open the Color Set palette menu, choose [Edit color sets], and create an empty color set for this piece of work. The dialog also lets you duplicate an existing set, add a copy of the standard set, rename a set, or delete one, so your project palette can live alongside the defaults instead of overwriting them.
2. Show the Color Wheel palette from the Window menu, then double-tap the main color icon to open the Color Settings dialog. (Double-tapping a color icon on the tool bar opens the same dialog.)
3. Type the HEX value from this tool into the dialog's HEX field — it takes a hexadecimal color code and sets the color from it. Entering the R/G/B numbers in the RGB fields gives the same result, and PRO/EX also offers L*a*b* and CMYK fields.
4. Back in the Color Set palette, press [Add color]. The color you just made the drawing color is appended as a tile. Repeat one color at a time, in the order you want them laid out.
5. To fix a tile, set the correct drawing color and use [Replace color] on the selected tile; [Delete color] removes a tile entirely.
6. Export the finished set as a color set file (.cls) or an Adobe Photoshop swatch (.aco). Both formats can be imported again, so the palette travels to another device or to the next piece of work.

Picking the colors off the swatch PNG with the Eyedropper

• Load the exported swatch PNG onto a canvas and use the Eyedropper tool: tapping the canvas picks up the drawing color from where you tapped. With a drawing tool such as a pen or brush selected, Alt + click does the same thing without switching tools.
• Send each picked color straight to [Add color] and you never retype a HEX value. Turning on the Color Set palette menu option that automatically registers colors picked with the Eyedropper makes even that step unnecessary — every color you sample lands in the set.
• If the Eyedropper is not picking up what you expect on a stack of layers, check which layers it refers to in the Advanced Tool Settings palette.
• The HEX values in the exported CSS or JSON go to the same place: the HEX field of the Color Settings dialog. There is no CSP color set export here, so a CSV cannot be imported into a color set directly.

Clip Studio Paint Ver. 5.1 widened its Lab support: the Color Slider palette gained Lab sliders, the Color Settings dialog can work from Lab, and the Color Wheel and Color Set palettes can show Lab values along the bottom. Be careful with those numbers — this tool works in OKLab, which is a different color space from L*a*b* (CIELAB). The same color has different numbers in each, so do not type this tool's color differences or lightness values into CSP's L*a*b* fields. Pass colors as HEX and both color spaces land on the same color.

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 interpreted as sRGB. Use the destination ICC profile in CSP for a soft proof and a physical proof when color matching matters. This site’s preflight channel approximation does not predict printed color.
• 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

Images and analysis stay in your browser. Edited colors and extraction settings are saved locally and included in settings share links. Palette JSON restores the finished colors in this tool; it does not include the source image or reproduce every extraction setting. Choose the source image again if needed.