Colour palette generator

Generate harmonious colour palettes from any colour

Base colour
#
Enter a hex colour or use the colour picker. Choose a harmony type below.
Harmony type
Palette — click any swatch to copy hex
Colour harmony types explained

Colour harmony is based on the relationships between colours on the colour wheel — a circular arrangement of hues that shows how colours relate to each other. Different spacing patterns between colours produce different visual effects, from energetic contrast to calm cohesion.

Complementary
Two colours directly opposite (180° apart). High contrast, energetic. Use sparingly — effective for accents and CTAs but tiring as a primary palette.
Analogous
Three to five colours adjacent on the wheel (30–60° apart). Calm, harmonious, natural. Ideal for backgrounds, nature themes, and minimal UI.
Triadic
Three colours evenly spaced 120° apart. Vibrant and varied. Works well when one colour dominates and the others accent.
Tetradic
Four colours as two complementary pairs, 90° apart. Maximum variety — complex to balance. Best with one dominant colour and the others as accents.
Monochromatic
Variations of a single hue at different lightness levels. Cohesive, sophisticated, easy to apply. Excellent for professional and minimal designs.
Split complementary
A base colour plus the two colours adjacent to its complement. Less tension than complementary, more variety than analogous. A practical starting point for most designs.
How to use colour palettes in design

Generating a palette is the easy part — using it well takes a few principles. The most reliable approach is the 60/30/10 rule: use your dominant colour for about 60% of the design (backgrounds, large areas), a secondary colour for 30% (cards, sidebars, sections), and an accent colour for 10% (buttons, links, highlights).

Neutrals — whites, greys, and off-blacks — are not generated here but are essential in practice. Most successful palettes pair 2–3 generated colours with 2–3 neutrals. Pure black (#000000) and pure white (#FFFFFF) are rarely used in polished designs; near-black (#111111, #1a1a1a) and off-white (#f5f5f5, #fafafa) look more refined.

Always check your palette against WCAG contrast requirements before finalising — a beautiful palette that fails accessibility is not production-ready. Use the Hex ↔ RGB converter on this site to check contrast ratios for any colour pair.

Frequently asked questions
You might also need
Hex ↔ RGB converter Random number QR code generator All tools
About this tool

This palette generator calculates harmonious colour combinations using HSL colour space and standard colour theory relationships. Enter any hex colour or use the colour picker, choose a harmony type, and copy individual hex codes or the full palette at once. The URL updates automatically so you can share or bookmark any palette.