What's the difference between these harmonies?

Complementary uses the colour 180° opposite on the wheel - maximum contrast, useful for accents on calls to action. Analogous uses 30° neighbours - low-contrast, calming, great for backgrounds. Triadic picks three evenly spaced colours (120° apart) - vibrant and balanced. Tetradic adds a fourth, giving you two pairs of complements - rich but harder to balance. Monochromatic varies lightness and saturation while keeping the same hue - the most cohesive option.

How are these computed?

The hex is converted to HSL, then the hue is rotated by fixed offsets per harmony (180° for complementary, +/-30° for analogous, +/-120° for triadic, +60/+180/+240 for tetradic). Saturation and lightness are kept constant so the variants feel like they belong together. Monochromatic instead keeps the hue and steps lightness from 90% down to 20%.

Why HSL instead of HSV or LCH?

HSL is the colour space CSS knows natively and matches how most designers think about colours ("a darker version of this", "the opposite of that"). LCH would give more perceptually-uniform steps but isn't supported in every design tool yet. HSL is the pragmatic middle ground - good enough for ideation, with stable cross-tool output.

Will these palettes pass WCAG contrast?

Not necessarily - colour harmony and accessibility are different questions. Two colours can be harmonious and still have insufficient contrast for text. After picking a palette, drop each text/background pair into the contrast checker. The shade generator helps too: most palettes need pinned light and dark variants for body copy, not the saturated mid-tones a harmony returns.

Should I start from my brand colour or a random hue?

Brand colour, almost always. The generator helps you find supporting colours that work with what you already have. Starting from a random hue gives you a pretty palette with no anchor, which usually means you redesign the brand to match the palette instead of the other way around.

Générateur de palette de couleurs

Générez des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques à partir de toute couleur de base.

Fonctionne dans votre navigateur

Une couleur de base, cinq palettes. Le générateur applique les harmonies classiques - complémentaire, analogue, triadique, tétradique, monochromatique - sur le hex que vous tapez. Chaque ligne montre la palette complète, l'échantillon de base mis en avant et les autres dérivés par rotation de teinte en HSL. Cliquez sur un échantillon pour copier son hex.

Couleur de base

Complémentaire

Analogue

Triadique

Tétradique

Monochromatique

Cliquez sur un échantillon pour copier son hex.

Comment l'utiliser

Set the base colour
Use the picker or paste a hex. The five palette rows recompute instantly.
Scan the harmonies
Each row is one harmony. Pick the one whose energy matches the project - calm (analogous), bold (triadic), iconic (complementary).
Copy what you need
Click any swatch to copy its hex value to the clipboard. The base swatch is marked.
Validate against text
Drop the colours you picked into the contrast checker to make sure they meet WCAG for the text sizes you use.

Qu'est-ce que c'est ?

A colour-palette generator takes one base colour and produces multiple harmonic schemes by rotating its hue on the colour wheel. The traditional harmonies - complementary, analogous, triadic, tetradic, monochromatic - come from 19th-century colour theory and remain the basis of most design-system colour pickers (Material, Adobe, Tailwind, IBM Carbon). They give you a starting point that's guaranteed not to clash, even before you tune brightness and saturation.

Quand l'utiliser

Picking accent colours for a brand whose primary is fixed, designing a chart palette where each series needs to be distinct, choosing supporting colours for a marketing page from a single brand colour, sketching mood boards before committing to a full design system, and teaching yourself which hues read well together by experimenting with a slider.

Erreurs courantes

Treating the generator's output as the final palette - it's a starting point. You'll usually need to tune lightness per swatch for legibility, swap one swatch for a near-neighbour that matches the brand, and add neutral greys (the harmonies don't produce greys). Picking a palette without testing against the actual backgrounds it'll sit on - colours read differently against white, beige and dark surfaces.

FAQ

What's the difference between these harmonies?: Complementary uses the colour 180° opposite on the wheel - maximum contrast, useful for accents on calls to action. Analogous uses 30° neighbours - low-contrast, calming, great for backgrounds. Triadic picks three evenly spaced colours (120° apart) - vibrant and balanced. Tetradic adds a fourth, giving you two pairs of complements - rich but harder to balance. Monochromatic varies lightness and saturation while keeping the same hue - the most cohesive option.
How are these computed?: The hex is converted to HSL, then the hue is rotated by fixed offsets per harmony (180° for complementary, +/-30° for analogous, +/-120° for triadic, +60/+180/+240 for tetradic). Saturation and lightness are kept constant so the variants feel like they belong together. Monochromatic instead keeps the hue and steps lightness from 90% down to 20%.
Why HSL instead of HSV or LCH?: HSL is the colour space CSS knows natively and matches how most designers think about colours ("a darker version of this", "the opposite of that"). LCH would give more perceptually-uniform steps but isn't supported in every design tool yet. HSL is the pragmatic middle ground - good enough for ideation, with stable cross-tool output.
Will these palettes pass WCAG contrast?: Not necessarily - colour harmony and accessibility are different questions. Two colours can be harmonious and still have insufficient contrast for text. After picking a palette, drop each text/background pair into the contrast checker. The shade generator helps too: most palettes need pinned light and dark variants for body copy, not the saturated mid-tones a harmony returns.
Should I start from my brand colour or a random hue?: Brand colour, almost always. The generator helps you find supporting colours that work with what you already have. Starting from a random hue gives you a pretty palette with no anchor, which usually means you redesign the brand to match the palette instead of the other way around.