Color Palette Generator
Generate a full palette — complementary, analogous and triadic colors — from any base hex color.
Was this tool helpful?
Thanks for the feedback!
Enter one base colour as a hex code and this palette generator returns six swatches built with colour-wheel geometry: the base itself, its complementary colour, two analogous neighbours and two triadic partners, each labelled with its hex code. It suits designers, developers and small-business owners who have one brand colour and need matching accents.
How the six colours are calculated
The base colour is converted from RGB to HSL (hue, saturation, lightness). Saturation and lightness are kept exactly as they are, and only the hue angle is rotated around the 360° colour wheel before each result is converted back to hex. For the default base #6d48f5, a violet at roughly hsl(253°, 90%, 62%):
| Swatch | Hue shift | Result |
|---|---|---|
| Complementary | +180° | #d0f548 |
| Analogous | +30° | #c348f5 |
| Analogous | −30° | #487af5 |
| Triadic | +120° | #f56d48 |
| Triadic | +240° | #48f56d |
An orange base such as #e67e22 gives the classic orange-and-blue pairing: its complement is #228ae6, the analogous pair is #e6e022 and #e62228, and the triadic pair is #22e67e and #7e22e6.
Why the swatches do not look equally bright
HSL lightness is a mathematical value, not how bright a colour appears. The violet base and its yellow-green complement share the same 62% lightness, yet the complement's relative luminance is about 0.79 against the base's 0.145, so it looks far lighter. In practice, white text reaches 5.39:1 contrast on #6d48f5 but only about 1.25:1 on #d0f548, which is unreadable. Put dark text on light-looking swatches, and test any text and background pair in the Color Contrast Checker before using it.
Choosing a harmony for your design
Analogous: calm and cohesive
The ±30° neighbours sit close to the base, so they blend well for section backgrounds, illustrations and gradients. They offer little contrast among themselves, so pair them with a neutral for text.
Complementary: maximum contrast
The opposite hue grabs attention, which makes it good for a single call-to-action button, a sale badge or a chart highlight. Used over large areas it quickly becomes loud.
Triadic: lively but balanced
Three evenly spaced hues work well for charts, infographics and playful brands. Let one colour dominate and use the other two as small accents.
A common guideline is 60-30-10: about 60% of the interface in a neutral or dominant colour, 30% in a secondary colour and 10% in the accent. Choosing one harmony and applying it this way looks more deliberate than using all six swatches at once.
Limits worth knowing
- A grey, white or black base has zero saturation, so rotating its hue changes nothing and all six swatches come out identical.
- Only complementary, analogous and triadic sets are produced. Split-complementary (±150°) and tetradic (90° steps) schemes are not included.
- Each swatch is a single flat colour. For lighter and darker versions of any swatch, paste its hex code into the Shades & Tints Generator.
- Input must be a three- or six-digit hex code, with or without the #.