What is color harmony?

Color harmony refers to combinations of colors that are visually pleasing based on their positions on the color wheel. Complementary (opposite), Triadic (three evenly spaced), Tetradic (four in a rectangle), and Analogous (adjacent) are the most common harmony schemes.

HSL stands for Hue, Saturation, and Lightness. Hue is the color angle (0–360°), Saturation is the intensity (0–100%), and Lightness is the brightness (0% = black, 100% = white, 50% = full color). HSL is more intuitive than RGB for selecting and adjusting colors.

How do I use the exported CSS variables?

The exported CSS uses custom property syntax: --color-1: #hexcode; Place these inside a :root { } block in your stylesheet to make them available globally. Reference them elsewhere with var(--color-1).

Why does the wheel look different from other color wheels?

This wheel is drawn in HSL space where saturation decreases toward the center and hue changes around the circumference. Some tools use HSV (Value) or paint-mixing models instead, which produce a slightly different appearance.

Design Gratis Sin registro

Color Wheel

Interactive HSL color wheel with harmony suggestions and palette export.

Cargando la herramienta…

Acerca de esta herramienta

An interactive canvas-based HSL color wheel that lets you click anywhere to select a color. The selected color is immediately shown with its hex, RGB, and HSL values. Four harmony modes — Complementary, Triadic, Tetradic, and Analogous — automatically calculate related colors to form a balanced palette. Swatches for each harmony color are displayed with their hex codes. Export your entire palette as CSS custom properties (variables) with one click. Useful for designers choosing color schemes, developers implementing design tokens, and anyone exploring color relationships.

Cómo usar

1 Click anywhere on the color wheel to select a hue and saturation.
2 Adjust the lightness slider below the wheel to change brightness.
3 View the selected color's hex, RGB, and HSL values.
4 Choose a harmony mode: Complementary, Triadic, Tetradic, or Analogous.
5 Swatches for the harmony colors appear with their hex codes.
6 Click Export CSS to copy the palette as CSS custom properties.

Preguntas frecuentes

Herramientas relacionadas

Color Palette from Image

Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.

Verificador de Contraste de Color

Verifique las relaciones de contraste WCAG 2.1 para pares de colores de primer plano/fondo y obtenga resultados de aprobado/reprobado al instante.

Conversor de colores (HEX, RGB, HSL)

Convierte colores entre HEX, RGB, HSL, HSV y CMYK — con vista previa en tiempo real.

Selector de gradiente de color de múltiples paradas

Cree hermosos gradientes CSS de múltiples paradas visualmente con paradas de arrastrar y soltar.

Generador de códigos QR

Construya visualmente gradientes CSS lineales y radiales y copie la propiedad CSS lista para usar.