Color Wheels
Mix Colors Like a Scientist (and an Artist!)
Play with two color wheels to see how colors combine in paint (pigments) and light (screens). Pick any three starting colors and watch the secondaries and tertiaries update instantly. Use Revert to jump back to the standard sets (CMY for paint, RGB for light).
- Choose three starting colors with the pickers.
- Compare the Paint and Light wheels -- notice how the mixes differ.
- Read the swatches below each wheel to see the exact hex colors you created.
- Light (screens): Your screen is made of tiny lights. When lights mix, they get brighter -- like shining flashlights together.
Red + Green = Yellow, Green + Blue = Cyan, Blue + Red = Magenta. We make overlaps a bit extra-bright so they're easy to see. - Paint (pigments): Paint isn't light -- it's colorful goo that soaks up some colors and lets others bounce back to your eyes. When paints mix, they can get darker.
Cyan + Magenta ≈ Blue, Magenta + Yellow ≈ Red, Yellow + Cyan ≈ Green. The in-between colors are tuned to feel like real paint .
Paint
Primaries
Primary 1: #00FFFF
Primary 2: #FF00FF
Primary 3: #FFFF00
Secondaries (mix of neighbors)
P1 + P2: #0000FF
P2 + P3: #FF0000
P3 + P1: #00FF00
Tertiaries (between a primary and its secondary)
Between P1 & (P1+P2): #1CB3F7
Between (P1+P2) & P2: #851DF5
Between P2 & (P2+P3): #F72B5C
Between (P2+P3) & P3: #F7772B
Between P3 & (P3+P1): #96F92D
Between (P3+P1) & P1: #28F968
Paint subtracts light. We keep the three secondaries textbook-clear (C+M=Blue, M+Y=Red, Y+C=Green), and compute the in-betweens with a spectral pigment model that's slightly biased toward the primary so the families read cleanly. A tiny OKLCH softening keeps them from looking neon. Real pigments vary by brand, so your tubes may not match these exact screen colors.
Light
Primaries
Primary 1: #FF0000
Primary 2: #00FF00
Primary 3: #0000FF
Secondaries (mix of neighbors)
P1 + P2: #FFFF00
P2 + P3: #00FFFF
P3 + P1: #FF00FF
Tertiaries (between a primary and its secondary)
Between P1 & (P1+P2): #FFBC00
Between (P1+P2) & P2: #BCFF00
Between P2 & (P2+P3): #00FFBC
Between (P2+P3) & P3: #00BCFF
Between P3 & (P3+P1): #BC00FF
Between (P3+P1) & P1: #FF00BC
Light adds up. We blend colors in linear sRGB and then normalize the result so overlaps stay bright (a classroom-friendly view). That's why 50% red + 50% green = vivid yellow here; a strictly energy-preserving mix looks a bit dimmer, but the color relationships are the same.
Why computers and paint don't always match
Mixing color in a program is trickier than it looks! Screens mix light (additive RGB), while paints mix pigments that subtract light in complicated, uneven ways. Real pigments have bumpy “fingerprints” for how they absorb and reflect wavelengths, so two paints that look the same can mix differently. Computers approximate this with different math models—some focus on light energy (linear sRGB), some on perceived color (LAB/LCH/HSL), and some try to mimic pigments with spectral or Kubelka-Munk models. Each choice is a trade-off: clearer teaching shapes, realism, or speed. Our wheel uses an idealized set for the big relationships (what mixes with what) and a pigment-style blend for the in-betweens . That's why different apps (and real paint!) won't always match exactly—and that's okay. The goal here is to explore, compare, and build intuition.