Tint Shade Generator

This is a tint and shade generator. From one HEX it builds lighter mixes toward white and darker mixes toward black, or walks HSL lightness, chroma and hue.

Click a value to copy it

Examples — click a swatch

Convert several colors at once. One per line, or commas such as #3B82F6, #FF573380. Fill example loads three rows and the table below.

Tint shade generator

This is a tint and shade generator. A tint mixes a HEX toward white; a shade mixes it toward black — the same sRGB mix CSS color-mix uses. From one brand HEX you get a ramp for hover, pressed and border colors. A second axis walks HSL lightness, chroma or hue. HEX to Tailwind finds a default class; this page builds a private scale.

How to use

  1. Paste HEX, rgb() or hsl(), pick a color, use Random, click an example (#3B82F6, #171B45, #0074D9, #0F766E), or sample a pixel where EyeDropper is available.
  2. Axis Mix (white / black) is the default. Lightness, Chroma and Hue keep two HSL channels and move the third. Step 5%, 10%, 20% or 25% sets how many stops; Custom uses 2–20 divisions.
  3. The full scale has shades on the left, the base in the middle, tints on the right. HEX sits under each block. Click a stop to copy that HEX and refresh the chips (HEX, rgb(), hsl()).
  4. Token name (default brand) fills CSS variables such as --brand-tint-10 and a Tailwind snippet with tint and shade maps. Copy result copies the CSS block. Show example reloads #3B82F6 at 10% Mix.
  5. Batch accepts several HEX values. Fill example loads #3B82F6, #171B45 and #0074D9. Each row prints the base, a mid tint and a mid shade.

Notes

Mix is linear sRGB toward #FFFFFF or #000000. 50% tint of #3B82F6 is the same as overlaying that blue at 50% on white. Lightness / Chroma / Hue use HSL, not OKLCH; steps can look less even on some hues. Invalid HEX shows an error. Empty Clear all empties the ramps. Related: HEX to Tailwind, opacity overlay, HEX to RGBA.

Where to use it

  • Hover, pressed and border colors from one brand HEX.
  • A 10% ramp that maps onto a 100–900 token scale.
  • Muted fills by dropping chroma at the same lightness.
  • Companion hues at the same visual weight by rotating hue.

Questions

Is 50% tint the same as 50% opacity on white?

For Mix, yes. That is overlaying the color at 50% on #FFFFFF.

Does 10% match Tailwind 50–950?

It gives nine steps each way plus the base, which is the usual token count. The numbers are mix percentages, not OKLCH 50–950. For a named default class use HEX to Tailwind.

Can I paste several colors?

Yes. One per line, or commas outside parentheses. rgb(22, 163, 74) stays one item.