LCH Color Space

OCS is built on CIE LCH—a perceptually uniform color space where equal numerical changes produce equal perceived visual differences. This makes LCH ideal for systematic color organization.

The Three Dimensions

L — Lightness (0–100)

Lightness represents how bright a color appears to the human eye, from 0 (pure black) to 100 (reference white). Unlike RGB brightness, LCH lightness is perceptually linear: the visual jump from L20 to L30 looks the same as L70 to L80.

C — Chroma (0–~150)

Chroma measures colorfulness—how far a color is from a neutral grey of the same lightness. Zero chroma is perfectly neutral; maximum chroma depends on hue and lightness. Not all high-chroma values fit within the sRGB gamut.

H — Hue (0–360°)

Hue is the angular position on the color wheel, measured in degrees. 0° is red, 90° is yellow, 180° is cyan-green, and 270° is blue. Unlike HSL hue, LCH hue is perceptually uniform—30° of hue rotation always looks like the same amount of color shift.

Why Not RGB or HSL?

RGB is a device model—it describes how screens emit light, not how humans perceive color. HSL is more intuitive but inherits RGB's non-uniformity: rotating hue by 10° in one region can look like a dramatic shift while in another region it's barely noticeable.

LCH solves this by modeling human perception directly. This means:

• Color relationships (analogous, complementary) work predictably
• Lightness sorting produces visually even gradients
• Chroma filtering reliably separates vivid from muted colors
• A ΔE of 2.0 between any two colors looks like the same amount of difference

sRGB Gamut and OCS

LCH can describe colors that fall outside the sRGB gamut—colors that screens cannot display. OCS intentionally includes these colors (flagged as out-of-gamut) because the standard is device-independent. A color that exceeds sRGB may still be achievable in print, textile, or wide-gamut displays.

When an out-of-gamut color needs to be displayed on screen, OCS provides a gamut-clamped hex value for preview purposes, while preserving the true LCH definition.

CSS Native Support

Modern browsers natively support LCH via the lch() function. You can use OCS values directly in CSS:

.element {
  /* OCS-7055-025-C */
  color: lch(70% 55 25);
}