Color Palette Generator
Generate harmonious color schemes from a base color.
Pick a base color and generate complementary, analogous, triadic, tetradic and split-complementary palettes. Copy any swatch as HEX or export the whole palette as CSS variables.
Common use cases
- Generate a brand palette from a single seed color in seconds
- Build a complementary accent for an existing brand primary
- Create design-token palettes for Tailwind, CSS variables or design systems
- Explore color harmony rules for charts, illustrations and icon sets
Frequently asked questions
Which palette should I use?▾
Analogous palettes feel calm and unified. Complementary pairs grab attention. Triadic feels playful. Start with analogous for content sites and complementary for buttons or accents.
How are the palettes computed?▾
We rotate the hue in HSL space — complementary is +180°, triadic is +120/+240, analogous is ±30°, etc. Saturation and lightness can be optionally varied for accent shades.
Related tools
🎨
Color Picker (HEX/RGB/HSL)
Pick a color and copy it as HEX, RGB, HSL or HSV.
🌈
CSS Gradient Generator
Build linear and radial CSS gradients with live preview.
👁
WCAG Contrast Checker
Check color contrast ratios against WCAG AA/AAA accessibility levels.
🎨
Color Converter
Convert HEX, RGB, HSL, HSV, CMYK and LAB instantly with auto-detection.