← All tools
// Design / Color

Color Palette Generator online

Generate complementary, triadic, analogous palettes from any base color

Color Palette Generator logo
by
CHUNKY
MUNSTER

How to Use color-palette-generator

  1. Enter a base colour (HEX, RGB, or HSL) or pick one from the colour wheel.
  2. Select a harmony type: Complementary, Triadic, Analogous, Split-Complementary, or Tetradic.
  3. The palette generates instantly — 4–6 colours with swatches and copyable HEX values.
  4. Adjust saturation and lightness offsets to fine-tune the palette to your taste.

Colour theory describes harmonic relationships between colours based on their positions on the colour wheel. Complementary pairs sit opposite each other (maximum contrast); triadic schemes use three equally-spaced colours; analogous schemes use adjacent colours for a natural, cohesive look. This generator applies these formulas to any base colour, instantly producing a palette with copyable values.

Colour Harmony Types Explained

Complementary: base colour + colour directly opposite (180°). High contrast, vibrant — good for call-to-action buttons against brand colour. Analogous: three colours spaced 30° apart — natural and serene. Good for backgrounds and neutral palettes. Triadic: three colours 120° apart — balanced yet colourful. Split-complementary: base + two colours 150° away — softer than complementary, more dynamic than analogous. Tetradic: four colours 90° apart — maximum variety; usually one colour dominates.

Frequently Asked Questions

What is colour theory in design?

Colour theory is a body of principles for combining colours aesthetically and meaningfully. It includes the colour wheel, colour harmony models, and the psychological associations of different hues — foundational knowledge for UI design, branding, and visual communication.

What is the best palette for a professional website?

There is no universal answer, but common approaches: pick one strong accent colour and pair it with a neutral background (white, off-white, or dark grey). Use one analogous or complementary colour for secondary actions. Limit to 3–4 colours in total.

How do I ensure my palette is accessible?

Test every foreground/background pair with the Color Contrast Checker. At minimum, text colours must achieve a 4.5:1 contrast ratio against their backgrounds (WCAG 2.1 AA).

What is HSL and why does the generator use it?

HSL (Hue, Saturation, Lightness) maps directly to the colour wheel. Hue is the angle (0–360°), making it trivial to compute colour harmonies by adding 60°, 90°, 120°, etc. RGB arithmetic would give the same results but requires much more complex intermediate calculations.

See also the Color Mixer, Color Contrast Checker, and the CMYK Converter.