I stopped generating color scales and started shaping them

Gil Barbara — Tue, 23 Jun 2026 13:53:17 +0000

Generating a color scale is a solved problem. Hand most tools a color and you get back eleven valid, perceptually even steps. The trouble is they tend to come out a little lifeless: chalky tints, every step interchangeable, technically correct and slightly generic.

The scale you actually want has intent: clean highlights, shadows with depth, contrast spent where your UI needs it. The gap between the two isn't more math — it's a few controls, and a way to see what they're doing.

I maintain a small color library, colorizr, and its scale() does the generating part: one color in, a full scale out:

import { scale } from 'colorizr';

scale('#ff38af');
// { 50: '#ffeff7', 100: '#ffe2f1', …, 500: '#ff3fb4', …, 950: '#31001c' }

Even, valid, fine. The interesting part is everything after the default — the controls that let you shape it.

The catch: you'd be shaping blind

Here's why this takes more than an API. Most of these controls are gamut-relative: they work against the maximum chroma a color can physically exhibit, and that ceiling shifts with hue and lightness at every step. There's no fixed range to picture the way there is in HSL — set chromaCurve: { low: 0.6, high: 0.4 } and you'd have no real idea what you just did.

So the app isn't a product wrapped around the library, it's a visualizer for it. The scale on screen, every control on a slider, and a chart for the parts you can't see.

Chroma curve — shaped against the ceiling

scale('#ff38af', { chromaCurve: { low: 0.6, high: 0.4 } });

The dotted line is the gamut ceiling; the solid line is what the scale uses. You shape chroma as a fraction of the ceiling, so the tints stay clean and nothing clips — per step, per hue. Hold chroma flat instead, and those pale steps go chalky. That's the whole difference between a washed-out light end and a clean one, and it's not a number you'd ever land on by eye.

Hue shift — depth across the range

scale('#ff38af', { hueShift: 25 });

Pinning one hue across the whole scale is part of what reads synthetic. Rotate it a few degrees toward the ends — warm the shadows, cool the tints — and the scale gains the sense of light moving through it that hand-mixed palettes have. The middle stays locked to your base; the visualizer shows you how far is too far before your pink drifts into orange.

There's more in the same spirit: a lightness curve to decide where the contrast lives, a min/max lightness range to set the endpoints, and they all work the same way: a slider and a chart, so the choice is something you see, not something you guess.

The payoff

That's the whole loop: shape the scale against the charts until it has the character you want, then take it to code. The visualizer hands you the result, export-ready — CSS variables, Tailwind, SCSS — and if you'd rather skip the UI, the same controls are available in colorizr for your build.

Same base color across all images above. The numbers won't tell you which scale you want; shaping it where you can see it will.

colorizr - the engine. npm i colorizr, generate and shape scales in code, export-ready.
the visualizer - shape against the gamut ceiling, watch the curves, copy the result out.

DEV Community: Gil Barbara

I stopped generating color scales and started shaping them

The catch: you'd be shaping blind

Chroma curve — shaped against the ceiling

Hue shift — depth across the range

The payoff