Skip to main content

HSL vs OKLCH

Understanding the color spaces supported by LibreApps Desktop.

Overview​

LibreApps Desktop supports two primary color spaces for theming: HSL (Hue, Saturation, Lightness) and OKLCH (Lightness, Chroma, Hue). While HSL is the traditional standard, OKLCH offers significant advantages for modern web design.

HSL (Legacy Standard)​

HSL is widely supported and easy to understand. However, it has a major flaw: it is not perceptually uniform. This means that two colors with the same "lightness" value can appear to have different brightness to the human eye.

  • Format: 221.2 83.2% 53.3%
  • Pros: Universal support, intuitive for many developers.
  • Cons: Inconsistent perceived brightness, limited color gamut.

OKLCH (Modern Perceptual)​

OKLCH is a modern color space designed to be perceptually uniform. A lightness value of 50% in OKLCH will always look like 50% brightness, regardless of the hue or chroma.

  • Format: oklch(60% 0.15 250)
  • Pros: Perceptual uniformity, access to wider color gamuts (P3), better accessibility.
  • Cons: Requires modern browser support (available in all major browsers since 2023).

Why LibreApps Desktop Uses Both​

We provide HSL support for backward compatibility and ease of use with existing design systems. However, we encourage the use of OKLCH for new projects to ensure a more consistent and vibrant visual experience.

Best Practices​

  • ✅ Do this: Use OKLCH if you want your brand colors to look consistent across different hues.
  • ✅ Do this: Use HSL if you are integrating with an older design system that only provides HSL values.
  • ❌ Don't do this: Mix HSL and OKLCH variables within the same theme definition; stick to one format for consistency.