← BlogLab

Interactive OKLCH Color Palette Generator

A native CSS and JavaScript experiment demonstrating the power of OKLCH color spaces for real-time application themes.

This experiment explores CSS color manipulations directly in the OKLCH space. By using native sliders, developers can adjust lightness, chroma, and hue to generate accessible color schemes.

Technical Details

Unlike HSL or RGB, OKLCH provides perceptually uniform color adjustments. This means changes in lightness feel consistent regardless of the hue:

  • Lightness (L): Controls brightness from 0 to 1.
  • Chroma (C): Adjusts colorfulness or saturation.
  • Hue (H): Sets the color angle from 0 to 360.

Implementation Snippet

The generator uses custom properties to update colors dynamically:

function updatePalette(hue) {
  document.documentElement.style.setProperty('--color-accent', `oklch(0.84 0.22 ${hue})`);
  document.documentElement.style.setProperty('--color-accent-muted', `oklch(0.84 0.22 ${hue} / 0.15)`);
}

This ensures full theme compliance without generating thousands of helper classes.