What does the blend space setting change?

It controls the maths used to interpolate between your anchor colours. OKLab is a perceptual colour space, so each step looks evenly spaced to the eye and midpoints stay vivid instead of going grey. HSL interpolates hue, saturation and lightness, which sweeps around the colour wheel and is good for rainbow-style ramps. sRGB averages the red, green and blue channels directly — fast, but it often produces a muddy middle.

Why use OKLab instead of plain RGB mixing?

Plain RGB mixing of two saturated colours frequently passes through a dull grey midpoint because perceived lightness is not linear in RGB. OKLab was designed so that equal numeric steps correspond to roughly equal perceived changes, which keeps a scale smooth and the middle swatches saturated. It is the same model behind the CSS oklab() and oklch() functions.

How many anchor colours can I use?

Between two and six. With two anchors you get a straight blend; with more, the scale passes smoothly through each one in order, splitting the total steps evenly across the segments. Use Reverse to flip the direction without re-entering colours.

What are the token names like color-50 to color-900?

The exporter maps each step onto a familiar 50-900 design-token scale (the convention used by Tailwind and many design systems), rounded to the nearest 50. Change the prefix field to rename them, for example brand-50 or accent-500, so the output drops straight into your stylesheet or token file.

Can I download the palette as an image?

Yes. The Download SVG swatches button saves a vector sheet with one rectangle per step, each labelled with its hex value. SVG stays crisp at any size and opens in any browser or design tool, and it is generated entirely on your device.

Is anything uploaded or stored online?

No. Every colour calculation, the OKLab conversions and all exports run locally in your browser using plain JavaScript and the canvas-free maths in this page. Your settings are saved only to this browser's local storage so the tool remembers your last scale, and nothing is sent to any server.

Color Scale Builder — Gera Tools

The Color Scale Builder turns a handful of anchor colours into a complete, evenly stepped palette you can drop straight into code. Instead of hand-picking a dozen related shades, you choose two to six anchors, pick how the tool blends between them, and it produces a smooth ramp of swatches — each one labelled, copyable, and exportable as CSS custom properties, JSON design tokens or an SVG sheet. It is built for designers and front-end developers who need a consistent colour scale for buttons, charts, status indicators, heat maps or a full design system, without firing up heavyweight design software.

How it works

You start with anchor colours: the fixed points the scale must pass through. The tool then samples the path between them at evenly spaced positions to create the requested number of steps. The crucial choice is the blend space, because the same two colours can produce very different middles depending on how you interpolate. In OKLab — a modern perceptual colour space — equal numeric steps look equally spaced to the human eye, and midpoints stay vivid rather than sliding toward grey. HSL interpolates hue, saturation and lightness, so the ramp sweeps around the colour wheel and is ideal for vibrant, rainbow-like scales. sRGB averages the raw red, green and blue channels; it is the simplest but most likely to give a muddy centre. A distribution control (linear or eased) lets you bias the steps toward the light or dark end, which is handy when you want more nuance in the shadows than the highlights.

Everything is recomputed live as you drag the steps slider or edit an anchor, and each swatch is a button: click it to copy its hex. The export panel keeps three formats in sync — a :root block of CSS variables named on the familiar 50-900 token scale, a JSON object of the same tokens, and a plain hex array for scripts. Nothing leaves your device; your last scale is remembered in local storage.

Example

Suppose you want a brand ramp from a sky blue through purple to rose. Enter #0ea5e9, #9333ea and #f43f5e as the three anchors, set 9 steps and choose OKLab. The builder produces nine perceptually even swatches that glide through the purple without dulling, names them brand-50 to brand-900, and offers them as CSS variables ready to paste. Switch the blend space to HSL and the same anchors instead arc across more of the spectrum; switch to sRGB and you will see the midpoint lose some life — a quick, visual lesson in why colour space matters. Reverse the order with one click to get a dark-to-light variant, then hit Download SVG swatches to hand the palette to a teammate.