50–950
Color Shades Generator
A 50–950 scale (Tailwind-style) or tints & shades from one color.
50
100
200
300
400
500
600
700
800
900
950
| Step | HEX | OKLCH | Contrast on white |
|---|---|---|---|
| 50 | #eff7ff | oklch(97.24% 0.0137 247.97) | 1.08:1 |
| 100 | #daecff | oklch(93.55% 0.0322 249.62) | 1.21:1 |
| 200 | #bedaff | oklch(88% 0.0595 255.47) | 1.43:1 |
| 300 | #99c1ff | oklch(80.51% 0.0984 258.98) | 1.84:1 |
| 400 | #689fff | oklch(70.75% 0.1528 260.85) | 2.63:1 |
| 500 | #397cff | oklch(61.65% 0.207 261.96) | 3.82:1 |
| 600 | #2563eb | oklch(54.61% 0.2152 262.88) | 5.17:1 |
| 700 | #164cc4 | oklch(46.45% 0.1955 262.91) | 7.33:1 |
| 800 | #0e3b9f | oklch(39.51% 0.1691 262.9) | 9.79:1 |
| 900 | #082c7c | oklch(32.92% 0.1415 262.87) | 12.64:1 |
| 950 | #031c57 | oklch(25.52% 0.1111 262.68) | 16.06:1 |
Runs entirely in your browser. Nothing is sent anywhere.
How it works
- 1Paste or type your text.
- 2Choose the options you need.
- 3Copy or download the result.
About this tool
Color Shades Generator: A 50–950 scale (Tailwind-style) or tints & shades from one color. Paste your text and the result appears immediately, ready to copy or download. Everything happens locally in your browser — nothing you paste is uploaded or stored.
How do I use the Color Shades Generator?
Paste or type your text. Choose the options you need. Copy or download the result.
Is the Color Shades Generator free?
Yes. It is completely free with no sign-up, no usage limits and no watermark.
Is my data sent to a server?
No. Everything is calculated locally in your browser. Nothing you enter is uploaded, logged or stored.
Does it work on my phone?
Yes. It works in any modern browser on Android, iPhone, iPad, Windows, Mac and Linux — no app needed.