What the shades and tints generator does
Give the tool one colour and it produces a scale of lighter tints and darker shades — ten steps in each direction — with the hex code for every step. That scale is the raw material of a design system: hover and active states, backgrounds, borders, disabled states and dark-mode variants all come from the same hue at different lightness. It runs in your browser and works from any hex colour.
Tints, shades and tones
Tint = colour mixed with white (lighter)
Shade = colour mixed with black (darker)
Tone = colour mixed with grey (less saturated, same lightness)
#E85D26 tints: #EA6D3C #ED7D52 #F08D68 … #FDEFE9
#E85D26 shades: #D15422 #BA4A1E #A3411B … #2E1208The generator mixes in RGB space in equal steps, which is what most CSS preprocessor lighten() / darken() functions do. It is predictable and fine for UI states; for perceptually even steps across a whole palette, see the note on colour spaces below.
Turning a scale into a design token set
| Step | Typical use (light theme) |
|---|---|
| 50 / 100 (lightest tints) | Page and card backgrounds, subtle highlights |
| 200 / 300 | Borders, dividers, disabled backgrounds |
| 400 | Placeholder text, icons at rest |
| 500 (base colour) | Primary buttons, links, active states |
| 600 / 700 | Hover and pressed states, text on light backgrounds |
| 800 / 900 (darkest shades) | Headings, high-contrast text, dark-mode surfaces |
Tailwind, Material and most design systems use exactly this 50–900 convention. Pick the base as 500, take the tints as 50–400 and the shades as 600–900, and name them --brand-50 … --brand-900.
Contrast checks
- White text needs a background of roughly shade 600 or darker for most hues to reach 4.5:1; saturated yellows and cyans may need 700+.
- Dark text (900) on the lightest tints (50–100) is almost always fine.
- Hover states should differ from rest by at least one step; two steps reads more clearly.
- Check the base colour against white and black — some mid-tones fail both, which means the base can be used for fills but not for text.
A note on colour spaces
Mixing in RGB darkens some hues faster than others and can shift the apparent hue (blues drift toward purple when lightened, yellows go muddy when darkened). Modern CSS offers color-mix(in oklch, …) and relative colour syntax, which keep perceived hue and produce evenly spaced steps. If your scale looks uneven, generate it in OKLCH or HSL and adjust; the RGB scale here is a fast first pass and matches what Sass produces.