ColorKitFree interactive color wheel
Color wheel with every angle labelled
Drag the marker anywhere on the ring and read its hue in whole degrees; six classic relationships are then drawn as angles from wherever you left it, each partner carrying its offset, its hex and the sector it lands in. This is the reference rather than the generator — it exists to show where a color sits and what the geometry calls its neighbors, which is 180° for the opposite, 120° for a triad and 30° either side for analogous. Free, no signup, and the twelve labelled sectors are the sRGB ones, so 180° reads as cyan rather than the green a paint wheel would put there.
- 100% free
- No signup
- 360° drag
- 6 relationships
- 12 named sectors
Marker at 221° — the azure sector of the sRGB circle
Press Ctrl+V anywhere on the page to drop in a hex code to move the marker to its hue — no need to click the field first.
A diameter. Two points at opposite ends of the same straight line through the hub.
- base#2562E4hsl(221, 78%, 52%) · 221° azure
- +180°#E4A825hsl(41, 78%, 52%) · 41° orange
The strip is the same 2 hues with the geometry taken away, which is how they will reach a reader.
How to read a color wheel
Three steps from a hue to the angles around it and the codes at each one.
Put the marker on a hue
Press anywhere on the ring and drag: the orange-ringed marker follows your pointer and the read-out under the wheel gives the angle in whole degrees together with the name of the 30° sector it fell in. From the keyboard the ring is a slider — Tab to it, then an arrow key moves one degree and Shift plus an arrow moves fifteen, which is half a sector. If you already have a value, paste it and the marker jumps to its hue.
Choose the geometry you want drawn
The six buttons switch which shape is inscribed on the ring: a diameter for complementary, an isosceles triangle for split complementary, a 60° arc for analogous, an equilateral triangle for triadic, and two crossing diameters for the tetradic rectangle or the square. Extra markers appear on the rim at the angles the shape puts them, so the relationship is visible as geometry before it is a list of codes.
Read the angles off, then take the codes
Each partner is listed with its offset written the way it is spoken — base, +120°, −30° — and with the hex, the hsl() value and the sector its own hue lands in. The saturation and lightness sliders move every marker together, because a harmony is defined on hue and nothing else; drop lightness to 30% and you get the same relationship as a set of deep tones.
Technical specifications
| Hue resolution | 360 addressable positions, one per whole degree; arrow keys step 1°, Shift plus an arrow steps 15° |
|---|---|
| Relationships drawn | Six — complementary at 180°, split complementary at 150° and 210°, analogous at −30° and +30°, triadic at 120° and 240°, tetradic at 60°, 180° and 240°, square at 90°, 180° and 270° |
| Sector marks | 12 at 30° intervals, named for the sRGB circle: red, orange, yellow, chartreuse, green, spring green, cyan, azure, blue, violet, magenta, rose |
| Ring rendering | A CSS conic gradient of 24 stops at 15° each, running clockwise from red at twelve o'clock |
| Partner arithmetic | Hue rotated in HSL; saturation and lightness are copied from the base so the only difference between markers is angle |
| Sliders | Saturation 0–100%, lightness 5–95%, both applied to every marker simultaneously |
| Read-out per partner | Signed offset in degrees, uppercase hex, hsl() value and the sector name |
| Price | Free, no signup, and nothing is stored between visits |
Frequently asked questions
Why does this wheel put cyan opposite red instead of green?
Because it is a wheel of light, not of pigment. On the sRGB circle that CSS, your monitor and every hex code live on, red and cyan are the pair that adds up to white — #ff0000 plus #00ffff is #ffffff channel by channel. The painter's wheel that puts green opposite red is a red-yellow-blue model describing how pigments subtract light, formalised by Itten at the Bauhaus and still taught in art schools. Neither is wrong; they answer different questions, and a stylesheet only understands the first one.
What are the numbers printed inside the ring?
They are the twelve sector boundaries at 30° intervals, from 0 at the top clockwise to 330. The sector names on the sRGB circle run red, orange, yellow, chartreuse, green, spring green, cyan, azure, blue, violet, magenta and rose — six of those are the primaries and secondaries of additive light, and the other six are the tertiaries between them. They are printed because a wheel with no gradations is a picture rather than an instrument.
Which way round does the angle run?
Clockwise from red at twelve o'clock, so 90° is chartreuse, 180° is cyan and 270° is violet. That matches the hue axis in hsl() and the default direction of a CSS conic-gradient, which is what draws the ring, so an angle read here can be typed straight into a stylesheet without conversion. A color picker in a design tool often draws the same circle rotated or mirrored, and the degrees will disagree even though the colors do not.
Why do the saturation and lightness sliders move all the markers at once?
Because a harmony is a statement about hue and only about hue, so the partners have to be sampled at the same saturation and lightness as the base or the comparison means nothing. Dropping both sliders gives the same six angles rendered as muted deep tones; raising lightness to 90% gives the same six as pastels. If you want the members of a set to differ in lightness rather than share it, that is a palette, not a harmony.
Is a square scheme just a tetradic scheme?
A square is the special tetrad whose two diameters cross at a right angle, giving offsets of 0, 90, 180 and 270. The general tetradic option here crosses them at 60° instead, which makes a rectangle: the four hues still pair off into two complementary couples, but two of them sit close together and read as a dominant family with two accents. The rectangle is easier to use for exactly that reason — a square gives four hues with equal claim to attention and no obvious lead.
Why do two hues 30° apart look further apart in the yellows than in the blues?
Because hue in HSL is a linear remap of the RGB color cube and not of human vision. The circle spends 60° on the whole of the yellows, where the eye can resolve a great many distinct steps, and another 60° between 240° and 300° in the blues and violets, where it can resolve far fewer. Equal angles are therefore not equal perceptual distances, which is why a set that looks well spaced on the ring can still contain two members nobody can tell apart.
Can I drive the wheel from the keyboard?
Yes — the ring is exposed as a slider with its current hue and sector announced, so a screen reader says "221 degrees, azure" rather than reading out a graphic. Tab moves focus to it, the left and right arrows step one degree, the up and down arrows do the same, and holding Shift makes every press worth fifteen degrees. The saturation and lightness sliders and the six relationship buttons are ordinary form controls and follow in tab order after it.
About the wheel and what its angles mean
A color wheel is one idea: take hue, which has no natural start or end, and lay it out as a circle so that a relationship becomes an angle. Newton drew the first one in the Opticks of 1704, and he bent the spectrum round specifically to close the gap between violet and red — a gap that exists because there is no single wavelength for magenta. Magenta is what the eye reports when the long-wavelength and short-wavelength cones fire together with nothing in between, so it belongs on the circle but not on the spectrum. Every wheel since has inherited that closure, and it is the reason hue wraps at 360 and the reason “half a turn away” is a sentence that means anything at all. If you want the raw codes rather than the geometry, the hex code chart lists the named ones in full.
Which wheel you are looking at decides what sits opposite what, and the two common answers are both defensible. This one is the additive circle: hue as hsl() defines it, with red at 0°, green at 120° and blue at 240°, and cyan, magenta and yellow filling the gaps between them. The wheel taught in art classes is the subtractive red-yellow-blue model, where the secondaries are orange, green and purple and red pairs with green. That model describes pigment, which removes wavelengths rather than adding them, and it survives because it predicts what happens when two paints are stirred together. Nothing in a browser knows about it, so the angles here are the ones your stylesheet will honour — and the complementary color page takes the 180° case apart in detail, while the scheme generator turns a single hue into the roles an interface needs.
The wheel has one limitation worth knowing before you trust it. Equal angles are not equal perceptual steps: HSL hue is a linear remap of the edges of the RGB cube, so the circle allocates a fixed 60° to the yellows, where the eye distinguishes a great many shades, and another fixed 60° to the blue-violet range, where it distinguishes far fewer. A triad looks evenly spaced on the ring and can still contain two members that read as the same color on a chart. Perceptually even spacing comes from LCH instead, which is what the palette generator uses for its monochromatic ramp and what the shades table compares against the plain HSL version.
Where the wheel does its arithmetic
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
This page is unusual on the site in keeping nothing at all — no swatch list, no local storage key, no history. Move the marker and the position it left is gone, and reloading returns the ring to 221°.