Gradient Map Maker for Clip Studio Paint

What this tool does

Loading an image updates the extracted color list and comparison preview while keeping your current stops. Choose Re-extract or Rebuild stops from extracted colors to replace the ramp with extracted colors. Edit positions by dragging or using arrow keys and edit colors through HEX fields. JSON saves and restores the finished stops; CSS and ramp PNG exports are also available.

• CSP manual: Gradient map settings (Japanese) — Nodes, mixing modes and brightness correction. Checked 2026-09-06
• Adobe: Color settings and rendering intents — Official reference; checked 2026-09-06

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

1. Load an image and inspect its extracted colors. Choose Re-extract or Rebuild stops from extracted colors to make the ramp from those colors. This replaces current stops, so save edits as JSON first if you want to keep them.
2. 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.
3. 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.
4. Fine-tune each stop's HEX value and its position (as a percentage) in the row list.
5. Switch the preview to split mode and drag the slider to compare the original and the mapped result side by side.
6. 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.

What to look for in each comparison mode

• Original is the image before conversion, mapped is the result of applying the ramp, and split puts both in one frame. Dragging the boundary slider in split mode is the only view that shows you how far a specific area moved, rather than how the result looks on its own.
• Three things are worth checking: whether the shadows have crushed to black, whether the highlights have blown out, and whether the midtones have gone muddy. Crushing and blowing out are both fixed by pulling the end stops away from pure black and pure white.
• Muddy midtones come from bridging two distant hues across a single interval. Add an intermediate stop at the position matching the brightness where the muddiness appears — 0% is the shadow end and 100% the highlight end.
• 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 fine tonal detail is approximate — the version you apply inside CSP is what determines the final artwork.

Copying the ramp into a Gradient map correction layer

In Clip Studio Paint, choose Layer menu > New Correction Layer > Gradient map, and the gradient map layer is created above the layer you currently have selected (a PRO/EX feature). Unlike applying a tonal correction directly from the Edit menu, a correction layer stays editable: double-tap its icon in the Layer palette and the same dialog opens again with your values intact, so the numbers only have to be entered once.

1. The points along the Color bar in the Gradient map dialog are the nodes — they mark each color of the gradient and the transition points between them. Tap a node to select it, and the Position, Color, and Mixing rate curve settings on the right apply to that node.
2. Enter the stop position (%) from this tool into the Position field. Nodes can also be dragged horizontally along the color bar, but typing the number is what reproduces the ramp exactly.
3. With the same node still selected, set its Color to a specified color, tap the specified color bar to open the Color settings dialog, and type the HEX value from this tool. A node can also take the main or sub drawing color instead, and on Windows and macOS the dialog can sample a color from anywhere on screen.
4. You need one node per stop. Tap the empty area under the color bar to add a node — it starts from the current drawing color — then set its position and color the same way.
5. After entering the stop positions and colors, compare a grayscale ramp in both applications. CSP’s mixing curve, interpolation and color-profile settings can change the result; matching the stops alone does not guarantee pixel-identical output.
6. CSP offers Normal, Perceptual and Photoshop-compatible mixing modes. Start the comparison with Normal and inspect the result. Brightness correction can only be set in Perceptual mode. Matching the mode still does not guarantee pixel-identical output with this tool.

Saving the gradient to a gradient set and tuning the effect

• Press Add Gradient in the dialog and the gradient currently shown in the color bar is added to the selected gradient set, at the bottom of the gradient list. From then on, double-tapping it in the Gradient List loads it back into the color bar — this is how a ramp becomes reusable across a whole series instead of being retyped per file.
• The list is managed with Up/Down to reorder, Replace Gradient to overwrite the selected entry with what is in the color bar, Duplicate Gradient to copy it, and Delete Gradient to remove it. The settings menu on the same dialog adds gradient sets and registers them as materials.
• If the effect is too strong, adjust the correction layer rather than the ramp. Lowering the layer's opacity in the Layer palette lets the original color show through, and changing its blending mode keeps the original shading while laying color over it.
• To limit the effect to part of the image, use the layer mask that is created automatically with the correction layer. Drawing on or erasing from the mask adjusts the balance between the correction and the original image underneath.
• 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 CSP's own gradient set file format, so it cannot be imported as a file.

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

Images are processed in your browser. Edited gradient stops are saved locally and included in settings links. JSON import restores the finished stops, not the source image or every extraction setting. Loading a new image keeps your current stops and updates the extracted colors and comparison preview; use Re-extract or Rebuild stops only when you want to replace your edits.