Color Palette Generator

Generate harmonious color palettes — complementary, analogous, triadic, and more.

Related Tools

🎨
Color Contrast Checker
Check text and background color contrast against WCAG accessibility levels.
 🎨
Color Converter
Convert between HEX, RGB, HSL and OKLCH, check WCAG contrast ratios, and generate a tonal shade strip.
 🎨
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.

0 comments

How it works

Pick a base color with the color picker or type a hex code. The tool converts to HSL and applies color-theory rotation rules on the hue wheel: complementary (180°), analogous (±30°), triadic (±120°), split-complementary (±150°), and tetradic (90° steps). Each palette swatch shows hex, RGB, and HSL values. Click any swatch to copy its hex code. Everything runs in your browser.

Common use cases

  • Choosing a brand palette from a single primary color.
  • Exploring color schemes for a website or app design.
  • Finding colors that go well together for a presentation or infographic.

Frequently asked questions

What is the difference between analogous and triadic?

Analogous colors sit adjacent on the color wheel (±30°), giving a harmonious, low-contrast look. Triadic colors are evenly spaced at 120° apart, producing a vibrant, high-contrast palette.

Are these palettes accessible?

Color harmony does not guarantee accessibility. Use the Color Contrast Checker to verify that your text-on-background combinations meet WCAG contrast requirements.