How to read the wheel
The wheel maps two of the three HSV channels onto a disc. The angle is hue — red at the top, then yellow, green, cyan, blue and magenta going clockwise. The distance from the centre is saturation: white at the middle, fully saturated at the rim. Brightness is the third dimension and cannot fit on a flat disc, so it lives on the ring around the wheel — and dragging its handle redraws the whole disc, so what you see is always the actual slice of colour space you are working in.
Every colour in the palette sits on the disc as a white marker. Drag the large one and the whole harmony rotates with it, keeping the angles between the colours intact; drag a small one and only that colour moves, which switches the palette to Custom.
That is worth stressing because most online colour wheels draw a fixed 50%-lightness disc and let the control change only the selected swatch. Here the wheel and the ring stay in sync, so a dark scheme is picked from a dark wheel.
The harmonies, and when each one works
- Complementary — two hues 180° apart. Maximum contrast, which makes it excellent for a single accent against a dominant colour and terrible for two large areas, where it vibrates.
- Analogous — three neighbouring hues, 30° apart. The most forgiving scheme; it cannot clash because the hues share a region of the wheel. Standard choice for gradients, illustrations and calm interfaces.
- Triadic — three hues 120° apart. Vivid and balanced in theory, hard to control in practice. Give one hue 60% of the area, the second 30%, the third 10%.
- Split complementary — the base plus the two neighbours of its complement. Keeps most of the contrast of a complementary pair without the harshness, which is why it is the usual recommendation for beginners.
- Tetradic — two complementary pairs. The richest and the easiest to get wrong; it needs one clearly dominant colour or it reads as noise.
- Monochromatic — one hue at several lightness levels. Never clashes, and it is how almost every interface builds hierarchy. What it lacks is a focal point, so it usually needs one accent from elsewhere on the wheel.
Contrast is not optional
Each palette block labels itself in black or in white, whichever the WCAG relative-luminance formula says will read better — a quick check on whether a colour is light or dark enough to carry text at all. The thresholds that matter: 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AA A. A ratio below 3:1 should not carry text at all, whatever the brand guidelines say.
The common failure is a mid-tone brand colour — a medium blue or green around 50% lightness — which lands near 3:1 on both white and black. Such a colour works as a fill or a border but never as text. If a colour looks equally awkward on white and on black, that is what is happening, and the fix is to move brightness on the ring rather than hue on the disc.
Formats, briefly
HEX and RGB describe the same thing — additive light channels — and are what browsers ultimately use. HSL is the format to edit in, because adjusting lightness or saturation is one number instead of three. HSV — the space the wheel itself works in — matches the pickers in Figma and Photoshop. CMYK is for print, and the value here is an approximation rather than a colour-managed conversion.
Privacy
The wheel is rendered on a canvas in your browser and every conversion is local arithmetic. Nothing is uploaded and nothing is stored.
Frequently asked questions
What is the difference between HSL and HSV?
Both use hue and saturation, but the third channel differs. In HSL, 100% lightness is always white and 50% is the pure hue. In HSV, 100% value is the pure hue at full brightness and there is no white without dropping saturation. HSL is more intuitive for building tints and shades; HSV matches how most colour pickers in design software behave.
Why does CMYK look different from what I see on screen?
CMYK is subtractive — ink absorbing light — and its gamut is smaller than a screen's RGB gamut. Saturated blues, greens and oranges simply cannot be reproduced in print. The conversion here is the standard naive formula, which is right for a rough idea but not colour-managed. For production printing, convert in software with the actual ICC profile of the press and paper.
What do WCAG contrast ratios mean?
They compare the relative luminance of two colours — usually your colour against white or against black. For normal body text you need at least 4.5:1 to meet WCAG AA and 7:1 for AAA. Large text (18pt or 14pt bold) needs 3:1 for AA. If both ratios are low, the colour is a mid-tone and will not work as a text colour on either background.
Which harmony should I use?
Analogous is the safest for backgrounds and gradients because the colours share a hue neighbourhood and never fight. Complementary gives you maximum contrast, which is what you want for a call-to-action against a dominant brand colour. Triadic is vivid and hard to balance — use one colour dominantly and the other two sparingly. Monochromatic never clashes and is the usual answer for interface hierarchy.