About Tone Ladder
Tone Ladder exists because most digital colour systems are built around a very narrow idea of what colour variation looks like. We lighten, we darken, we maybe tweak saturation — and we accept the results even when they feel flat or slightly wrong.
This tool explores an alternative approach: generating colour ramps as if they were being seen under coloured light, rather than simply scaled toward white and black.
Scaling colour vs lighting colour
Most colour tools build tonal ramps by scaling a colour towards white and black. The maths are tidy and the results are predictable — and, if you look closely, a little dead. Every step is the same hue at a different brightness.
Real light doesn’t behave like that. A warm light shifts highlights towards amber and pushes shadows towards blue-violet. A cool light does the reverse. Painters have worked with this for centuries: you don’t just add white for a highlight, you change the hue. Temperature and value move together, and that interplay is a big part of what makes colour feel lit rather than merely adjusted.
Tone Ladder tries to encode that behaviour. Give it a base colour and a light temperature, and it generates a ramp where steps respond to that light — not just lighter/darker, but gently shifting in hue the way a surface would under coloured illumination.
Temperature as a design control
The idea behind Tone Ladder is to borrow some theory from the art world and see whether it can lead to more expressive, engaging colour. We introduce lighting temperature to the ramp generation process, but rather than allow light to be any colour, we've mapped it on a scale of warm to cool.
- Warm temperature: warmer highlights, cooler shadows.
- Cool temperature: cooler highlights, warmer shadows.
- Neutral temperature: a clean tonal ramp with no hue shift.
Temperature sets the direction, and the strength (how far you move the slider in either direction) sets how much of that temperature shows up in the ramp. Push it gently and the shifts are subtle. Push it harder and the colour starts to travel.
In Conservative mode you’ll usually get subtler, more UI-friendly variants. In Painterly mode the shifts are more obvious — and if it gets weird, you can always pull the strength back.Your base colour always sits at the midpoint, unchanged. Everything else is the tool’s interpretation of how light behaves around it.
Perceptual spacing
There’s a subtler issue with conventional ramps: even if the lightness steps are mathematically even, they don’t always look even. The eye doesn’t experience lightness, chroma, and hue separately — a step that shifts hue and saturation can feel larger than one that only changes brightness.
Tone Ladder measures perceptual distance between steps (using OKLab) and redistributes them so the ramp reads as evenly stepped to the human eye.
Seeing weird hues?
Some tone ladders will feel surprising or uncomfortable — a blue under warm light can develop violet shadows; a yellow under cool light can go olive in the darks. That’s often the colour theory showing its hand, and sitting with it is part of building intuition.
Not every output will be usable, and that’s fine. Sometimes the most valuable thing a ramp can do is show you a relationship you wouldn’t have reached by hand — even if you end up dialling the temperature back towards neutral.
And if something feels wrong in a way that seems genuinely broken rather than merely unfamiliar, that’s worth investigating.