How do I make lighter and darker versions of a color?
Shade & tint generator - tints (mixed with white) on the left, base in the middle, shades (mixed with black) on the right.
OKLCH interpolation preserves hue while mixing - blue gets lighter/darker but still reads as blue, not gray.
Great for hover/active states, button variants, dark mode pairs. All local.
How to use it
- Pick a base color (HEX, native picker, screen eyedropper).
- Pick step count: 3 (subtle), 5 (balanced), 7 (detailed), 10 (Tailwind-like ramp).
- On the right: tints (with white) → base ★ → shades (with black). Click to copy HEX.
- Below: CSS variables ready to drop into `:root`.
- Tip: 10-step output → very close to Tailwind 100/200/.../900 of your brand color.
When this is useful
Where tints and shades pay off - typical uses:
- Hover / active states - base button + tint for hover (lighter) + shade for active (darker).
- Ghost / outline buttons - tint-300 as background, base as border, shade-700 as text.
- Dark mode - shade-700 and shade-800 are candidates for dark-mode backgrounds.
- Disabled state - tint-200 as a "ghosted" button.
- Cards with elevation - tint-100 as a card background on a white body.
- Brand consistency - when brand color #ef4444 is too bright for a header, use shade-300 as a more balanced alternative.
- Education - notice that "blue 50% pure" in OKLCH looks perceptually 50%, in HSL it doesn't - that's why our tints/shades feel evenly spaced.
Questions and answers
Tint = original color + white (lighter version). Shade = original color + black (darker version). Different from "tone" (original + gray) which we don't generate because it's rarely used.