Color Palette Generator
Generate harmonious color palettes — complementary, analogous, triadic, split-complementary and monochrome — from any base color, with CSS variables to copy.
How to use
- 1Pick a base color (or press Random) and choose a harmony rule.
- 2Click a swatch to copy its HEX, or copy the whole palette as CSS variables or Tailwind config.
How it's calculated
Harmonies rotate the hue on the color wheel: complementary +180°, triadic ±120°, analogous ±30°, split-complementary 180° ± 30°. Shades vary lightness in HSL.
Frequently asked questions
How many colors should a brand palette have?
Typically a primary, a secondary or accent, and neutrals — plus shades of each for hover, borders and backgrounds.
What is the 60-30-10 rule?
Use a dominant color for about 60% of a design, a secondary for 30% and an accent for 10%.
How do I check the colors are accessible?
Use the contrast checker — body text needs at least 4.5:1 against its background.