Skip to main content
Beru

Tailwind Shades Generator

Turn one colour into a 50 to 950 shade ramp and copy it as a Tailwind v4 theme, CSS variables or a v3 config.

Base colour

Used for the variable names: letters, numbers and hyphens.
Ramp

Even hue, Tailwind-like steps. Your base reads as about 430.

Scale: primary

  1. 50#f1f5fc
  2. 100#dde9fb
  3. 200#bed6fc
  4. 300#90b9fa
  5. 400#5190f7 · ≈ base
  6. 500#1669e6
  7. 600#1053bb
  8. 700#0a4296
  9. 800#063173
  10. 900#062453
  11. 950#041532

Code

Tailwind v4 @theme
@theme {
  --color-primary-50: #f1f5fc;
  --color-primary-100: #dde9fb;
  --color-primary-200: #bed6fc;
  --color-primary-300: #90b9fa;
  --color-primary-400: #5190f7;
  --color-primary-500: #1669e6;
  --color-primary-600: #1053bb;
  --color-primary-700: #0a4296;
  --color-primary-800: #063173;
  --color-primary-900: #062453;
  --color-primary-950: #041532;
}

Runs in your browser; nothing you enter leaves this page.

How it works

A ramp from your base

The base colour is placed at the step it most resembles, and the other eleven steps (50, 100 to 900, 950) are generated around it in OKLCH, keeping hue and easing lightness and chroma.

Five modes change the character: classic keeps an even hue, hue shift warms the light end and cools the dark end, anchored pushes the ends toward white and black, vivid keeps the most chroma sRGB allows, muted stays quiet.

Code

Copy the ramp as a Tailwind v4 @theme block, as CSS variables in HEX or OKLCH, or as a tailwind.config entry for v3. The name you give becomes the variable name.

More tools

All 238 tools