Tints and Shades: Building Color Scales for Design Systems
Generate systematic color palettes — from 50 to 900 — that power consistent, accessible design systems.
Every mature design system — Tailwind, Material Design, Chakra UI — uses a systematic color scale rather than a handful of hand-picked colors. These scales let designers and developers pick the right lightness level for any context: text, backgrounds, borders, hover states.
A tint adds white to a base color, making it lighter. A shade adds black, making it darker. The mathematical approach uses the HSL color model to adjust lightness while preserving the hue and saturation of the original color, producing perceptually consistent steps.
What are tints and shades
In color theory, a tint is a color mixed with white, producing a lighter version. A shade is a color mixed with black, producing a darker version. A tone adds gray. In digital design, these terms are used more loosely — tint and shade generators typically produce a range of lightness values from near-white to near-black, all sharing the same hue. The result is a swatch row that maintains color identity while providing enough contrast range for practical use.
Free Tool Tint & Shade Generator Generate a full 50–900 color scale from any base colorHSL color model for manipulation
HSL (Hue, Saturation, Lightness) is the preferred model for generating tints and shades because lightness is an independent axis. To create a tint, increase L while keeping H and S constant. To create a shade, decrease L. The challenge is that simple linear lightness steps do not produce perceptually even results — the human eye is more sensitive to changes in the middle lightness range than at the extremes. Professional tools apply perceptual corrections or use the OKLCH color space for more even-looking steps.
Building a 9-step scale (100–900)
The standard design system scale runs from 50 (near white) through 100, 200, 300, 400, 500 (base color), 600, 700, 800, 900 (near black). The base color anchors at 500. Steps 100–400 are tints with increasing lightness. Steps 600–900 are shades with decreasing lightness. Step 50 is often an extra-light utility color. This 10-step system (50 plus 100–900) matches Tailwind CSS conventions and is the de facto industry standard for color scales.
Free Tool Color Palette Generator Generate harmonious palettes from any base colorAccessibility considerations
When building a color scale for a design system, you must verify WCAG contrast ratios at every level you plan to use for text. Scale step 700 on a white background typically achieves 4.5:1 (AA compliance). Step 900 achieves 7:1+ (AAA). Never use step 300 or lighter for body text on white. Map your scale steps to semantic roles: text, text-muted, background, surface, border, focus-ring — and document the minimum step for each role to prevent inaccessible combinations.
Tailwind and Material Design palettes
Tailwind CSS uses a 50–900 scale for all its built-in colors. Each Tailwind color like blue-500 is the "base" midpoint. Material Design 3 uses a different approach: it generates a complete color scheme from a single "seed color" using the HCT color space (Hue, Chroma, Tone), producing roles like primary, secondary, tertiary, and their container variants. Both systems share the principle that color should be systematic, not arbitrary.
CSS custom properties
Export your color scale as CSS custom properties for easy use across a project. Define them at :root level. Name them semantically: --color-blue-500, --color-blue-600. Reference them in component styles. Using HSL custom properties with separate H, S, L variables enables dynamic manipulation in CSS — useful for theme switching or generating hover states without JavaScript.
Free Tool Color Contrast Checker Check WCAG contrast ratios between any two colors