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.

Generador de paleta de colores

Genera paletas complementarias, análogas, triádicas, tetrádicas y monocromáticas a partir de cualquier color base.

Funciona en tu navegador

Un color base, cinco paletas. El generador aplica las armonías clásicas - complementaria, análoga, triádica, tetrádica, monocromática - sobre el hex que tecleas. Cada fila muestra la paleta completa, con la muestra base destacada y las demás derivadas rotando el tono en HSL. Haz clic en una muestra para copiar su hex.

Color base

Complementaria

Análoga

Triádica

Tetrádica

Monocromática

Haz clic en una muestra para copiar su hex.

Cómo usarla

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é es?

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.

Cuándo usarla

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.

Errores comunes

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.

Preguntas frecuentes

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.