Color Palette
DESIGNGenerate a complete 11-shade color palette from any base color. Copy HEX values or full CSS variables.
📖 How to Use Color Palette
1
Enter a base colour
Input a HEX colour code or use the colour picker to choose your brand colour.
2
Generate the palette
Click Generate to create an 11-shade palette from near-white to near-black.
3
Copy colour codes
Click any swatch to copy its HEX, RGB, or HSL code for use in CSS, Figma, or your design system.
💡 Examples
Tailwind-style blue palette
INPUT
#3B82F6 (blue-500)→
OUTPUT
11 shades from #EFF6FF (50) to #172554 (950)Brand colour expansion
INPUT
#10B981 (emerald)→
OUTPUT
11 shades for design system use🚀 Pro Tips
✓For accessible colour palettes, ensure text on your primary colour has a contrast ratio ≥ 4.5:1 (WCAG AA).
✓Use the 100–300 shades for backgrounds, 400–600 for primary elements, 700–900 for text and borders.
✓Consistent 50-scale palettes (50, 100, 200 … 900, 950) match Tailwind CSS colour system conventions.
✓HSL representation makes it easier to adjust lightness while keeping hue and saturation constant.