Color Wheel
Pick a base color and generate a complementary, analogous, triadic, tetradic, or monochromatic palette. Runs entirely in your browser.
Harmony:
Saved Palettes
Lost when you refresh or leave this page.
Where the Color Wheel Comes From
Every harmony rule on this page, complementary, analogous, triadic, traces back to the same idea: arranging color as a circle instead of a line.
Newton's Circle
Isaac Newton bends the visible spectrum into a loop in his book Opticks, the first time hues were arranged as a circle rather than a straight line, with violet curving back around toward red.
Goethe's Theory of Colours
Johann Wolfgang von Goethe pushes back on Newton, arguing color is about how the eye perceives contrast and opposition, an early argument for what we'd now call complementary pairs.
Itten's Twelve Hues
At the Bauhaus, Johannes Itten formalizes a twelve-hue wheel and names the harmony rules, complementary, triadic, analogous, still taught in design schools today.
Paint to Pixels
The same geometry now runs as math. HSL color space in CSS and design software swaps pigment-mixing rules for hue-angle calculations, like the wheel above.
Common Questions
What is a color wheel used for?
A color wheel arranges hues by angle around a circle, which makes it easy to spot color relationships (like which colors sit opposite or beside each other) that are hard to judge by eye. Picking a base color and applying a harmony rule is a fast way to generate a palette that's color-theory-sound instead of guessed at.
What is a complementary color palette?
Two hues directly opposite each other on the wheel, 180 degrees apart, like blue and orange. It's the highest-contrast pairing you can make, which is why it's a common choice for anything that needs to stand out.
What is an analogous color palette?
A cluster of hues that sit close together on the wheel, typically within 30 degrees of each other. Because the hues are neighbors, the result reads as harmonious and low-contrast rather than clashing.
What is a triadic color palette?
Three hues spaced evenly around the wheel, 120 degrees apart. It keeps the vibrancy of high-contrast color choices while staying more balanced than a straight complementary pairing.
What is a tetradic color palette?
Four hues spaced 90 degrees apart around the wheel, effectively two complementary pairs at once. It gives the richest variety of any harmony rule here, but also the most colors to balance in one palette.
What is a monochromatic color palette?
A single hue held constant while lightness (and this tool's saturation slider) varies across it. There's no risk of clashing hues since it's technically one color, and the contrast comes entirely from light and dark.
Why are there hue, saturation, and lightness sliders too?
Dragging on the wheel sets hue (the angle) and saturation (the distance from center) at once, which is fast but imprecise. The sliders let you dial in an exact numeric value for each channel, including lightness, a third dimension a flat wheel can't show at all, so it's always controlled separately and applied to every color in the generated palette.
Can I save or share a palette?
Yes, two ways. The Copy URL button copies the full page link (like ?p=bright-tetradic-07nzur), which reopens the exact same palette when visited. Clicking the code next to Palette instead copies just that short code on its own, which you can paste into the palette code field up top (or send to someone else to paste in) to load it without a full link. Either action also adds the palette to a Saved Palettes list below it for the rest of your session, so you can flip between a few options without losing any of them.
Is anything I pick sent to a server?
No. Every color calculation runs in your browser with JavaScript. Nothing about the colors you choose is ever sent anywhere.