Color Palette Generator
Generate harmony schemes, tint/shade scales, and export for your project
Base Color
Hue
38°
Saturation
92%
Lightness
50%
Nearest:
Start From a Preset
Picking one makes its first colour the base and rebuilds the harmony and scale around it.
Color Harmonies
Tint / Shade Scale
Text Contrast
Every shade against the only two text colours anyone uses. AA needs 4.5:1 for body text and 3:1 for large text (18.7px bold or 24px); AAA needs 7:1.
| Shade | Color | White text | Black text |
|---|---|---|---|
| 50 | 1.05:1Fail | 20.01:1AAA | |
| 100 | 1.10:1Fail | 19.04:1AAA | |
| 200 | 1.27:1Fail | 16.57:1AAA | |
| 300 | 1.43:1Fail | 14.67:1AAA | |
| 400 | 1.69:1Fail | 12.41:1AAA | |
| 500 | 2.01:1Fail | 10.47:1AAA | |
| 600 | 2.76:1Fail | 7.62:1AAA | |
| 700 | 4.03:1AA Large | 5.21:1AA | |
| 800 | 7.08:1AAA | 2.97:1Fail | |
| 900 | 9.73:1AAA | 2.16:1Fail | |
| 950 | 13.35:1AAA | 1.57:1Fail |
Design Preview
AppName
DashboardSettings
Welcome to Your App
Build something amazing with your new palette.
Components
Reusable UI blocks
Learn more →
Themes
Customizable styles
Learn more →
Performance
Lightning fast
Learn more →
Setup complete
Your project has been configured successfully.
Option
Search...
NewProgress68%
Color Blindness Preview
Normal Vision
Protanopia (no red)
Deuteranopia (no green)
Tritanopia (no blue)
Achromatopsia (no color)
Export
→
amber-500:root {
--amber-50: #fdf9f2;
--amber-100: #fbf3e4;
--amber-200: #f6e2c1;
--amber-300: #fad28e;
--amber-400: #f8bd58;
--amber-500: #f6a723;
--amber-600: #d88b09;
--amber-700: #b07107;
--amber-800: #79500b;
--amber-900: #5d3e09;
--amber-950: #412b06;
}