Shade & tint scale generator
Create perceptually even 50–950 shade scales in OKLCH from a single brand color. Copy HEX values or the full Tailwind theme.
| Step | HEX | OKLCH | Copy |
|---|---|---|---|
| 50 | #fff4fb | oklch(0.978 0.015 338.9) | |
| 100 | #ffe4f6 | oklch(0.946 0.038 338.1) | |
| 200 | #ffcdef | oklch(0.902 0.071 338.2) | |
| 300 | #f5b4e2 | oklch(0.844 0.095 337.5) | |
| 400 | #e097cb | oklch(0.764 0.11 337.8) | |
| 500 | #c87cb3 | oklch(0.684 0.118 337.8) | |
| 600 | #b0639b | oklch(0.605 0.122 338.1) | |
| 700 | #934b81 | oklch(0.52 0.119 337.4) | |
| 800 | #773867 | oklch(0.44 0.108 337.9) | |
| 900 | #5e2750 | oklch(0.366 0.097 338.3) | |
| 950 | #47003asource | oklch(0.27 0.119 337.9) |
How to use this tool
- Enter or pick your brand color.
- The tool generates a perceptually even 50–950 scale in OKLCH, pinning your exact color at its natural step.
- Copy individual values as HEX, or copy the whole scale into your design tokens.
Frequently asked questions
- Why generate shades in OKLCH instead of plain HEX?
- Stepping raw HEX values produces scales where some steps look identical and others jump wildly. OKLCH is perceptually uniform, so each step from 50 to 950 feels evenly spaced to the eye.
- Can I use these shades as a Tailwind color scale?
- Yes — the 50–950 steps map directly onto Tailwind's scale naming, and you can copy a ready-to-paste Tailwind v4 @theme block from this tool.
- How many shades do I get?
- Eleven steps (50, 100, 200 … 900, 950) covering tints, the base color and shades, all derived from your single input color.