Color Fundamentals

Understanding how color works gives you the foundation to make intentional design decisions.

What Is Color?

Color is how our brain interprets different wavelengths of light. When light hits an object, some wavelengths are absorbed and others are reflected. The reflected wavelengths reach our eyes and are processed as color.

The visible spectrum ranges from ~380nm (violet) to ~700nm (red):

Violet → Blue → Cyan → Green → Yellow → Orange → Red
380nm                                            700nm

Additive vs Subtractive Color

These two systems work differently and are used in different contexts.

Additive Color (Light)

Used in: screens, monitors, digital displays

• Starts with black (no light)
• Add light to create colors
• More light = brighter/lighter
• All colors combined = white
• Primary colors: Red, Green, Blue (RGB)

Red + Green = Yellow
Green + Blue = Cyan
Blue + Red = Magenta
Red + Green + Blue = White

Subtractive Color (Pigment/Ink)

Used in: printing, paint, physical materials

• Starts with white (paper/surface)
• Add pigment to absorb (subtract) light
• More pigment = darker
• All colors combined = black (muddy brown in practice)
• Primary colors: Cyan, Magenta, Yellow (CMY/CMYK)

For web and UI design, you work with additive color (RGB).

Essential Terminology

Hue

The pure color itself - red, blue, green, orange, etc. It's what most people mean when they say "color."

Saturation

How intense or vivid a color is.

• High saturation = vibrant, pure color
• Low saturation = muted, grayish
• Zero saturation = grayscale

|████████████| High saturation (vivid red)
|████████████| Medium saturation (muted red)
|████████████| Low saturation (grayish red)
|████████████| Zero saturation (gray)

Lightness (Luminosity)

How light or dark a color is.

• High lightness = closer to white
• Low lightness = closer to black
• 50% lightness = pure hue at full intensity

|████████████| High lightness (pink/light red)
|████████████| Medium lightness (pure red)
|████████████| Low lightness (dark red/maroon)

Value

Often used interchangeably with lightness. In some contexts, value specifically refers to the lightness of a color when converted to grayscale.

Brightness vs Lightness

These are often confused:

• Lightness (HSL): 0% is black, 100% is white, 50% is the pure hue
• Brightness (HSB/HSV): 0% is black, 100% is the most vivid version of the hue

Tint, Shade, and Tone

/* Base color */
--red: hsl(0, 100%, 50%);

/* Tint (add white) */
--red-tint: hsl(0, 100%, 75%);

/* Shade (add black) */
--red-shade: hsl(0, 100%, 25%);

/* Tone (add gray) */
--red-tone: hsl(0, 50%, 50%);

Color Temperature

Colors are described as warm or cool based on psychological associations.

Warm Colors

• Red, orange, yellow
• Associated with: energy, passion, warmth, urgency
• Tend to advance (appear closer)

Cool Colors

• Blue, green, purple
• Associated with: calm, trust, professionalism
• Tend to recede (appear farther)

Neutral Colors

• Black, white, gray, brown, beige
• Can lean warm (beige) or cool (blue-gray)
• Essential for balance in any palette

Color Context

The same color looks different depending on what surrounds it.

This is crucial for UI design:

┌─────────────────┐    ┌─────────────────┐
│  Dark BG        │    │  Light BG       │
│    ┌─────┐      │    │    ┌─────┐      │
│    │Gray │      │    │    │Gray │      │
│    └─────┘      │    │    └─────┘      │
│  (looks light)  │    │  (looks dark)   │
└─────────────────┘    └─────────────────┘

The same gray appears lighter on dark backgrounds and darker on light backgrounds. This affects:

• Perceived contrast
• Readability
• Visual hierarchy
• Overall aesthetic

Practical Implications for UI

1. Use HSL for manipulation - It maps directly to how we think about color (hue, saturation, lightness)

2. Test colors in context - A color that looks great in a color picker may look wrong in your actual design

3. Consider display differences - Colors look different on different screens, operating systems, and in different lighting conditions

4. Start with lightness - Getting the lightness values right is more important than the specific hues for hierarchy and readability

Summary

Next: 02-color-models.md - RGB, HEX, HSL and when to use each