Authoritative Perceptual Truth: OKLCH Notation

OKLCH is the authoritative color model powering the Espalier design system. Standing for Lightness ( $L$ ), Chroma ( $C$ ), and Hue ( $H$ ), it is a cylindrical representation of the Oklab color space—a model specifically optimized for human perception rather than hardware limitations.

In a modern engineering stack, OKLCH is the only format that provides the technical defensibility required for programmatic palette generation and automated accessibility enforcement.

The Technical Pillars of OKLCH

Unlike legacy models, OKLCH separates color into three independent, human-readable axes:

1. $L$ (Perceived Lightness): Ranges from $0$ (pure black) to $100\mathrm{\%}$ (pure white). Unlike HSL, the $L$ value in OKLCH is perceptually uniform: a $70\mathrm{\%}$ lightness yellow and a $70\mathrm{\%}$ lightness blue appear equally bright to the human eye.
2. $C$ (Chroma): Represents the "amount" of color (intensity). It typically ranges from $0$ (grayscale) to $0.37$ , though it can go higher for wide-gamut displays.
3. $H$ (Hue): Represents the angle on the color wheel ( $0$ to $360$ ).

The Strategic Advantage: Why Espalier Chose OKLCH

From a Startup Strategist's perspective, OKLCH reduces technical debt by replacing "trial-and-error" design with "formulaic" engineering.

1. Predictable Design Scales

Because OKLCH is perceptually uniform, we can generate a consistent 10-step color ramp by simply incrementing the $L$ value. Every step will feel visually balanced, and the contrast against text will remain predictable regardless of the hue.

2. Wide Gamut Access (P3 and Beyond)

Legacy formats like Hex and RGB are locked to the sRGB gamut. OKLCH is gamut-independent, allowing Espalier to automatically utilize the $25\mathrm{\%}$ more vibrant colors available on modern Display P3 hardware without changing the underlying logic.

3. Implementation via Relative Color Syntax

Espalier utilizes Relative Color Syntax to treat colors as reactive objects. We use the from keyword to take any incoming color and "destructure" it into its perceptual components for real-time manipulation.

/* Espalier implementation logic */
.element {
  /* Derive an analogous secondary color by rotating hue by 30 degrees */
  --secondary: oklch(from var(--primary) l c calc(h + 30));
  
  /* Derive a high-contrast state by increasing lightness by 10% */
  --active: oklch(from var(--primary) calc(l + 0.1) c h);
}

Challenge the Assumption: "HSL is Human-Centric"

The industry often claims HSL is "human-centric" because it uses "Lightness." We challenge this. HSL is a transformation of RGB math; it is hardware-centric masquerading as human-centric. OKLCH is the only model that aligns the numbers in your code with the biological response of the human retina.

For a defensible architecture, stop using HSL for logic and move your entire theming engine to OKLCH.

The Road to APCA

By using OKLCH's uniform $L$ channel, Espalier is uniquely positioned to adopt the Advanced Perceptual Contrast Algorithm (APCA). We recommend targeting specific $Lc$ (Lightness Contrast) scores to ensure your interface is inclusive by design.