Palette Pick

From one colour to a usable scale.

Type a hex value, get a full Tailwind-style 50–950 ramp plus WCAG contrast scores against black and white. Copy the config and ship.

Base colour (hex)

Name (used in the config)

100

200

300

400

500

600

700

800

900

950

Each shade

brand-50

#E2FFF0

on white 1.06 failon black 19.79 AAA

brand-100

#C3FCDF

on white 1.14 failon black 18.35 AAA

brand-200

#ACEECD

on white 1.33 failon black 15.82 AAA

brand-300

#8BD9B4

on white 1.65 failon black 12.71 AAA

brand-400

#61C196

on white 2.20 failon black 9.56 AAA

brand-500

#25A676

on white 3.10 AA·lgon black 6.77 AA

brand-600

#00885D

on white 4.47 AA·lgon black 4.70 AA

brand-700

#006947

on white 6.76 AAon black 3.11 AA·lg

brand-800

#004E34

on white 9.81 AAAon black 2.14 fail

brand-900

#003623

on white 13.50 AAAon black 1.56 fail

brand-950

#002013

on white 17.28 AAAon black 1.21 fail

Tailwind config

@theme {
  --color-brand-50: #e2fff0;
  --color-brand-100: #c3fcdf;
  --color-brand-200: #aceecd;
  --color-brand-300: #8bd9b4;
  --color-brand-400: #61c196;
  --color-brand-500: #25a676;
  --color-brand-600: #00885d;
  --color-brand-700: #006947;
  --color-brand-800: #004e34;
  --color-brand-900: #003623;
  --color-brand-950: #002013;
}

Ramp generated in OKLCH for perceptual uniformity — the same approach Tailwind v4 uses internally.

OKLCH ramp

Lightness steps in perceptually uniform space, with automatic chroma adjustment near the extremes — no muddy 900s or washed out 50s.

WCAG built-in

Every shade is rated against black and white using WCAG 2.1 contrast formulas. AA, AAA, or fail — visible at a glance.

Drop-in config

Export for Tailwind v4 (@theme) or v3 (tailwind.config.js). Paste, save, done.