Color Shades Generator
FreeGenerate 11 Tailwind-compatible shades from any color. CSS variables, Tailwind config and SCSS. HEX/RGB/HSL.
✓ Free✓ No signup✓ KVKK Compliant✓ Turkish chars OK✓ Auto-deleted in 7 days
Color Values
| Shade | HEX | RGB | HSL | White Text | Black Text | |
|---|---|---|---|---|---|---|
50 | #f0f6fe | rgb(240,246,254) | hsl(214,88%,97%) | 1.1:1 Fail | 19.3:1 AAA | |
100 | #e2ecfe | rgb(226,236,254) | hsl(219,93%,94%) | 1.2:1 Fail | 17.7:1 AAA | |
200 | #bbd4fc | rgb(187,212,252) | hsl(217,92%,86%) | 1.5:1 Fail | 13.9:1 AAA | |
300 | #80aff9 | rgb(128,175,249) | hsl(217,91%,74%) | 2.2:1 Fail | 9.4:1 AAA | |
400 | #4186f6 | rgb(65,134,246) | hsl(217,91%,61%) | 3.5:1 Fail | 6.0:1 AA | |
500 ★ | #3b82f6 | rgb(59,130,246) | hsl(217,91%,60%) | 3.7:1 Fail | 5.7:1 AA | |
600 | #0a54cd | rgb(10,84,205) | hsl(217,91%,42%) | 6.6:1 AA | 3.2:1 Fail | |
700 | #07409c | rgb(7,64,156) | hsl(217,91%,32%) | 9.4:1 AAA | 2.2:1 Fail | |
800 | #052e70 | rgb(5,46,112) | hsl(217,91%,23%) | 12.9:1 AAA | 1.6:1 Fail | |
900 | #031e49 | rgb(3,30,73) | hsl(217,92%,15%) | 16.3:1 AAA | 1.3:1 Fail | |
950 | #021431 | rgb(2,20,49) | hsl(217,92%,10%) | 18.3:1 AAA | 1.1:1 Fail |
:root {
--color-primary-50: #f0f6fe;
--color-primary-100: #e2ecfe;
--color-primary-200: #bbd4fc;
--color-primary-300: #80aff9;
--color-primary-400: #4186f6;
--color-primary-500: #3b82f6;
--color-primary-600: #0a54cd;
--color-primary-700: #07409c;
--color-primary-800: #052e70;
--color-primary-900: #031e49;
--color-primary-950: #021431;
}Your files are encrypted with SSL and automatically deleted from our servers 7 days after processing.
📖 How to Use
1
Upload document
Drag-drop or pick file.
2
Set options
Choose operation and parameters.
3
Process
Server runs the task.
4
Download
Get result in your format.
Frequently asked questions
Color Shades Generator user reviews
No reviews yet. Be the first to tell others how Color Shades Generator worked for you.