You are handed a single hex code and told it is the brand. Then you need a hover state, a disabled state, a light background for a callout and a dark one for a footer. This builds the whole scale, holding the hue and easing saturation at the ends so the pale steps do not go chalky.
Free · No account · Your files never upload
:root {
--brand-50: #fcf2ee;
--brand-100: #f8dfd3;
--brand-200: #f3bfa5;
--brand-300: #f09e75;
--brand-400: #ef7c43;
--brand-500: #ee5b11;
--brand-600: #c54d11;
--brand-700: #9d3f10;
--brand-800: #77310e;
--brand-900: #51220b;
--brand-950: #2c1307;
}Hue is held across the whole scale and saturation is eased down at the ends. That second part is the difference between this and lightening a colour by hand: flat saturation makes the palest steps look chalky and the darkest ones look muddy. The two contrast figures on each row tell you at a glance which steps can carry text.
Turns one colour into a full scale of eleven steps, numbered the way every design system numbers them, with the contrast of each step against white and against black.
Hue is held across the scale and saturation is eased down towards both ends. That second step is the difference between this and lightening a colour by hand: at flat saturation the palest steps look chalky and the darkest look muddy, which is why an improvised light version of a brand colour never quite matches one from a designer.
A scale is only useful if you know which steps can carry text. Reading both numbers off each row tells you immediately which end of the scale takes white type and which takes black, without going and testing them one at a time.
It produces a scale from one colour. It does not build a full palette, which needs a second and third hue and a set of decisions about what each is for. And a generated scale is a starting point that a designer will adjust, not a replacement for one.