Color Wheel

1. Find your color's hue angle. The H in its HSL value is its position on the wheel in degrees, and the HEX to HSL converter gives it straight away.
2. Type the color into the field under the wheel, or drag the large circle to it. The angle around the wheel is the hue, the distance from the center is the saturation, and the outer ring sets the brightness.
3. Choose a harmony from the menu: analogous (±30°), complementary (180°), split complementary (150° and 210°), triadic (120° steps), tetradic or square (90° steps). The smaller circles mark its partners, and dragging any circle turns the whole set.
4. Compare the resulting angles with the reference points below to see which hue families you landed in.
5. Click a swatch to copy it, or export the palette as CSS, SCSS or JSON.

For example, tomato, #ff6347, is hsl(9, 100%, 64%), so it sits at 9°, just past red on the way to orange. Directly across the wheel, at 189°, is a cyan leaning slightly toward blue.

The HSL wheel starts at red, 0°, and moves through the spectrum in 60° steps: yellow at 60°, green at 120°, cyan at 180°, blue at 240° and magenta at 300°, returning to red at 360°. A few CSS named colors sit on the angles in between: chartreuse (#7FFF00) is at about 90° and springgreen (#00FF7F) at about 150°. The names don't always follow the wheel, though. CSS azure is #F0FFFF, an almost-white cyan, not the 210° blue that color theory calls azure.

Hue numbers also differ between color models. Pure red is 0° in HSL but about 29° in OKLCH, where it is written oklch(62.8% 0.2577 29.23). Don't paste an HSL hue into an oklch() value and expect the same color.

Two wheels are in common use, and they disagree about opposites. The digital wheel is built from light, the red, green and blue channels of every screen pixel. The traditional painter's wheel, used in art education and in Itten's color theory, is built from pigment, with red, yellow and blue as primaries.

• Digital (RGB and HSL): primaries red, green and blue; secondaries cyan, magenta and yellow; tertiaries at 30°, 90°, 150°, 210°, 270° and 330° (orange, chartreuse, spring green, azure, violet and rose). Red is opposite cyan, green opposite magenta, blue opposite yellow.
• Painter's (RYB): primaries red, yellow and blue; secondaries orange, green and violet; tertiaries red-orange, yellow-orange, yellow-green, blue-green, blue-violet and red-violet. Red is opposite green, yellow opposite violet, blue opposite orange.

This tool computes on the digital wheel because CSS, design software and screens all work in RGB. If a paint chart names a different complement, the RYB wheel is the reason; each answer is right for its medium. To choose between schemes built on these angles, see the color harmony generator.

Warm hues run from red through orange to yellow, roughly 0° to 60° on the HSL wheel, plus the red-leaning magentas from about 330° to 360°. Cool hues cover green, cyan, blue and violet, roughly 120° to 270°. Yellow-green and purple sit on the border and read warm or cool depending on their neighbors.

Warm colors tend to advance and grab attention, which is why sale badges, alerts and many calls to action are red or orange. Cool colors recede and feel calm, a common choice for backgrounds, navigation and finance or health brands. Temperature works on neutrals too: a gray tinted toward blue, such as slategray at 210°, reads cooler than a pure gray.