Custom Color Scales That Don't Look Generated — ColorMeUp LAB<br>Color Scales That Don't Look Generated<br>A perceptually even color scale changes by the same amount at every step. In OKLCH, that evenness buys predictable contrast across every tint and shade — a palette you can trust — but it isn't the whole story. Hold chroma flat as the colors get lighter and the pale tints turn chalky; keep lightness perfectly linear and the scale reads mechanical. The math is right; it just stops a step short of intentional.<br>Music production knows this trade-off. Quantize a drum pattern to a perfect grid and the timing is flawless and a little robotic; add some swing, nudging notes a little off the grid, and the feel returns without losing the structure.
The Grid Is Not the Song<br>A perceptually even scale is the grid: reliable, predictable, the thing worth keeping. Shaping it with chroma, hue, and lightness curves is the swing. The difference is easiest to just see:<br>50<br>100<br>200<br>300<br>400<br>500<br>600<br>700<br>800<br>900<br>950
FlatSwing
Size the Grid, Then Shape It<br>There are four levers: lightness range, lightness curve, chroma, and hue. The first sizes the grid; the other three are the swing on top of it. None require eyeballing OKLCH values in your head; that's what the charts are for. But it helps to know what each one is for .<br>Lightness Range<br>Before shaping anything, you decide how far the scale runs: how light the lightest tint, how dark the darkest shade. This is still perfectly even; you're not bending the grid, you're sizing it. And it's the lever that moves a scale most: the same color reads airy and delicate across a light range, dense and grounded across a dark one. It's the first move, and sometimes the only one you need.<br>90%<br>87.7%<br>84.4%<br>80.6%<br>76.3%<br>71.7%<br>66.8%<br>61.7%<br>56.3%<br>50.8%<br>45%
90% -> 45%97% -> 26%100% -> 0%
Lightness Curve<br>Even with the endpoints fixed, how lightness travels between them changes everything. Spend your contrast on the dark end, and the scale feels grounded and dramatic. Spread it evenly, and it feels calm. Pack it into the mid-tones, and it feels energetic: punchy UI colors, soft extremes. Same two anchors, three personalities.<br>050100
▬ lightness<br>┄ even
Chroma Curve<br>When chroma stays flat as lightness climbs, the pale tints carry more color than they should and turn chalky. A chroma curve deliberately fixes it: ease chroma down toward the highlights so tints stay clean, and let it peak in the upper-mid range, where a color has room to be vivid. It's the same correction the old HSL habit of dropping saturation made by feel, now something you can place on purpose.<br>The chart traces three things: the chroma curve you ask for, the gamut ceiling the display can render, and the output where the two meet.<br>0.000.100.20
┄ gamut ceiling<br>▬ chroma curve<br>▬ output
Hue Shift<br>Colors rarely sit on a single hue across a full range, and pinning them there is part of what makes a scale feel synthetic. A small, controlled shift adds depth: cool the highlights a few degrees, warm the shadows, and the scale gains a sense of light moving through it. Keep it subtle — enough to feel, not enough to turn your blue into teal at one end.<br>278°261°245°
▬ hue<br>┄ base
Why Great Color Systems Don't Look Identical<br>If perceptually even scales produced one correct answer, every good design system would converge on the same palette. They don't. Tailwind, Material, Bootstrap, Open Color: all solving the same problem, all landing on visibly different results.<br>The reason is simple: consistency is half the job. A design system is also trying to create a feeling. Some palettes read as energetic, others as calm; some keep vibrant midtones, others reserve intensity for the darks. Those are taste, made concrete. A perceptual color space doesn't remove those decisions. It gives taste something steady to act on.<br>The same base color, shaped by presets inspired by popular design systems:<br>50<br>100<br>200<br>300<br>400<br>500<br>600<br>700<br>800<br>900<br>950
TailwindMaterialBootstrapOpen Color
Bring Back the Fun<br>You saw the ceiling in the chroma chart, which marks the limit of what the display can render. The math holds you inside what's renderable, so nothing you do produces a broken or muddy palette. The constraint lets you push every lever without fear. Not a cage.<br>So the goal was never to generate a scale, but to make one. That's where taste lives, and honestly, where the fun does too.<br>The real playground is the generator.
Open the Generator