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 Gratuito Sem cadastro

Color Wheel

Interactive HSL color wheel with harmony suggestions and palette export.

Carregando ferramenta…

Sobre esta ferramenta

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.

Como 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.

Perguntas frequentes

Ferramentas 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 Cores

Verifique as taxas de contraste WCAG 2.1 para pares de cores de primeiro plano/fundo e obtenha resultados de aprovação/reprovação instantaneamente.

Conversor de cores (HEX, RGB, HSL)

Converta cores entre HEX, RGB, HSL, HSV e CMYK — com prévia em tempo real.

Seletor de Gradiente de Múltiplas Paradas

Crie belos gradientes CSS de múltiplas paradas visualmente com paradas de arrastar e soltar.

Gerador de QR Code

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.