Color Palette Generator
NewEnter any hex color to instantly generate 11 Tailwind-inspired shades (50 through 950) using an HSL-based lightness curve. Also generates complementary, analogous, and triadic color harmonies. Copy shades as CSS custom properties or Tailwind config. 100% client-side.
Common Use Cases
- Generate a complete Tailwind color scale from a brand color
- Find complementary colors for UI design
- Create accessible color systems with consistent lightness steps
- Export CSS variables for design tokens
- Explore color harmonies for palette building
Frequently Asked Questions
How are the shades calculated?
Shades are generated by converting your input color to HSL, then interpolating the lightness across 11 steps (50 to 950) following a curve similar to Tailwind's default palette — very light at 50 (~97% lightness) down to very dark at 950 (~12%). Saturation is slightly adjusted at the extremes.
What are color harmonies?
Color harmonies are sets of colors that work well together based on their position on the color wheel. Complementary colors are opposite (180° apart), analogous are adjacent (±30°), and triadic are evenly spaced (120° apart).