RYB vs RGB color wheel

The artist's paint wheel and the screen-light wheel order hues differently, so they give different answers for which color is opposite.

why are red and green opposite in art but not cssartist color wheel vs computer color wheelpaint colors and screen colors disagreeis blue opposite orange or yellowtwo different color wheelsryb versus rgbrbg color wheelwhy hue rotate gives the wrong opposite

See it

Live demo coming soon

What it is

The RYB wheel is the traditional artist model built around red, yellow, and blue paint. Its familiar opposite pairs are red and green, yellow and violet, blue and orange. The RGB wheel models colored light and underlies CSS HSL hue angles: red faces cyan, green faces magenta, and blue faces yellow.

Johannes Itten's 12-part RYB circle shaped Bauhaus color teaching and still dominates art classrooms. Reach for that wheel when discussing painting traditions or palettes chosen by eye. Reach for the RGB wheel when generating CSS colors, rotating hue in code, or reasoning about light from screens.

Gotcha: RYB is not a simple relabeling of evenly spaced CSS angles. Adding 180 degrees to hsl() always finds the RGB/HSL opposite, not the artist's complement. Name the wheel before giving an angle or calling two hues complementary, especially when translating an art direction into code.

Ask AI for it

Create a switchable RYB versus RGB color wheel with CSS conic-gradient(). For RGB, use the CSS HSL order red, yellow, green, cyan, blue, magenta. For RYB, author separate stops in the traditional order red, orange, yellow, green, blue, violet instead of calculating them with hsl(). Draw a diameter through the selected hue, label the opposite on each wheel, and demonstrate that blue maps to orange in RYB but yellow in RGB.

You might have meant

color wheelcomplementarycolor harmonyhue rotationrgb