Color Palette Generator

Pick a base colour and generate a harmonious palette — complementary, analogous, triadic and more.

Ad
Copy all as:
Ad

What is Colour Harmony?

Colour harmony is the principle that certain combinations of colours are naturally pleasing to the eye. These combinations come from the relationships between colours on the colour wheel. Complementary colours sit opposite each other and create high contrast. Analogous colours are adjacent and feel cohesive. Triadic colours form an equilateral triangle and offer balanced variety. Monochromatic schemes use tints and shades of a single hue for a refined, minimal look.

This generator computes each harmony mathematically using HSL colour space, giving you accurate results for any base colour. Click any swatch to copy its individual value, or use Copy All to export the palette in HEX, RGB, HSL, or CSS custom property format.

How to Use

  1. Click the colour swatch to pick your base colour.
  2. Select a harmony type: Complementary, Analogous, Triadic, Tetradic, Monochromatic or Split-complementary.
  3. Click any individual swatch to copy its HEX value.
  4. Choose a format (HEX, RGB, HSL, CSS vars) and click ⿻ Copy All to copy the full palette.
  5. Click 🔀 Randomise to jump to a random base colour for inspiration.

Frequently Asked Questions

Split-complementary uses your base colour plus the two colours adjacent to its complement (rather than the complement itself). This gives you the high-contrast benefit of a complementary scheme with less tension, making it easier to work with in design. For example, if your base is blue, its complement is orange — but split-complementary uses yellow-orange and red-orange instead.

For design tokens and theming, CSS custom properties (variables) are the most maintainable — they let you reference colours by name and change the whole palette by updating one file. For quick use, HEX is the most widely recognised. HSL is the most human-readable and easiest to reason about when adjusting lightness or saturation.

No. Everything runs entirely in your browser. Nothing is sent to any server.
🎨Color PickerConvert HEX, RGB, HSL and more 🌈CSS Gradient GeneratorBuild linear and radial CSS gradients 🟠Button Gradient GeneratorDesign gradient buttons with CSS 🔲Box Shadow GeneratorBuild CSS box-shadow visually 📐Flexbox PlaygroundExperiment with CSS Flexbox layouts 🛠️All CSS ToolsBrowse all CSS & design utilities
Ad