Tint · Shade · Tone auto palette. UI design systems, dark-mode.
🎨 Tint (base + white)
⬛ Shade (base + black)
⚪ Tone (base + gray)

How to use

  1. Pick a base color (or use preset).
  2. Adjust steps (10 is common).
  3. Set max variation ratio.
  4. Tint / Shade / Tone palettes auto-generate.
  5. Copy CSS variables or download PNG.

Key features

  • Tint (lighter) + Shade (darker) + Tone (muted)
  • 5–20 steps
  • 5 color presets
  • Auto CSS variables (--color-50, --color-100…)
  • Tailwind / Material standard steps

Use cases

  • UI design systems — brand color 50–900 scale
  • Dark mode — same hue, darker variants
  • Chart gradients — data viz
  • Hover / active states — step-based colors
  • Illustration shading — highlights & shadows from one color

Tint vs Shade vs Tone

Three classic color-theory variants of one hue: (1) Tint mixes white → lighter, softer. (2) Shade mixes black → darker, deeper. (3) Tone mixes gray → less saturated, calmer. Tailwind's 50–900 scale follows this — 50 is the lightest tint, 900 the deepest shade.

FAQ

Tailwind compatible?

Yes. 10 steps ≈ Tailwind 50–900. CSS variable names match.

HSL-based?

Yes — adjusts HSL Lightness/Saturation for exact variants.

Accessibility (contrast)?

Tint 100 / Shade 800 typically clears 4.5:1 (WCAG AA). Check text-on-background pairs.

Free?

Yes.