Generate tints, shades and tones from one color
Design systems rarely use a single shade of a colour. You need a pale version for backgrounds, a mid tone for buttons, darker steps for hover states and text. This tints and shades generator derives all of them from one base colour and presents them as a numbered scale you can paste straight into CSS or Tailwind.
What the tints and shades generator creates
- Tint: the colour mixed with white — lighter and softer.
- Shade: the colour mixed with black — darker and deeper.
- Tone: the colour mixed with grey — less saturated, more muted.
Each row starts with your base colour followed by mixes at evenly spaced percentages. With 10 steps, the first tint is about 9% white and the last about 91% white.
The 50–950 scale
Simple mixing with white and black makes colours washed out at the light end and dull at the dark end. The scale therefore works differently: it places your colour at the step whose lightness is closest (for #3b82f6 that is 500), then generates the other steps in OKLCH, adjusting lightness along a curve similar to Tailwind's and reducing chroma towards the extremes so light tints stay clean and dark shades stay rich.
@theme {
--color-brand-50: #e7f9ff;
--color-brand-500: #3b82f6;
--color-brand-950: #10213e;
}Export formats
- CSS variables —
--brand-500: …in a:rootblock. - Tailwind v4 @theme — enables utilities such as
bg-brand-500. - tailwind.config — an object for
theme.extend.colorsin Tailwind v3. - SCSS —
$brand-500variables. - All values — the plain lists of tints, shades and tones.
Tips
Use steps 50–100 for backgrounds, 500–600 for buttons, 700–900 for text on light backgrounds, and always confirm text pairs with the contrast checker. To compare your scale with the built-in Tailwind palette, look up the nearest classes in the Tailwind color finder. Need a smooth blend between two different colours instead? Try the color mixer.
How many steps do you need?
Eleven steps (50–950) are the de-facto standard since Tailwind popularised them, and they cover backgrounds, borders, fills, hover states and text in both light and dark themes. Smaller projects can get by with five steps — for example 50, 200, 500, 700 and 900 — while data-heavy dashboards sometimes need the in-between tints, shades and tones rows for charts and heat maps. The Steps per row slider controls only those three rows; the 50–950 scale always has eleven steps.
Dark mode
A common approach is to invert the scale in dark mode: backgrounds use 900–950, text uses 100–200 and accents move one or two steps lighter so they keep enough contrast against dark surfaces.
Input formats
The base colour field accepts HEX, rgb(), hsl(), oklch() and colour names, so you can paste a value from a brand guide or from your browser's developer tools. Every swatch on the page can be clicked to copy its HEX code, which is convenient when you only need one or two steps rather than the whole scale.
Privacy
The tool runs entirely in your browser. Nothing you type or paste is sent to our servers.