Tailwind Shade Scale
Generate a Tailwind-style 50-950 scale from one base color.
#3b82f6Brand & web presets (62)
| Stop | Hex | Preview |
|---|---|---|
50 |
#baf6ff |
|
100 |
#acecff |
|
200 |
#88d0ff |
|
300 |
#65aeff |
|
400 |
#438bff |
|
500 |
#246bdd |
|
600 |
#0251c1 |
|
700 |
#003baa |
|
800 |
#002389 |
|
900 |
#000b5f |
|
950 |
#000041 |
50: #baf6ff
100: #acecff
200: #88d0ff
300: #65aeff
400: #438bff
500: #246bdd
600: #0251c1
700: #003baa
800: #002389
900: #000b5f
950: #000041About this tool
Pick a base color — the tool builds the 11-stop Tailwind v3 scale (50, 100, …, 950) by interpolating lightness and chroma in OKLCH for perceptually-even steps.