Shade & Tint Generator
Generate a 10-step tint and shade scale from a base color
Generate a 10-step tint and shade scale from a base color
:root {
--brand-50: oklch(97.0% 0.123 182.5);
--brand-100: oklch(93.0% 0.123 182.5);
--brand-200: oklch(86.0% 0.123 182.5);
--brand-300: oklch(77.0% 0.123 182.5);
--brand-400: oklch(68.0% 0.123 182.5);
--brand-500: oklch(60.0% 0.123 182.5);
--brand-600: oklch(52.0% 0.123 182.5);
--brand-700: oklch(44.0% 0.123 182.5);
--brand-800: oklch(35.0% 0.123 182.5);
--brand-900: oklch(26.0% 0.123 182.5);
--brand-950: oklch(20.0% 0.123 182.5);
}A color scale steps through lightness from almost-white (50) to almost-black (950) while keeping hue and chroma anchored to a base. Tailwind popularized the 50–950 numbering, and it's now a near-universal convention in design systems because it maps cleanly onto the roles colors play in a UI.
The classic way to build a scale is to walk HSL lightness, but HSL lightness is not perceptually uniform — a yellow at L=50% looks dramatically brighter than a blue at L=50%. OKLCH fixes this: its L channel is perceptually linear, so a 500 step looks like the same "mid" weight no matter the hue. We walk OKLCH L while keeping the base's chroma and hue, then convert back to sRGB only for the swatches and the HEX/HSL output formats.