Tints, Shades & Tones Generator
Enter any color and get its full family: tints toward white, shades toward black, tones toward gray, and a Tailwind-style 50–900 ramp — all stepped evenly in the perceptual OKLCH space. Click any swatch to copy. Free and 100% in your browser.
Tailwind-style ramp (50–900)
Tints — toward white
Shades — toward black
Tones — toward gray
One color is never enough
Whatever a color is for — a brand, a wall, a button — you will immediately need its relatives: a lighter version for hover states and washes, a darker one for text and pressed states, a muted one for disabled elements. Painters solved this centuries ago with three words: tint (add white), shade (add black), tone (add gray). This page computes all three families, plus the numbered ramp modern design systems actually ship.
Why even steps need a perceptual space
Mixing toward white in raw RGB produces steps that bunch up: the first few look identical, the last few jump. These strips interpolate in OKLab and the ramp steps on fixed OKLCH lightness anchors, so each move is the same size to your eye. That is also why a yellow ramp and a blue ramp built here feel like siblings — at every numbered step they share perceived lightness, which HSL-based generators cannot promise.
Using the 50–900 ramp in practice
- 50–100 — page and card backgrounds, subtle highlights.
- 200–300 — borders, dividers, disabled fills.
- 400–600 — the brand zone: buttons, links, active states. Your input color snaps in here verbatim.
- 700–900 — text on light backgrounds, dark-mode surfaces.
A convention worth stealing: name variables by step (--color-500), never by look (“light blue”) — the look changes, the role doesn’t. “Copy CSS variables” emits exactly that structure.
Tones: the underrated family
Tints and shades get all the attention, but tones — same lightness, less chroma — are how interfaces whisper. A toned version of your accent makes a perfect selected-row background or chart gridline: clearly related, never shouting. Because the tone strip holds OKLCH lightness constant, any text that passed contrast on the base color still passes on its tones.
Every swatch copies its hex on click, the base can go into My colors for use across this site — try a 700-step against a 50-step in the contrast checker, or compare two candidate shades side by side. Everything runs 100% in your browser.
Frequently asked questions
What is the difference between tints, shades and tones?
Tints mix a color toward white, shades toward black, and tones toward gray. Tints lighten and soften, shades deepen and ground, tones mute while keeping the same lightness.
What does the 50–900 ramp mean?
It is the naming scheme popularized by Tailwind and Material: 50 is the near-white wash, 500 sits around the usable middle, 900 is the darkest step. Design systems reference colors by these steps instead of raw hex values.
Why are these steps computed in OKLCH instead of HSL?
HSL lightness is not perceptual — stepping it produces ramps with muddy middles and neon edges, and different hues land at visibly different brightness. OKLCH lightness matches perception, so every step of the ramp changes by the same visual amount. Tailwind v4 itself moved its palette to OKLCH.
Why does my exact input color appear inside the ramp?
The generator snaps your color into its nearest lightness step and builds the other nine around it, so the ramp is guaranteed to contain your true brand color verbatim — not a close approximation.
Can I use the ramp directly in code?
Yes — “Copy CSS variables” emits the ten steps as custom properties, every swatch copies its hex on click, and nothing you do here leaves your browser.