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 無料サインアップ不要

Color Wheel

Interactive HSL color wheel with harmony suggestions and palette export.

ツールを読み込み中…

このツールについて

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.

使い方

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.

このツールについて

使い方

よくある質問