Good: dark neutral background · blue accent · clear hierarchy — every color has a purpose. Bad: random hues fighting each other · no visual hierarchy · exhausting to look at.
Chapter 2
The Color Wheel
All colors live on a circular structure. Hover anywhere on the wheel to see the color's name and position.
🖱 Hover to explore · Click to inspect · P=Primary · S=Secondary
Red
#ff0000
Primary
Complement
Analogous
🔴 Primary — Cannot be mixed (RGB Light)
Red
Green
Blue
🟡 Secondary — Two primaries mixed
Yellow
Cyan
Magenta
🌈 Tertiary — Primary + nearby Secondary
Orange
Chartreuse
Spring Green
Azure
Violet
Rose
Chapter 2 · cont.
Mixing Colors
Secondary colors are made by mixing two primaries. Hover each card to see the result animate.
+=
Yellow
Red + Green → bright yellow. On screens, light adds up — combining red and green light produces yellow in the RGB additive model.
+=
Cyan
Green + Blue → cool, electric cyan. Used in digital UI highlights, neon effects, and tech branding.
+=
Magenta
Blue + Red → vibrant magenta. Used in digital gradients, UI accents, and creative digital branding.
Tertiary Colors
Mix a primary with a neighboring secondary for more complex, subtle hues.
Orange (R+Y)
Chartreuse (Y+G)
Spring Green (G+C)
Azure (C+B)
Violet (B+M)
Rose (M+R)
Interactive Mixing Lab — Pick two colors to mix
?
+
?
=
?
Select two primary colors above to see what they make
Chapter 3
Color Properties
Every color has 3 dimensions — Hue, Saturation, and Value. Drag the sliders to see them change live.
Saturation & Lightness
Hue
Color Output
#FF0000
H: 0° S: 100% L: 50%
Click or drag on the square and bar
🎨
Hue
The pure color name — red, blue, green. It's the position on the color wheel. Everything starts here.
⚡
Saturation
Intensity of the color. High sat = vivid game UI. Low sat = cinematic, realistic environments.
☀️
Value / Brightness
Lightness vs darkness. Artists use value contrast to create depth, shadows, and visual hierarchy.
Warm vs Cool
Colors are grouped by the temperature they feel. Hover each color to see where it's used.
Neon pink + cyan + deep navy. Complementary neons on near-black = futuristic, electric, high-tech.
Chapter 6 · cont.
The 60-30-10 Rule
Professional designers follow this ratio to keep layouts balanced. Pick a preset or adjust the colors.
Preset Palettes
60% — Primary / Background
The dominant tone. Usually a neutral — sets the overall mood.
30% — Secondary / Surface
Cards, panels, sidebars. Complements the primary.
10% — Accent / CTA
Buttons, links, highlights. The star — use it sparingly.
Chapter 7
RGB · CMYK · HSV
Different situations use different color systems. Here's when to use each one.
RGB
Red · Green · Blue
Additive color model for screens. Mixing light — all three at full = White. Used in games, UI, web, and displays.
R
G
B
rgb(255, 0, 0) = Red #FF0000
🖥️ Screens · Games · Web · UI
CMYK
Cyan · Magenta · Yellow · Key (Black)
Subtractive model for printing. Mixing inks — all three C+M+Y together = near Black. Opposite of RGB.
C
M
Y
K
C:100 M:0 Y:100 K:0 = Green
🖨️ Print · Posters · Packaging
HSV / HSL
Hue · Saturation · Value/Lightness
Human-intuitive model used in design tools. Describes color the way artists think: what color, how vivid, how bright.
hsl(213, 94%, 68%) = Blue hsl(0, 100%, 50%) = Red
🎨 Figma · Photoshop · CSS
Chapter 8
Triadic Harmony in Action
The ColorQuest game uses a triadic-inspired scheme — three colors ~120° apart, each with a distinct role.
△ Triangle = triadic positions
Electric Blue
Primary — Buttons, Highlights, CTAs
#60a5fa
~213°
Plasma Pink
Secondary — Accents, Energy, Warnings
#f0538e
~337°
Neon Mint
Accent — Success, Progress, Positive
#10b981
~160°
Why it works: Three hues spread across the wheel create vibrant balance. Blue builds trust, Pink brings energy, Mint signals success. No single color dominates — together they cover the full emotional spectrum of the UI.