Color Scale & Tokens
Turn a brand color into a 50–950 scale and export it as Tailwind, CSS or JSON tokens.
Scale
Lightness follows fixed perceptual targets, so every ramp in your system lines up.
50
100
200
300
400
500
600base
700
800
900
950
| Step | Hex | On white | On black |
|---|---|---|---|
| 50 | #E0EEFF | Fail · 1.18 | AAA · 17.84 |
| 100 | #D4E2FF | Fail · 1.30 | AAA · 16.12 |
| 200 | #C2D0FF | Fail · 1.53 | AAA · 13.76 |
| 300 | #A7B5FF | Fail · 1.96 | AAA · 10.70 |
| 400 | #8590FF | Fail · 2.83 | AAA · 7.43 |
| 500 | #7177FF | AA large · 3.63 | AA · 5.78 |
| 600 | #6165E8 | AA · 4.63 | AA · 4.53 |
| 700 | #5052C7 | AA · 6.23 | AA large · 3.37 |
| 800 | #4242AB | AAA · 8.08 | Fail · 2.60 |
| 900 | #373695 | AAA · 9.89 | Fail · 2.12 |
| 950 | #1A155B | AAA · 16.13 | Fail · 1.30 |
Export
Source
100%
Your colour sits closest to step 600.