Learn Color Theory
Master color with interactive guides.
Explore how different color models represent the same color. Drag sliders to see values update across modes.
RGB — Red, Green, Blue
RGB is an additivecolor model used by screens. Each pixel combines Red, Green, and Blue light at varying intensities (0–255). When all three channels are at maximum, the result is white. When all are zero, the result is black.
Key Properties
- Red channel (0–255)
- Green channel (0–255)
- Blue channel (0–255)
When to Use
RGB is the native format for web, CSS, and digital design. Hex codes (#RRGGBB) are shorthand for RGB values. Use RGB when working directly with screen-based media.
Additive vs Subtractive Mixing
Screens add light: mixing Red + Green + Blue at full intensity produces white. Printers absorb light: mixing Cyan + Magenta + Yellow inks produces black. This is why the same color can look different on screen vs. in print.
Key Concepts
Additive vs Subtractive Mixing
Screens add light (RGB): Red + Green + Blue = White. Printers absorb light (CMYK): Cyan + Magenta + Yellow = Black. The same color value can look different depending on the medium.
Lightness vs Brightness
HSL Lightness goes from black (0%) through the pure hue (50%) to white (100%). HSB Brightness goes from black (0%) to the pure hue (100%) — it can never reach white. This makes HSB better for picking vivid colors, and HSL better for tinting and shading.
Perceptual Uniformity
LAB was designed so equal numeric steps look equally different to human eyes. HSL hue steps are not perceptually equal — a 30° shift near yellow is subtle, while the same shift near blue is dramatic. Accessibility tools rely on perceptual models to evaluate contrast.
Gamut: Screen vs Print
Monitors can display colors that printers cannot reproduce (and vice versa). Vivid RGB colors may look muted in CMYK print. Always preview CMYK conversions when designing for physical media.
Digital vs Physical Color
Computed color models (RGB, HSL, CMYK) define colors mathematically. Pantone defines colors by physical ink recipes and reference swatches. Both are needed for professional design workflows that span screen and print.
Cylindrical vs Rectangular
LAB uses rectangular axes (a*, b*) to describe chromaticity. LCH and OKLCH convert these to polar coordinates (Chroma + Hue), making hue rotation and saturation adjustment simple single-channel operations — much more intuitive for design work.
OKLab: Better Perceptual Uniformity
CIE LAB has known issues in the blue-purple range where small numeric changes cause large perceived hue shifts. OKLab fixes this with redesigned transformation matrices, making it the modern choice for uniform color math and CSS design systems.