Generate shades (mixed with black), tints (mixed with white) and tones (mixed with gray) of any color in one pass. Steps are blended in OKLab so they look evenly spaced to the eye, and the whole ramp exports as CSS variables, SCSS, JSON or design tokens.
Generated locally in your browser — your colors, settings and code never leave this page.
Three directions from any color
Classical color vocabulary names three ways to modify a hue without changing it: toward black (shades), toward white (tints), toward gray (tones). The triple ramp is the wardrobe a single color needs to function in an interface — dark variants for text and hover states, light ones for backgrounds and highlights, muted ones for secondary chrome. This generator produces all three families in one pass, evenly stepped, exported in whatever format your pipeline speaks.
Even steps, honestly even
The ramps blend in OKLab, so each step changes perceived lightness by a constant amount — stairs, not a lurch. The common alternative (blending stored sRGB channels) crowds its light tints together and stretches the dark end; the space toggle here lets you generate both and see. Hue also holds steady in OKLab — channel-space shade ramps notoriously drift purple as blues darken.
Sizing the ramp
Steps-per-direction is a knob with conventions attached: 3–4 covers a component’s states; 5–6 a full ramp in the Tailwind/Material tradition (which the dedicated Tailwind Palette and Material-style generators formalize with their own naming); more than 8 exceeds what adjacent UI elements can meaningfully distinguish. Generate deep, ship shallow.
Tones: the underused third family
Tints and shades get the attention; tones do the quiet professional work. A toned variant keeps lightness while shedding chroma — the color equivalent of lowering your voice. Disabled states, secondary buttons, subtle borders and dark-mode adaptations all want tones, and reaching for opacity tricks instead (which shift with the background) is the common mistake. Fixed tone colors behave identically everywhere — that reliability is the point.
A ramp, materialized
One base color stepped three each way in OKLab — the exact kind of ladder this generator emits, shown as values:
| Step | HEX | Role suggestion |
|---|---|---|
| shade 3 | #12202d | text on light surfaces |
| shade 2 | #203a51 | hover / active states |
| shade 1 | #315b7e | borders, icons |
| base | #4682b4 | identity moments |
| tint 1 | #7ea8ca | chips, highlights |
| tint 2 | #b5cde1 | hover washes |
| tint 3 | #e3ecf4 | tinted backgrounds |
The role column is the part most ramps never write down: a ladder only becomes a system when each rung has a job. Generate your own ramp above, copy this table’s third column beside it, and the assignment meeting is already half over.
How to use the Shades, Tints and Tones Generator
- Pick the base color and how many steps per direction.
- Choose the blend space (OKLab default for even steps).
- Read three labeled rows: shades, tints, tones.
- Export everything as CSS variables, SCSS, JSON or design tokens.
Frequently asked questions
What is the difference between a shade, a tint and a tone?
Classical pigment vocabulary: shade = base + black, tint = base + white, tone = base + gray. In UI terms: shades for text/hover-dark states, tints for backgrounds and highlights, tones for muted, sophisticated variants. The generator produces all three families at once.
Why do the steps look more even than other generators I have used?
Blending runs in OKLab, so each step changes perceived lightness by the same amount. Tools that mix in raw sRGB bunch their light tints together and stretch the dark end – compare by switching this generator to its sRGB mode.
How many steps should a UI color ramp have?
Popular systems settle on 9-11 (Tailwind's 50-950, Material's tonal 13). For a single component you often need just 3-5. Generate generously, ship only what gets used – unused CSS variables are free, unused visual complexity is not.
Do tints keep passing contrast where the base did?
No – every step changes luminance, so contrast verdicts must be re-checked per step. Pair this with the Palette Contrast Matrix to see which ramp steps still hold 4.5:1 against your text or background.
Why would I use tones instead of just lowering opacity?
Opacity variants shift with whatever is behind them and break on images; tones are fixed colors that look muted everywhere. Use opacity for layering effects, tones for reliable muted UI.
Can I build a Tailwind-style 50-950 scale from these?
That exact shape – perceptual scale keyed to shade numbers – is the Tailwind Color Palette Generator's specialty, sharing this tool's OKLCH math. Use this page when you want raw ramps without the framework naming.
Does the base color always sit exactly in the middle?
It sits between the shade and tint rows by construction, but not necessarily at the ramp's perceptual center – a very light base leaves little room for tints. The rows adapt; nothing clips.
