HEX, RGB and HSL
Screens mix red, green and blue light. RGB gives each channel from 0 to 255, and HEX writes the same three numbers in base 16, so rgb(30, 144, 255) is #1E90FF.
HSL describes the same color as hue (the angle on the color wheel, 0–360°), saturation (0% gray to 100% vivid) and lightness (0% black, 50% pure color, 100% white). Conversions follow the CSS Color Module Level 4 formulas and assume sRGB.
Color schemes on the wheel
Schemes rotate the hue and keep saturation and lightness. Complementary adds 180°, analogous uses ±30°, triadic uses 120° steps, split-complementary uses 150° and 210°, and tetradic (square) uses 90° steps.
Example: pure red is hsl(0, 100%, 50%) = #FF0000. Its complement at 180° is #00FFFF (cyan), and its triadic partners at 120° and 240° are #00FF00 and #0000FF.
| Scheme | Hue offsets |
|---|---|
| Complementary | 0°, 180° |
| Analogous | −30°, 0°, +30° |
| Triadic | 0°, 120°, 240° |
| Split-complementary | 0°, 150°, 210° |
| Tetradic (square) | 0°, 90°, 180°, 270° |
Mixing colors
The mixer's sliders set red, green and blue directly. Averaging two or more colors averages each channel: red #FF0000 and blue #0000FF give (127.5, 0, 127.5), which rounds to #800080.
This is additive mixing, how light combines on a screen. Paint and ink mix subtractively, so real pigments give different, usually darker results.