Shade & Tint Generator

Tints, shades and tones — what's the difference

All three start from one base hue and change how light, dark or muted it looks. A tint is the base mixed with white, so it gets lighter and softer — think of a sky blue lightening toward a pale, airy blue. A shade is the base mixed with black, so it gets darker and heavier, like that same blue deepening toward navy. A tone is the base mixed with grey, which lowers the saturation and makes the color calmer without simply lightening or darkening it. Tints and shades are the workhorses of UI design because they keep the hue recognisable while giving you a whole family of related values; tones are used more sparingly when you want to dial back intensity. This generator builds tints and shades from any starting color, and can stitch them into a single light-to-dark ramp.

Why a UI needs a 50–950 color scale

A single brand color is rarely enough to build an interface. A button needs one value, its hover state a slightly darker one, a disabled state a lighter one, a subtle background an even lighter one, and the text on top of it a much darker one for contrast. Rather than hand-pick each of these, modern design systems define a numbered scale — usually 50, 100, 200 … through 900 and 950 — where 50 is the lightest tint and 950 is the darkest shade. The middle of the scale (around 500) is typically the "true" brand color.

Once a color is expressed as a scale, the steps map naturally onto UI roles. The 50–100 steps work as page or card backgrounds; 200–300 make good borders and dividers; 500–600 are your primary fills and the default state of a button; 700 is a reliable hover or active state; and 800–950 give you text and headings that stay readable on the lighter steps. Because every step shares the same hue, the whole interface feels cohesive, and swapping the base color re-themes everything at once.

Linear vs perceptual (OKLCH) ramps

There is more than one way to walk a color from light to dark, and the method changes how even the result looks. The simplest approach is a linear mix: blend the base toward white for tints and toward black for shades, in equal numeric steps. It is fast and predictable, but our eyes are not linear — the human visual system is far more sensitive to changes in dark tones than light ones, so a mathematically even RGB blend can look bunched-up at one end and stretched at the other.

A perceptual ramp fixes this by spacing the steps evenly in a perceptually-uniform space such as OKLCH, where equal numeric differences in lightness look like equal visual differences. Ramps built this way feel smoother and more balanced, with no single step jumping out as too dark or too washed-out. That is why design systems increasingly define their scales in OKLCH. This tool keeps the hue and saturation steady while stepping lightness, which gives you a clean, even scale that is easy to reason about and to fine-tune by hand.

Exporting your scale to Tailwind and CSS variables

A scale is only useful if it is easy to drop into your codebase. Export it as CSS custom properties — a block of --brand-50 through --brand-950 declarations on :root — and you can reference any step anywhere in your styles, switch themes by overriding the variables, and keep a single source of truth. Or export a Tailwind color object, a plain { 50: '#…', 100: '#…' } map you paste under colors in your theme so utilities like bg-brand-500 and text-brand-900 just work. Name the scale once and both exports stay in sync with whatever base color and ramp style you have chosen, so re-theming is a copy-and-paste away.

Learn more

For a reference set of professionally-tuned scales, see the Tailwind CSS color palette, and for the perceptual color space behind even ramps, read the MDN oklch() reference.