The Color Wheel Explained: RYB vs RGB and How to Read It

The color wheel is the map behind almost every palette decision. It turns the question "do these colors go together?" into a question about distance and direction, which is much easier to answer. Our Color Theory: A Complete Beginner's Guide introduces the wheel in a paragraph. This guide looks at how it is built, why there is more than one version, and how to read it with confidence.

How the wheel is laid out

A color wheel takes the hues you see in a rainbow, from red through orange, yellow, green and blue to violet, and bends that strip into a circle. Isaac Newton drew one of the first in his book Opticks, published in 1704. The trick that closes the circle is the purples and magentas between violet and red. They are not in the rainbow at all, yet they make the transition from one end of the spectrum back to the other look smooth.

Because the wheel is a circle, every hue can be described as an angle. On the digital wheel used by HSL and by most design software, red sits at 0 degrees, yellow at 60, green at 120, cyan at 180, blue at 240 and magenta at 300, and the circle returns to red at 360.

Traditional wheels are divided into 12 segments: three primaries, three secondaries between them, and six tertiaries filling the gaps. On a digital wheel those 12 segments are simply 30 degrees apart. Our guide to primary, secondary and tertiary colors explains how each group is mixed.

What the inside of the wheel shows

A flat wheel only has room for one property around its edge, and that property is hue. Many digital wheels use the inside for saturation, with vivid colors at the rim fading to gray at the center. Lightness needs a separate control. In the Color Wheel Explorer, hue runs around the circle, saturation fades toward the center, and lightness is set on the ring around the outside.

Two wheels: RYB for paint, RGB for screens

If you learned color in an art class, your wheel probably had red, yellow and blue as its primaries, with green opposite red. If you use a design app, its wheel has red opposite cyan. Both are correct for their own medium, and the difference trips up a lot of people.

The RYB wheel

The red, yellow and blue wheel comes from centuries of painting practice. It describes, roughly, what happens when you mix pigments: red and yellow make orange, yellow and blue make green, blue and red make purple. Its main opposite pairs are red and green, yellow and violet, and blue and orange. It is a practical teaching model rather than a precise one; modern printing uses cyan, magenta and yellow because they mix a wider range of colors.

The RGB wheel

Screens make color from red, green and blue light, so a screen wheel is built around those three, with yellow, cyan and magenta between them. This is the wheel behind HSL hue angles, CSS and every tool on ColorOverflow. Its opposite pairs are red and cyan, green and magenta, and blue and yellow.

Why they differ

The two wheels space the same hues differently. On the RYB wheel, red, yellow and blue are evenly spaced, a third of the circle apart, so the warm stretch from red to yellow takes up a full third of the wheel. On the RGB wheel, red and yellow are only 60 degrees apart, and the space is given to the greens and cyans instead. Because the spacing differs, the color directly across the circle differs too.

Some pairs agree on both wheels. Blue and orange are opposites in both systems: the blue #2680D9 sits at 210 degrees and the orange #D98026 at 30 degrees, exactly 180 degrees apart. Others, such as red, don't agree at all.

How to read the wheel

The single most useful idea is this: the distance between two hues on the wheel tells you how much hue contrast they have. Close together means related and calm. Far apart means contrasting and energetic. Every harmony rule is a choice of distances.

Neighbors: up to about 60 degrees

Hues that sit near each other share a lot, so they blend smoothly. Within about 30 degrees they look like variations of one color. Out to about 60 degrees they still feel like a family, like the blues and greens of the sea. This is the territory of analogous palettes.

Opposites: 180 degrees

Hues on opposite sides of the wheel share nothing, which gives the strongest possible hue contrast. Placed side by side, each makes the other look more intense. That makes opposites ideal for drawing attention, and tricky to use in large, equal amounts.

Triangles: 120 degrees

Three hues spaced evenly form an equilateral triangle. Each pair is far enough apart to contrast, but none sits directly opposite another, so the result is colorful and balanced. Rotate the triangle and you get a new set of three; the shape, not the starting point, is what holds it together.

Other shapes

Between these landmarks are more shapes. A split complementary takes the two hues on either side of the opposite, at 150 and 210 degrees from the base, for contrast with less tension. A square takes four hues 90 degrees apart. Our guide Understanding Color Harmony: 7 Ways to Combine Colors walks through each pattern with example palettes.

What the wheel doesn't tell you

The wheel is a map of hue, and hue is only one of three properties. It is easy to forget the other two.

• Lightness: two colors with the same hue can contrast strongly if one is pale and one is dark, and two opposite hues can be hard to tell apart if they have the same lightness.
• Saturation: a muted rust and a muted teal sit roughly opposite each other on the wheel, yet together they feel calm, not loud.
• Uneven spacing: equal angles don't look equally different. On the HSL wheel, the colors most people call green cover a wide arc, while pure yellow occupies a narrow slice, so a 30-degree step in the greens looks smaller than a 30-degree step near yellow or orange.
• Proportion: the wheel says which hues to use, not how much of each. One leading color and small accents almost always beats equal amounts.

Try it on a live wheel

The Color Wheel Explorer puts all of this in one place. Drag the base color around the wheel, choose a harmony rule, and watch its shape rotate with your color. It's the quickest way to build an instinct for distances on the wheel.

When you find a set of hues you like, open them in the generator to adjust lightness and saturation and turn them into a full palette.