Tints, Shades, and Color Ramps — The Designer's Scale
Every color in a polished design system is really part of a color ramp — a carefully graduated scale that stretches from near-white to near-black while keeping the original hue intact. The three building blocks of any ramp are tints, shades, and tones. A tint is produced by blending a color with white, which raises its lightness while keeping the hue recognizable — perfect for subtle backgrounds and disabled states. A shade is the opposite: mixing with black deepens the color for borders, shadows, and pressed states. A tone sits in between, mixing with grey to reduce saturation without a dramatic lightness shift, useful for muted or neutral variants of a brand color.
Design systems like Tailwind CSS, Material Design, and
Radix UI all ship a numeric color scale (commonly 50–950) because it gives teams a shared
vocabulary. Instead of arguing over "make it a bit lighter," developers and designers point to a slot:
brand-100 for a light background, brand-500 for the interactive element,
brand-900 for high-contrast text. An 11-step scale covers every UI scenario — backgrounds,
borders, interactive states, focus rings, and readable text — without introducing redundant stops.
Once you generate your ramp here, hit Copy as CSS variables to get a
--brand-50 → --brand-950 block ready to paste into your :root {}.
For JavaScript-based theme configs, use Copy as JSON and paste directly into Tailwind's
extend.colors or a Style Dictionary token file.
This tool offers two generation algorithms. HSL (Lightness Steps) keeps hue and saturation locked and sweeps only the lightness channel — predictable and great for monochromatic palettes where mathematical uniformity matters. Mix mode blends your base color with pure white (for tints) and pure black (for shades), closer to how physical pigments behave and typically producing warmer, more perceptually balanced ramps. If you want to dig deeper into how individual color values translate across formats, the HEX → RGB / HSL Converter is a useful companion — and once your scale is ready, check legibility with the Palette Generator to confirm harmonious pairings.
5 practical use-cases for a color scale in UI design
- Hover & active states — step one or two slots darker than the base for interactive feedback without a harsh jump.
- Accessible text on colored backgrounds — pick a shade dark enough (700–950) to guarantee WCAG AA contrast on light tint backgrounds.
- Semantic backgrounds & surfaces — use the lightest tints (50–100) for page backgrounds, cards, and sidebar fills.
- Data visualization — a single-hue ramp lets you encode magnitude in charts and heat-maps while keeping brand colors consistent.
- Border & divider hierarchy — 200 for subtle separators, 300 for card outlines, 400 for focused input rings — all from one scale.
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint is a color mixed with white — it becomes lighter while the hue stays the same. A shade is a color mixed with black — it becomes darker. A tone adds grey, reducing saturation without swinging dramatically toward light or dark. In practice, tints give you soft, airy backgrounds and disabled-state fills, while shades deliver depth for borders, pressed buttons, and shadow-adjacent surfaces.
How many steps should a color scale have?
Nine to eleven steps is the sweet spot used by most modern design systems. Tailwind CSS ships 11 (50, 100–900, 950), Material Design uses 10, and Radix Primitives uses 12. An 11-step scale lets you assign dedicated slots to backgrounds (50–100), borders (200–300), interactive states (400–600), body text (700–800), and high-contrast headings or dark-mode surfaces (900–950) — with no wasted duplicates.
What is the difference between HSL mode and Mix mode?
HSL mode (Lightness Steps) holds hue and saturation constant and shifts only the lightness channel — the simplest, most predictable approach. Mix mode blends the base color with white or black at each step, simulating pigment mixing. Mix mode usually feels more natural and avoids the desaturated look that can appear at HSL extremes, especially for vivid or highly saturated base colors.
Can I use the output directly as CSS custom properties?
Yes — click Copy as CSS variables to copy a ready-to-use block like
--brand-50: #f0fdfb; through --brand-950: #082824;. Paste it into your
:root {} and reference any stop with var(--brand-500). The JSON export
works directly with Tailwind's theme.extend.colors or Style Dictionary token files.
How do I choose the right base color for my scale?
Aim for a hue with moderate saturation (50–80 %) and mid-range lightness (40–60 % in HSL). Extremely saturated or very light/dark bases can produce washed-out or indistinguishable steps at the extremes. Once you have a candidate, generate the full ramp, then use Chroma Palette's Contrast Checker to confirm your text shades pass WCAG AA (≥ 4.5 : 1) against your intended background tints.