🎨 CSS Tutorial: oklab() & oklch()

📌 Introduction

Modern CSS now supports advanced color functions like oklab() andoklch(). These colors are based on perceptual models — meaning they represent colors more like how humans actually see them. They offer smoother gradients, more accurate tones, and better accessibility than traditionalrgb() or hsl(). These functions are part of the new CSS Color Level 4 specification. 🌈✨

🎯 Why Use oklab() & oklch()?

  • More human-perceptual — colors adjust more naturally
  • Better gradients with no gray banding
  • More accurate lightness control
  • Wide-gamut support (P3 colors)
  • Great for data-vis, UI design, and color scales

✨ Syntax Overview

🔹 oklab()

Expresses color using **Lightness**, **a** (green↔red), and **b** (blue↔yellow).

oklab Syntax

oklab(<lightness> <a> <b> / <alpha>? )

🔹 oklch()

Similar to oklab but uses **Lightness**, **Chroma**, and **Hue** — easier for designers to work with (like HSL but more accurate).

oklch Syntax

oklch(<lightness> <chroma> <hue> / <alpha>? )

Note

Lightness ranges from 0 → 1.Hue uses degrees (0–360).Alpha is optional (0–1).

🧩 Understanding Each Model

1️⃣ oklab()

  • L — Lightness (0 → 1)
  • a — green ↔ red axis
  • b — blue ↔ yellow axis

oklab Example

color: oklab(0.7 -0.1 0.2);

2️⃣ oklch()

  • L — Lightness (0 → 1)
  • C — Chroma (color intensity)
  • H — Hue angle (0°–360°)

oklch Example

color: oklch(0.75 0.2 40deg);

🔥 Practical Examples

1. Pure oklab Color

oklab Base

.text {
  color: oklab(0.85 -0.05 0.1);
}

2. oklch Bright Accent

oklch Accent

.accent {
  color: oklch(0.75 0.25 80deg);
}

3. Smooth Gradient Using oklch()

Smooth Gradient

.gradient {
  background: linear-gradient(
    90deg,
    oklch(0.7 0.15 45) ,
    oklch(0.7 0.2 200)
  );
}

4. Using Alpha Transparency

Alpha Example

color: oklch(0.8 0.2 320 / 0.6);

📊 Comparison Table

Color ModelProsCons
rgb()Simple, widely supportedNot perceptual, uneven gradients
hsl()Designer-friendlyInaccurate brightness perception
oklab()Very perceptual and accurateLess intuitive than oklch
oklch()Best gradients, perceptual hue & chromaNewer (older browsers may need fallback)

⚙️ Browser Support & Fallbacks

Most modern browsers support oklab() and oklch() today. But you can use fallback colors:

Fallback

.btn {
  color: rgb(255, 0, 120);
  color: oklch(0.75 0.25 340);
}

🧠 Tips for Using oklab/oklch

  • Use oklch for color scales and smooth gradients
  • Use oklab for precise L/a/b adjustments
  • Always include a fallback color for older browsers
  • Explore vibrant P3 colors using color(display-p3 …)
>>“oklch() unlocks colors that finally match how humans perceive lightness, hue, and intensity.” ✨

🎉 Conclusion

The oklab() and oklch() functions bring professional-grade color accuracy to CSS. They produce smoother gradients, better contrast handling, and more realistic color mixing. These are the future of CSS color — especially for modern UI, design systems, and data visualization. 🚀 Master them to bring your interfaces to the next level!