Frameworks for organizing, specifying, and reproducing color.
Color systems provide the language and structure for working with color precisely. From traditional artist's color wheels to modern digital color spaces, understanding these systems enables clear communication and consistent reproduction across media.
Why Systems Matter
Without color systems:
- "Blue" means different things to different people
- Colors shift unpredictably between screen and print
- Consistency across applications becomes impossible
- Communication about color requires subjective description
With color systems:
- Colors are specified precisely
- Reproduction is predictable
- Teams work from shared references
- Automation and consistency become possible
The Color Wheel
Traditional (RYB)
The painter's color wheel, based on red, yellow, and blue as primaries.
- Primary: Red, Yellow, Blue
- Secondary: Orange, Green, Violet (mixed from primaries)
- Tertiary: Red-orange, yellow-orange, etc.
Useful for understanding traditional color relationships and harmonies. Less accurate for mixing actual pigments or digital work.
Modern (RGB)
Based on how light works. Red, green, and blue light combine to create all visible colors.
- Additive color mixing
- Full combination = white
- Absence = black
- Foundation for digital color
Digital Color Spaces
RGB (Red, Green, Blue)
The native language of screens. Each channel ranges 0–255.
Notation: rgb(255, 99, 71) or hex #FF6347
Use cases: Web design, UI, digital displays
Limitations: Device-dependent; the same RGB values look different on different monitors.
Hex Codes
Compact RGB notation using hexadecimal. Two digits per channel.
Format: #RRGGBB (e.g., #FF6347)
Shorthand: #RGB when pairs repeat (e.g., #F63 = #FF6633)
Most common format in web development.
HSL (Hue, Saturation, Lightness)
A more intuitive way to think about color.
Hue: 0–360° on the color wheel (0=red, 120=green, 240=blue) Saturation: 0–100% (gray to vivid) Lightness: 0–100% (black to white)
Notation: hsl(9, 100%, 64%)
Advantages:
- Easier to create color variations
- Adjust saturation or lightness without affecting hue
- More intuitive for designers
HSB/HSV (Hue, Saturation, Brightness/Value)
Similar to HSL but uses brightness instead of lightness.
Key difference: Maximum brightness in HSB is the pure hue; in HSL, 50% lightness is the pure hue.
Common in design tools like Photoshop and Figma.
Print Color Systems
CMYK (Cyan, Magenta, Yellow, Key/Black)
The language of printing. Subtractive color mixing.
Values: Each channel 0–100%
Why it matters:
- RGB colors often can't be reproduced in CMYK
- Design in RGB, but test CMYK for print
- Some vibrant colors will appear duller in print
Pantone (PMS)
Standardized spot color system using pre-mixed inks.
How it works: Each color has a unique identifier (e.g., Pantone 185 C)
Advantages:
- Precise color matching across print runs
- Colors outside CMYK gamut possible
- Industry-standard communication
Disadvantages:
- More expensive than process color
- Separate ink for each Pantone color
- Limited to Pantone's defined colors
Best for: Brand colors that must match exactly, packaging, high-value print
Process vs. Spot Color
Process color (CMYK): Four inks combine to simulate colors. More economical. Slight variation between runs.
Spot color (Pantone): Pre-mixed single ink. Precise matching. Additional cost per color.
Advanced Color Spaces
LAB
Device-independent color space designed to encompass all perceivable colors.
Components:
- L = Lightness (0–100)
- A = Green-to-red axis
- B = Blue-to-yellow axis
Use cases: Color correction, converting between color spaces, perceptual uniformity
Display P3
Wider gamut than sRGB, available on modern Apple devices and some HDR displays.
Implications:
- More vivid colors possible
- Not yet universal
- Fallbacks needed for standard displays
sRGB
The standard color space for web and most consumer displays.
Characteristics:
- Smaller gamut than P3 or print
- Near-universal device support
- Default assumption for web colors
Color Specification for Brands
Define Multiple Formats
Brand guidelines should specify colors in all needed formats:
| Color | Hex | RGB | CMYK | Pantone |
|---|---|---|---|---|
| Primary Blue | #0066CC | 0, 102, 204 | 100, 50, 0, 20 | 285 C |
Accept Variation
Perfect matching across media is impossible. Define:
- Primary specifications for each medium
- Acceptable tolerance ranges
- Priority media (which must match most closely)
Test Across Contexts
Colors shift between:
- Screen types and calibrations
- Print substrates (paper types)
- Finishes (matte vs. gloss)
- Production methods
Test actual output, not just specifications.