Color wheel

Drag the ring, or click anywhere on it, to move the base colour. With the ring selected, the arrow keys move it a degree at a time, Shift and an arrow move ten, and Page Up and Page Down move a twelfth of the way round. Tick Snap to the 12 colours to land on the named ones only.

Each scheme below the wheel starts from your base colour. Press Show on the wheel to draw its shape on the ring, and click any swatch to copy its hex code. The slider makes every colour lighter or darker together, so a scheme keeps its balance.

On the RGB wheel you can type a hex code, and the wheel moves to it. Open the base colour in hex to RGB, hex to HSL or hex to CMYK for its other codes.

Complementary colours sit opposite each other on the wheel. Mixed together they cancel out, losing their colour towards grey (complementary colours). Side by side, they give the strongest contrast a wheel has.

Which pairs count depends on the wheel. On the painter's wheel they are red and green, yellow and purple, and blue and orange. On the screen's RGB wheel they are red and cyan, green and magenta, and blue and yellow. In 1828 the chemist Eugène Chevreul, studying how the Gobelins tapestries were made, concluded that complementary colours together beat any other harmony of contrasts. His book on it followed in 1839.

A complementary scheme is loud. Designers often let one colour fill most of the space and use the other for a few accents.

Analogous colours are neighbours on the wheel, usually three of them: red, red-orange and orange is one set (analogous colours). The wheel here takes the base colour and the colours 30 degrees either side, the spacing the colour scheme article gives.

Because the colours share so much, an analogous scheme is calm and easy to get right. It's the scheme of a sunset or a forest. One colour usually leads and the other two support it.

A triad is three colours evenly spaced round the wheel, the base and the colours 120 and 240 degrees from it. The three primaries form a triad, and so do the three secondaries.

Triads are bright and balanced, since no colour is next to another. They can be a lot at full strength. Try the slider to make them lighter, or keep one colour dominant and the others small.

Split complementary takes the base colour and, instead of its complement, the two colours either side of the complement, at 150 and 210 degrees. On the painter's wheel, yellow's complement is purple, so its split complementary colours are red-purple and blue-purple.

It keeps much of the contrast of a complementary pair with less of the clash. Try it when a complementary pair feels too harsh.

A tetradic scheme is four colours made of two complementary pairs. The rectangle uses the base and the colours 60, 180 and 240 degrees round; the square spaces all four evenly, 90 degrees apart (colour scheme).

Four colours are harder to balance than two or three. Let one colour lead and use the others in smaller amounts.

A monochromatic scheme uses one hue only, made lighter or darker. In paint, a tint adds white, a shade adds black and a tone adds grey. The wheel shows two shades and two tints of your base colour.

On the painter's wheel the lighter swatches are the paint with white mixed in, up to three parts white to one of paint, and the darker ones have black, up to one part black to two of paint. On the RGB wheel they are the same hue at a higher or lower HSL lightness.

The primaries are the three colours a wheel starts from. On the painter's wheel they are red, yellow and blue, three equal steps apart. Mix two in equal parts and you get a secondary, which sits halfway between them: orange, green and purple (secondary colour). On the screen's RGB wheel the primaries are red, green and blue, and the secondaries are yellow, cyan and magenta.

The six tertiaries fill the gaps. Today a tertiary means a primary mixed evenly with the secondary beside it (tertiary colour), and each is named after both, primary first: red-orange, yellow-orange, yellow-green, blue-green, blue-purple and red-purple. The RGB wheel's tertiaries have names of their own: orange, chartreuse, spring green, azure, violet and rose.

An older meaning of tertiary is two secondaries mixed, which gives the muted russet, slate and citron. The colour mixing chart has both kinds, with the parts for each.

None of these primaries is special in nature. Colour science treats any set of primaries as one choice among many, each reaching only part of the colours we can see (colour theory).

Warm colours are usually said to run from red through yellow, browns and tans included. Cool colours run from blue-green through blue-violet (blue-purple on this wheel), most greys included (colour theory). Yellow-green, green, purple and red-purple fall between the two lists.

The split has mattered to painters since at least the late 18th century. Warm colours are said to come forward in a picture and cool ones to fall back, though part of that is because warm pigments tend to be lighter and more saturated.

Use the painter's wheel for paint, crayons and colour lessons. It's the wheel artists have taught from since the 18th century, and its complementary pairs are the ones that mix to brown and grey on a palette (what colours make brown).

Use the RGB wheel for anything on a screen. Its hues are the ones in CSS and design tools, so a triad here matches a triad in HSL, and the hex codes go straight into a stylesheet. Printers use a third set, cyan, magenta and yellow, whose wheel is laid out like RGB.

The blank wheel has 12 segments, with the colour names round the outside, numbers inside, or nothing at all. With numbers, 1 is a primary, 2 a secondary and 3 a tertiary, so a child paints the 1s from the pots, mixes two 1s for each 2, and mixes the colours either side of each 3.

Tick Coloured in for a reference wheel to pin up. It prints the same colours as the wheel at the top of this page, in RYB or RGB, so turn on background graphics if your browser asks.

The first page builds the wheel in three rings. The inner ring is the three primaries, the middle ring adds the secondaries between them, and the outer ring adds the tertiaries. Underneath, nine mixing sums ask what two paints make, with a circle to paint the answer in.

The second page has ten questions on colour schemes: complementary, analogous, triadic, split complementary, the two tetradic schemes, mixing, warm and cool, and tints and shades. Change the sheet number for a new set. The answer key is the last page.

The painter's wheel uses the same paint model as the colour mixing chart, by Nathan Gossett and Baoquan Chen (InfoVis 2004). Red sits at the top, yellow a third of the way round and blue two thirds. Between two primaries the paint changes in step with the angle, so 30 degrees past red is three parts red to one of yellow, which is red-orange.

The RGB wheel is HSL hue, the same angle as in CSS: red at 0, green at 120 and blue at 240. A screen can only approximate paint, so treat the RYB swatches as a guide to the hue, not a match for any pigment.