ColorHexHub Design Team
Traditional sRGB color space was standardized in 1996 for legacy CRT displays. Modern screens (Apple Display P3 and OLED monitors) support millions of vibrant colors far beyond the sRGB gamut.
Enter OKLAB and OKLCH—the modern CSS Color Level 4 specifications designed specifically for human visual perception.
Note
**Perceptual Uniformity**: OKLCH separates lightness (`L`), chroma (`C`), and hue (`H`). Changing hue does not un-intentionally darken or brighten your colors.
The Syntax of OKLCH in Modern CSS #
In CSS, oklch() takes three core arguments plus optional alpha transparency:
css
/* Syntax: oklch(Lightness Chroma Hue / Alpha) */
.brand-accent {
background-color: oklch(0.65 0.24 260); /* Vibrant Sapphire Blue */
}
.brand-accent-hover {
background-color: oklch(0.55 0.24 260); /* 10% darker, hue & saturation remain identical */
}Pro Tip
**Why developers love OKLCH**: To make a hover state in OKLCH, you simply reduce Lightness (`0.65` to `0.55`). In HSL or RGB, reducing lightness often causes hue shifts toward purple or muddy brown.
Interactive Color Picker & Harmonies
#3B82F6
Derived Color Harmonies