Color wheel
Drag the big handle to choose a base color. The other handles follow your harmony rule, so you can see exactly why the colors belong together.
Preview
Ship the release notes your users actually read.
Body text in your darkest color on your lightest: 18.52:1 AA pass
Export
:root {
--color-chocolate: #E4572E;
--color-limegreen: #2EE457;
--color-blue-violet: #572EE4;
}Reading the color wheel
The wheel arranges hues by angle: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240° and magenta at 300° on the RGB wheel. The distance from the centre is saturation: grey in the middle, fully saturated at the rim. Harmony rules are nothing more than fixed angles between handles — which is why the shape drawn between them (a line, a triangle, a square) is a good memory aid.
Isaac Newton first bent the spectrum into a circle in Opticks (1704); the painter’s red-yellow-blue wheel came from pigment mixing and is still taught in art schools. Screens mix light, so for web and app work the RGB wheel predicts what you will see.
Harmony guarantees that hues relate, not that text is readable. Check the lightness difference with the contrast checker before you ship.
Frequently asked questions
How do I use the color wheel?
Drag the large handle around the wheel to change hue, and toward or away from the centre to change saturation. Pick a harmony rule and the other handles follow at the right angles. Use the lightness slider to make the whole scheme darker or lighter.
What is the difference between the RGB and RYB color wheel?
The RGB wheel is based on light (red, green and blue primaries) and is what screens use. The RYB wheel is the traditional painter’s wheel with red, yellow and blue primaries. Complements differ: blue’s complement is yellow on RGB but orange on RYB. Switch between them with the toggle.
Which harmony rule should I choose?
Complementary for maximum contrast, analogous for calm, triadic for playful balance, split-complementary for contrast with less tension, tetradic for rich illustrations and monochromatic for a minimal, cohesive look.
Can I use the colors in code?
Yes: click any chip to copy its hex, or use the export box for CSS variables, Tailwind or JSON.