What each harmony gives you
Every harmony is a fixed set of angles around the wheel, measured from your starting colour. The tool keeps saturation and brightness the same for every colour in the set, so only the hue changes. Here is what each mode returns for the blue #2563EB:
| Mode | Angles from your colour | Result for #2563EB | Good for |
|---|---|---|---|
| Complementary | 180° | #2664EB, #EBAC26 | One accent that stands out hard against the main colour |
| Split | 150°, 210° | #2664EB, #EB4A26, #C6EB26 | Contrast that is less loud than a straight complement |
| Analogous | −30°, +30° | #2664EB, #26C6EB, #4A26EB | Calm sets: backgrounds, illustrations, charts in one family |
| Triadic | 120°, 240° | #2664EB, #EB2664, #64EB26 | Playful, balanced sets; use one colour as the lead |
| Rectangle | 60°, 180°, 240° | #2664EB, #AC26EB, #EBAC26, #64EB26 | Two complementary pairs, for richer data colours |
| Square | 90°, 180°, 270° | #2664EB, #EB26C6, #EBAC26, #26EB4A | Four evenly spaced hues; hard to balance, striking when it works |
The first colour reads #2664EB, not #2563EB. The wheel stores colours as hue, saturation and brightness in whole percentages, so a typed code can move by one step when it is rounded. On screen the difference is invisible, but if you need the exact brand value, keep using your original code for that colour.
This is a screen wheel, not a paint wheel
Art classes teach a red, yellow and blue wheel, where the opposite of red is green. Screens mix red, green and blue light, and this wheel follows that model. Type #FF0000 and its complement is cyan, #00FFFF. Its triadic partners are pure green and pure blue. If a printed colour guide disagrees with the result here, that difference in models is usually why.
How the controls work
- On the wheel: the angle sets the hue and the distance from the centre sets the saturation. Drag anywhere and the whole set rotates together.
- Lightness bar: it actually controls brightness (the V in HSV), from 10 to 100 percent. Lowering it darkens every colour in the set by the same amount.
- Swatches: click any colour in the result to make it the new starting colour.
- Random: picks a new hue with mid-to-high saturation and brightness, so you do not land on muddy greys.
Copying and sharing
Copy all gives a comma-separated HEX list. CSS vars gives a :root block with --color-1, --color-2 and so on, ready to paste into a stylesheet and rename. The address bar updates with the colours and the mode as you work, so the link reopens the same set. Nothing is sent anywhere; the maths runs on your device.
Questions
Why does grey or black turn slightly red?
A grey has no hue, so there is nothing to rotate. The wheel keeps at least 5 percent saturation and 15 percent brightness so the angles mean something: #808080 becomes #807979, and black becomes #262424. Start from a coloured seed instead.
I need more than four colours.
The wheel returns two to four colours depending on the mode. For five to ten, including lighter and darker versions, use the palette generator and lock the colours you found here.
Can I get these values as RGB or HSL?
Paste any HEX from the set into the colour converter.