This gradient map tool pulls dominant colors out of an image, arranges them into a gradient ramp, and applies that ramp back onto the source image so you can compare the result live. The finished ramp can be copied straight into a Clip Studio Paint gradient map correction layer.

What this tool does

Loading an image extracts its dominant colors and places them as stops on a gradient ramp, ordered from darkest to lightest. Stops can be dragged or nudged with the arrow keys, and each color can be edited through a HEX field or a color picker. The preview updates every time the ramp changes, and you can switch between the original image, the mapped result, and a left/right split view to see exactly how much each color moved. The result exports as JSON, CSS, or a ramp PNG.

Where it fits in your workflow

Building a base layer of color to lay over a piece painted entirely in grayscale.
Trying out a shifted color mood for an existing illustration without repainting it.
Deciding on shadow, midtone, and highlight colors as concrete values that a whole series can reuse consistently.

How to use it

Load an image. If you change the color count afterward, click "Re-extract" to rebuild the stops.
Drag a ramp handle to adjust where the dark side meets the light side. Arrow keys move a handle 1% at a time, or 10% with Shift held.
Click an empty spot on the ramp to add a stop using whatever color is showing at that position. The "Add stop" button in the header does the same thing at the widest available gap.
Fine-tune each stop's HEX value and its position (as a percentage) in the row list.
Switch the preview to split mode and drag the slider to compare the original and the mapped result side by side.
Export as JSON, CSS, or a ramp PNG, or copy the HEX values and positions shown on screen into a CSP gradient map.

What each setting means

Number of colors: How many representative colors to pull from the image (2 to 12). They are ordered by lightness and become the initial set of stops.
Extraction method: Balanced (K-means, the default) builds representative colors around the largest areas of the image, which tends to produce a smoothly graded ramp. Accent-focused (median cut) splits color space by the range it occupies, so a small but distinctive accent color is more likely to survive as its own stop.
Stop: A color anchor point on the ramp. Position 0% corresponds to the darkest end and 100% to the lightest. Colors between two stops are interpolated linearly.
Position: A stop's location as a percentage from the left. The source image's luminance is remapped onto this position, so dragging a dark stop further right widens the range mapped to shadow.
Comparison mode: Original, mapped, or split. In split mode, dragging the boundary slider lets you compare the same location before and after the gradient map is applied.

Reading the results and bringing them into Clip Studio Paint

In CLIP STUDIO PAINT, add a gradient map correction layer and set each node's position and color to match the position (%) and HEX shown here. Keep the number and order of stops the same and you get the same transformation.
The ramp PNG can be loaded onto a canvas and sampled with the eyedropper. The JSON export includes each stop's position, color, and a CSS gradient string, but it is not in CSP's own gradient set file format.
Transparency from the source image is preserved as-is, so applying this to a cut-out asset will not bring back a background that was already removed.
The preview runs on an image scaled down to a 760px long edge, so it is not a full-resolution export — the version you apply inside CSP is what determines the final artwork.

How the calculation works

The mapped color for each pixel comes from converting that pixel's luminance into a position on the ramp. Luminance is calculated as 0.2126 × R + 0.7152 × G + 0.0722 × B, quantized into 256 levels, which are looked up against a 256-entry table built ahead of time from the current stops. Colors between adjacent stops are interpolated linearly in RGB, and the alpha channel is carried over unchanged from the source image. Stops are always kept sorted by position and clamped to the 0–100% range. Dominant-color extraction itself runs on pixels scaled down to a 160px long edge: balanced (K-means) searches for centroids in RGB space, while accent-focused (median cut) repeatedly splits OKLab space at the median of whichever box covers the widest range. Either way, the resulting colors are sorted by lightness to become the initial stops.

Accuracy and limitations

Color interpolation is a straight line through sRGB values, not a perceptually even blend like one done in OKLab. Bridging two very different hues can wash out through a duller, less saturated color in the middle. If that bothers you, add an intermediate stop between them to keep the transition under control.

There is no export to a CLIP STUDIO PAINT gradient set file (.grd or similar) — positions and HEX values need to be copied over by hand.
There is no guarantee that CSP's internal lightness calculation for its gradient map exactly matches the luminance formula used here. If the look differs, adjust the stop positions to compensate.
Because the preview runs on a downscaled image, fine tonal detail can differ slightly from the full-resolution result. Blend modes and layer opacity are not simulated either.

How your image and data are handled

Loading the image, extracting dominant colors, and applying the gradient map all happen entirely in your browser. Nothing — not the image and not the ramp you build — is ever uploaded or sent anywhere. The color count and comparison mode you choose are saved to the browser's localStorage, but the loaded image itself is never saved; it disappears the moment you close the page.

Frequently asked questions

Can I load the gradient I built directly into CSP?

There is no file-based import. Instead, enter the positions (%) and HEX values shown here into a CSP gradient map correction layer in the same order. Match the stop count and you get the same transformation.

How many stops can I add?

There is no upper limit, but the minimum is 2. New stops are not added right next to an existing one, since overlapping handles become impossible to grab individually.

I changed the extraction and it wiped out the stops I edited by hand — what happened?

"Re-extract" and "Rebuild stops from extracted colors" both replace the current stops with a fresh extraction result. If you want to keep hand-tuned work, export it as JSON or CSS first.

Can I apply this to a full-color image instead of a grayscale one?

Yes. The conversion only looks at luminance, so the original hues do not carry over into the result regardless of the source image's colors. If you want to keep some of the original color, blend the mapped layer back in CSP using a blend mode or reduced opacity.

Which extraction method should I choose, K-means or median cut?

Choose balanced (K-means) when you want a smoothly graded ramp across the whole tonal range. Choose accent-focused (median cut) when you want a striking accent color to survive onto the ramp. After switching methods, click "Re-extract" to rebuild the stops using the newly selected method.