Lightness
How light or dark a color is, independent of its hue or saturation — ranging from black to white.
What it means
Lightness describes where a color falls on the scale from black (0%) to white (100%). It's independent of hue and saturation — you can have a dark blue and a light blue that differ only in lightness.
In OKLCH, lightness is perceptually linear: a lightness of 0.5 genuinely looks "half-bright" to the human eye. HSL lightness, by contrast, is mathematically linear but perceptually uneven — a yellow at L=50% looks much brighter than a blue at L=50%. This makes OKLCH lightness the preferred metric for accessibility work and scale generation.
Why it matters in palette design
Lightness drives contrast, readability, and spatial depth. Text must have sufficient lightness difference from its background to meet WCAG standards. In a scale of color steps (50–900), monotonically decreasing lightness is what makes the scale feel ordered. PerfectPalette's scale builder enforces monotonic OKLCH lightness across generated steps.
Common confusion
Lightness vs. luminance vs. value: Lightness (L in HSL, L in OKLCH) is a color-model property. Luminance is a physics-based measure of how much light a surface emits. Value (V in HSB/HSV) is similar to lightness but defined differently — max value means fully saturated color, not white. For accessibility, relative luminance (per WCAG) is what matters for contrast ratios.
Example
When generating a blue scale from step 50 (lightest) to 900 (darkest), OKLCH lightness decreases monotonically from ~0.95 to ~0.25. Each step looks perceptually darker than the last — no unexpected jumps or plateaus.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.