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
Scale name
50
100
200
300
400
500
600
700
800
900
950
brand-50
#E2FFF0
on ◻ 1.1failon ◼ 19.8AAA
brand-100
#C3FCDF
on ◻ 1.1failon ◼ 18.4AAA
brand-200
#ACEECD
on ◻ 1.3failon ◼ 15.8AAA
brand-300
#8BD9B4
on ◻ 1.7failon ◼ 12.7AAA
brand-400
#61C196
on ◻ 2.2failon ◼ 9.6AAA
brand-500
#25A676
on ◻ 3.1AA·lgon ◼ 6.8AA
brand-600
#00885D
on ◻ 4.5AA·lgon ◼ 4.7AA
brand-700
#006947
on ◻ 6.8AAon ◼ 3.1AA·lg
brand-800
#004E34
on ◻ 9.8AAAon ◼ 2.1fail
brand-900
#003623
on ◻ 13.5AAAon ◼ 1.6fail
brand-950
#002013
on ◻ 17.3AAAon ◼ 1.2fail
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;
}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.