Color Fundamentals

Knowing how color works is the floor everything else stands on. This file is that floor.

What Is Color?

Color is how your brain interprets wavelengths of light. Light hits an object, some wavelengths are absorbed, others are reflected. The reflected ones reach your eyes and you see a color.

The visible spectrum runs from about 380nm (violet) to 700nm (red):

Violet -> Blue -> Cyan -> Green -> Yellow -> Orange -> Red
380nm                                                700nm

Additive vs Subtractive Color

Two systems, two contexts. You work with one of them.

Additive Color (Light)

Used by screens, monitors, and any digital display.

• Starts with black (no light)
• Add light to make colors
• More light, brighter
• All three at full = white
• Primaries: Red, Green, Blue (RGB)

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

Subtractive Color (Pigment, Ink)

Used by printing, paint, and physical materials.

• Starts with white (the paper)
• Pigment absorbs (subtracts) light
• More pigment, darker
• All three at full = black (muddy brown in practice)
• Primaries: Cyan, Magenta, Yellow (CMY/CMYK)

For web and UI work, you only touch additive color. RGB.

Essential Terminology

Hue

The pure color itself: red, blue, green, orange. It is what most people mean when they say "color".

Saturation

How intense or vivid a color is.

• High saturation: vibrant, pure
• 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. Sometimes it refers specifically to the lightness of a color when converted to grayscale.

Brightness vs Lightness

These two get confused constantly:

• 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 get described as warm or cool based on psychological association, not physics.

Warm Colors

• Red, orange, yellow
• Associated with energy, passion, urgency, warmth
• 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 the single most important fact for UI work.

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

The same gray reads lighter on a dark background and darker on a light one. That shift drags perceived contrast, readability, hierarchy, and the whole feel of the design with it. Always test colors in the actual layout, not in isolation.

Practical Implications for UI

1. Use HSL for manipulation. It maps directly to how you think about color: hue, saturation, lightness.
2. Test colors in context. A color that pops in a color picker may look wrong in the actual design.
3. Account for the screen. Colors shift across monitors, OS color profiles, and ambient lighting.
4. Start with lightness. Getting lightness right matters more than the specific hue for hierarchy and readability.

Summary

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