A tint is a colour mixed toward white, and a shade is a colour mixed toward black, terms that come directly from traditional colour theory. Design systems need both because a single brand colour is rarely usable everywhere on its own, a button needs a hover state a little darker than its resting state, a light background needs a version of the colour subtle enough not to compete with text, and a dark mode surface needs the same brand hue pushed toward black without turning muddy.
The entire scale, all eleven steps and both export formats, is computed in your browser the moment you enter a colour, with no server round trip.
Why this tint and shade generator mixes in OKLab, not HSL
The naive way to build a colour scale is to hold hue and saturation fixed in HSL and step lightness evenly from near 0 to near 100. That approach produces visibly uneven results because HSL lightness does not track perceived brightness consistently across different hues, a yellow at 80 percent HSL lightness looks far brighter than a blue at the same lightness value, so a scale built this way looks fine for some brand colours and noticeably lopsided for others.
This generator instead mixes the base colour toward pure white for tints and pure black for shades inside the OKLab colour space, interpolating its lightness, and its two colour axes together in a model built specifically so that equal numeric steps correspond to roughly equal perceived steps. The practical result is a scale where the visual jump from 100 to 200 looks about as large as the jump from 700 to 800, regardless of which hue you started from.
Reading the 50 to 950 color scale generator steps
The naming convention runs 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, with 500 sitting closest to the original input colour. Steps below 500 are tints, progressively closer to white as the number drops, and steps above 500 are shades, progressively closer to black as the number rises. This numbering is not arbitrary, it matches the scale used by Tailwind CSS and has become close to a de facto standard across other design systems, which is why exporting directly into that shape is useful rather than inventing a different numbering scheme.
50 and 100 are typically reserved for the lightest backgrounds and subtle fills, 400 through 600 for primary interactive elements like buttons and links, and 800 through 950 for text on light backgrounds or surfaces in a dark theme, though the right step for any specific use always depends on checking contrast against whatever it sits next to.
Using a tailwind color palette from hex output
The Tailwind export writes the full eleven step scale as a colors object keyed by the 50 to 950 step numbers, formatted to paste directly into a Tailwind configuration file's theme extension. Because the step numbering already matches Tailwind's own convention, a tailwind color palette from hex generated this way slots in as a drop in replacement for one of Tailwind's built in colour scales, just under whatever name you give it.
The CSS export produces the same eleven colours as custom properties instead, named sequentially, for projects that are not using Tailwind but still want a consistent scale defined once and referenced everywhere through var().
Choosing which step to use: tint shade tone explained
Tint, shade and tone are the three classic colour mixing operations: tint mixes toward white, shade mixes toward black, and tone mixes toward grey, reducing saturation without necessarily changing lightness much. This generator focuses on tint and shade, since those two operations produce the light to dark scale most interface work actually needs, while a separate saturation adjustment covers the tone case for anyone who wants a more muted version of a specific step.
As a starting point for interface work, use a step from 500 to 600 for primary buttons and links, a step from 50 to 100 for light backgrounds behind that same colour family, and a step from 800 to 950 for body text when you specifically want a coloured, rather than neutral, dark tone.
How this tint and shade generator works under the hood
Each step is produced by converting the base colour and the target endpoint, pure white for tints, pure black for shades, into OKLab, then linearly interpolating lightness and the two colour axes by a mix amount specific to that step, before converting the result back through linear sRGB and gamma encoding to a final hex colour. Step 500 uses a mix amount of 0, meaning it is the unmodified input colour, converted through the same pipeline for consistency.
Because the interpolation happens entirely in OKLab space rather than being layered on top of HSL, every exported colour is a colour a browser can render directly, sRGB is the target of the final gamma encoding step, so nothing in the exported scale relies on wide gamut display support.
| Step | Typical use |
|---|---|
| 50 to 100 | Subtle backgrounds and light fills |
| 200 to 300 | Borders and disabled states |
| 400 to 600 | Primary buttons, links and icons |
| 700 to 800 | Hover and pressed states |
| 900 to 950 | Body text on light backgrounds |
How to generate a tint and shade scale
- 1
Enter a base colour
Type or pick the hex colour that will become step 500 in the generated scale.
- 2
Review the full scale
All eleven steps, from 50 to 950, render together so you can compare them at a glance.
- 3
Copy an individual step
Copy the hex value of any single step you need for a specific interface state.
- 4
Export the whole scale
Copy the entire scale as CSS custom properties or a Tailwind config snippet.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the tint and shade generator.
A tint is a colour mixed with white, which raises its lightness while keeping the same underlying hue, producing pastel or pale versions of a colour. A shade is a colour mixed with black, which lowers its lightness, producing deeper, darker versions. Both preserve the original hue, they only move it toward opposite ends of the lightness range.
Yes. Step 500 uses a mix amount of 0 toward either white or black, so it is your original input colour passed through the same OKLab round trip as every other step purely for consistent rounding, rather than a modified version of it. Every step above 500 mixes toward black and every step below mixes toward white by an increasing amount.
Yes, the Tailwind export is already formatted as a colors object keyed by the same 50 to 950 step numbers Tailwind's default palettes use, so it can be pasted directly into a theme.extend.colors block under a name of your choosing with no reformatting needed.
HSL lightness does not correspond consistently to how bright a colour actually looks, which produces scales where some hues have visibly larger or smaller steps than others even though the underlying numbers are evenly spaced. OKLab was built specifically to make numeric steps match perceived steps far more closely, producing a scale that looks even regardless of which base hue you start from.
This tool produces eleven steps, following the standard 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 numbering used by Tailwind and most contemporary design systems, which gives enough granularity for backgrounds, interactive states and text colours without producing more steps than a real project typically needs.
It is mixed heavily toward black but still retains a trace of the original hue, so it reads as a very dark, tinted colour rather than a neutral black. This is deliberate, since a fully neutral black loses any connection to the brand colour the scale was built from, while a heavily darkened but still hued version stays recognisably part of the same family.