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.
Turn any color into an eleven-step shade scale — 50 through 950 — computed in OKLCH so the steps are perceptually even. No more scales that look identical in the middle and jump at the ends.
Copy plain HEX values or the complete Tailwind-ready @theme block. The step naming matches Tailwind exactly, so tints and shades map straight onto utility classes.
| 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) |
Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
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.
Related tools
Related guides
Development · 24 Aug 2026
Generate a Tailwind v4 color scale from one color
One brand color → a complete Tailwind v4 50–950 scale as a @theme block. Here's how, and why the steps stay perceptually even.
Design styles · 1 Sept 2026
Fourteen design system styles you can generate with one link
A visual style is just a set of structural settings. Here are fourteen of them, encoded as generator links that build the entire system — not just a screenshot.
Design styles · 1 Sept 2026
Retro UI: the 90s desktop as a design system
Beveled buttons, steel teal-grey, window chrome. Here's the retro 90s-desktop style as a working design system preset.
Shade & tint scale generator runs entirely in your browser — nothing you enter is sent to a server.