Dev Tools
Client-sidefiles never upload

Tailwind palette generator (50-950)

Type one brand colour, get the full 11-step shade ramp (50-950) β€” computed in the OKLab perceptual colour space so hue stays consistent. Copy as Tailwind v4 @theme, v3 config, or CSS variables.

Shade preview (Ξ”E to closest shade = 0.038)
Output format
theme
@theme {
  --color-brand-50: #dcf7ff;
  --color-brand-100: #c3eaff;
  --color-brand-200: #9dd2ff;
  --color-brand-300: #75b3ff;
  --color-brand-400: #4b8ffd;
  --color-brand-500: #276ee0;
  --color-brand-600: #0251c1;
  --color-brand-700: #00369e;
  --color-brand-800: #001a75;
  --color-brand-900: #000650;
  --color-brand-950: #000030;
}
β€ΊHow to use
  1. Type your brand colour (hex / rgb / hsl / oklch all work) and a name for the generated identifiers (e.g. brand-500).
  2. The shade preview updates instantly β€” click any swatch to copy its hex; 11 shades from lightest to darkest.
  3. Pick an output format below: Tailwind v4 @theme, v3 config, CSS variables, or a plain hex list. Hit Copy in the corner to grab the snippet.
  4. Tool state is mirrored into the URL hash β€” copy the URL to share a palette.
Tips
  • The maths runs in the OKLab perceptual colour space, so hue stays put and lightness steps look even. Beats raw HSL lightness tweaks.
  • Tailwind v4 ships OKLCH support β€” @theme is the recommended output if you're on v4 already.
  • Name sanitiser: anything becomes kebab-case (My Brand! β†’ my-brand); empty falls back to brand.
  • Want to match an existing Tailwind preset? Drop its 500 (e.g. #0ea5e9 for sky) β€” our 500 will be near-identical, with other shades tuned for brand consistency rather than matching the official numbers exactly.

Related tools