Color Wheel
Choose a base color, adjust its CSS hue, saturation, and lightness, then copy a complementary, analogous, or triadic harmony.
Harmony colors
Harmony roles are retained even when achromatic colors, lightness endpoints, or 8-bit channel rounding produce duplicate values.
Some roles have the same final sRGB value; each geometric role remains listed.
How to use the color wheel
- Choose an opaque color with the native color control, enter strict HEX, or adjust the whole-number HSL sliders.
- Select complementary, analogous, or triadic harmony.
- Copy one canonical format or use Copy Harmony for a line-feed-separated HEX list.
Color harmony angles
The complementary result contains the base hue and the hue 180° opposite it. Analogous results use −30°, the base hue, and +30°. Triadic results use the base hue plus 120° and 240°. Hue wraps around 360° while saturation and lightness keep their full internal precision.
For the default #3366CC base, the complementary HEX values are #3366CC and #CC9933. The analogous values are #33B3CC, #3366CC, and #4D33CC. The triadic values are #3366CC, #CC3366, and #66CC33.
HEX, RGB, and CSS HSL output
This tool uses opaque encoded sRGB and the CSS HSL model. HEX output is uppercase #RRGGBB, RGB output uses integer channels from 0 through 255, and HSL is re-derived from the final integer RGB channels and rounded to whole numbers for display.
The colored wheel is a visual guide. The native color control and numeric HSL ranges are the authoritative inputs. Different displays can show the same numeric color differently.
Duplicate roles and privacy
Geometric roles remain visible even when their final colors match. This happens for achromatic colors such as black, white, and gray, and can happen when conversion reaches the same 8-bit channel values.
All conversion happens in this browser tab. The tool does not upload, store, randomize, download, or put color values in the URL. It does not assess contrast or use an artist-oriented RYB wheel.
Frequently asked questions
What does this color wheel calculate?
It rotates the base hue by fixed angles while preserving the base saturation and lightness: 180 degrees for a complement, 30 degrees on either side for analogous colors, and 120-degree steps for a triad.
Why can two harmony colors be identical?
Black, white, and gray have no visible hue. Some other colors can also meet at the same final 8-bit sRGB value after channel rounding. The tool keeps every geometric role so the harmony structure stays explicit.
Which color formats can I copy?
Each result includes uppercase six-digit HEX, integer RGB, and rounded CSS HSL. Copy Harmony produces the visible HEX values in order, separated by line feeds.
Are my colors uploaded or saved?
No. The selected color and harmony remain in this page's memory and are cleared when the page lifecycle resets. Values are not added to URLs, storage, cookies, or analytics.