色彩空间详解

色彩空间视觉指南：sRGB、Display P3、HSL、LAB、LCH和OKLCH。了解何时使用每种以及它们之间的区别。

Gradient Interpolation Comparison

The same two colors interpolated in different color spaces produce noticeably different gradients. RGB often goes through muddy intermediate tones, HSL can produce unexpected bright intermediates, and LAB tends to maintain perceptual smoothness.

sRGB

HSL

CIE LAB

Color Space Reference

sRGB

Standard Red Green Blue

The default color space of the web. Colors are defined by mixing red, green, and blue light channels, each ranging from 0 to 255. Nearly all screens support sRGB, and CSS rgb() uses this space.

When to Use

General web work, when broad device compatibility is paramount.

Pros

  • +Universal browser and device support
  • +Intuitive for developers familiar with hex/rgb
  • +Default for images, canvas, and CSS

Cons

  • -Not perceptually uniform -- equal numeric steps do not appear as equal visual steps
  • -Limited gamut compared to modern displays
  • -Mixing colors often produces muddy intermediates

Display P3

DCI-P3 (Display)

A wider color space than sRGB, covering roughly 50% more colors. Used by Apple devices, modern OLED screens, and HDR content. Access it in CSS via the color() function.

When to Use

When you need vivid, saturated reds, greens, and oranges on modern displays.

Pros

  • +Significantly wider gamut than sRGB
  • +Supported on Apple devices, modern Android, and recent desktop browsers
  • +Accessible via CSS color(display-p3 ...)

Cons

  • -Falls back to sRGB on unsupported devices
  • -Requires @media (color-gamut: p3) checks for graceful degradation
  • -Not perceptually uniform

HSL

Hue, Saturation, Lightness

A cylindrical remap of sRGB that separates hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). More intuitive for humans than raw RGB values.

When to Use

Theme generation, creating tints/shades, rotating hue for color harmonies.

Pros

  • +Intuitive mental model -- "pick a hue, then adjust"
  • +Easy to create tints (increase lightness) and shades (decrease lightness)
  • +Simple hue rotation for complementary/triadic schemes

Cons

  • -Not perceptually uniform -- HSL lightness 50% blue looks much darker than 50% yellow
  • -Same gamut as sRGB
  • -Saturation behaves unpredictably at extreme lightness values

CIE LAB

CIE 1976 L*a*b*

A device-independent color space designed to approximate human vision. L* is perceptual lightness (0-100), a* is the green-red axis, and b* is the blue-yellow axis. The gamut covers all colors visible to humans.

When to Use

Color difference calculations, accessibility checks, scientific color work.

Pros

  • +Approximately perceptually uniform
  • +Covers the entire visible gamut
  • +Standard for color-difference metrics (Delta E)

Cons

  • -Slight non-uniformity in blue-purple region (hue linearity issue)
  • -a* and b* axes are not intuitive
  • -Requires coordinate clamping to convert back to sRGB

LCH

Lightness, Chroma, Hue (CIE)

The cylindrical form of CIE LAB. Lightness (0-100), Chroma (0-150+), and Hue (0-360). Combines the perceptual uniformity of LAB with the intuitive hue/chroma model of HSL.

When to Use

Designing perceptually balanced palettes with predictable hue shifts.

Pros

  • +Perceptually uniform lightness
  • +Intuitive hue and chroma controls
  • +Much wider gamut than sRGB/HSL

Cons

  • -Inherits LAB blue-purple hue shift issue
  • -High chroma values may be out of sRGB gamut
  • -Less familiar to most web developers

OKLCH

OK Lightness, Chroma, Hue

An improved perceptually uniform color space created by Bjorn Ottosson in 2020. Fixes the hue linearity issues of CIE LCH while retaining intuitive lightness/chroma/hue controls. Increasingly the recommended space for CSS color work.

When to Use

Palette design, CSS custom properties, any work where perceptual uniformity matters.

Pros

  • +Best perceptual uniformity of any practical color space
  • +No hue shifts in blue-purple like CIE LCH
  • +Native CSS support via oklch()
  • +Recommended by CSS Color Level 4 spec authors

Cons

  • -Relatively new -- less tooling and educational material
  • -High chroma values may exceed sRGB gamut
  • -Lightness scale is 0-1 (not 0-100), can be confusing