Color Wheel
Harmony colors
#00ffff — 180°
#ff0000 — 0°
How to read the wheel
The ring represents every hue at full saturation, arranged the way a traditional color wheel is drawn. The larger marker is your base color; the smaller markers show where its harmony partners fall, computed at the same saturation and lightness as the base so the relationship is easy to see. The dashed shape connecting them is the harmony itself: a straight line for complementary pairs, a triangle for triadic, a rectangle for tetradic, a square for square — the geometry is the rule.
Which shape to reach for: the line (complementary) maximizes tension between two roles; the tight arc (analogous) keeps everything calm and related; triangles (triadic and split-complementary) balance three roles; four-point shapes offer the widest range and are the easiest to overdo — let one corner dominate. The full angle math is in Color Harmony 101, and any set here can be opened directly in the palette generator for scales, exports, and a full accessibility report.
Frequently asked questions
Art class uses the painters' RYB wheel, built for mixing pigments; digital tools use the HSL/RGB hue wheel, built on how screens make color. On the RYB wheel red opposes green; on the digital wheel red (0°) opposes cyan (180°). Neither is wrong — they model different media. This wheel is the digital one, matching what CSS and design software compute.
Harmony rules guarantee a structured hue relationship, not taste or readability. They're a starting point that avoids arbitrary combinations — you still choose saturation, lightness, and proportions, and you still need to verify text pairings in the contrast checker.
Position on the hue wheel, 0-360°: red sits at 0°, green around 120°, blue around 240°. Harmony rules are just angle offsets from your base — a complement is +180°, triadic partners are ±120°, analogous neighbors ±30°.
So the hue relationship is the only variable — that's what makes the comparison meaningful. In a real design you'd then vary lightness per role (dark text tone, light background tone), which the palette generator's design-scale does from any of these colors.
Related tools
HEX to RGB Converter
Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.
Try it → ColorsDelta E Calculator
Calculate the perceptual color difference (Delta E) between two colors, with a plain-language interpretation of how noticeable it is.
Try it → ColorsImage Color Picker
Upload an image, click anywhere to sample the exact pixel color, and extract a dominant color palette — entirely in your browser.
Try it →Ready to find your perfect palette?
Start from any color and let real color theory do the rest — or warm up with today's puzzle.