OKLCH là gì? Hướng dẫn sử dụng không gian màu mới trong CSS

OKLCH là gì?

OKLCH là viết tắt của Oklab Lightness, Chroma, Hue. Đây là một không gian màu dựa trên mô hình Oklab do nhà nghiên cứu màu sắc Björn Ottosson phát triển vào năm 2020. Khác với HSL (Hue, Saturation, Lightness) hoặc RGB (Red, Green, Blue) hoạt động trên màn hình máy tính, OKLCH được thiết kế để mô phỏng cách mắt người thực sự nhận thức màu sắc.

Cấu trúc của OKLCH bao gồm ba thành phần:

• L (Lightness): Độ sáng tuyệt đối, giá trị từ 0% (đen tuyệt đối) đến 100% (trắng tuyệt đối). Điều quan trọng là giá trị 50% luôn mang lại độ sáng trung bình như nhau, bất kể màu sắc.
• C (Chroma): Độ bão hòa màu, tương đương với cường độ màu. Giá trị càng cao, màu càng rực rỡ. Không giống Saturation trong HSL, Chroma trong OKLCH có giới hạn tùy thuộc vào Hue và Lightness.
• H (Hue): Sắc thái màu, được biểu diễn bằng góc từ 0 đến 360 độ trên vòng tròn màu, tương tự như HSL.

Tại sao OKLCH vượt trội hơn HSL và HEX?

Trong nhiều năm, lập trình viên web đã quen thuộc với HEX (#FF5733) và HSL (hsl(9, 100%, 60%)). Tuy nhiên, cả hai đều tồn tại những khuyết điểm cơ bản mà OKLCH khắc phục triệt để.

Độ sáng nhất quán trên mọi màu

Trong HSL, hai màu có cùng giá trị Lightness nhưng khác Hue có thể trông sáng hoặc tối khác nhau đáng kể. Ví dụ, hsl(60, 100%, 50%) (vàng) trông sáng hơn nhiều so với hsl(240, 100%, 50%) (xanh dương), dù cùng giá trị Lightness 50%. Trong khi đó, oklch(60% 0.2 60) và oklch(60% 0.2 240) sẽ có độ sáng nhận thức gần như giống hệt nhau. Điều này cực kỳ quan trọng khi xây dựng hệ thống thiết kế với bảng màu nhất quán.

Gradient mượt mà và tự nhiên

Gradient giữa hai màu trong HSL thường tạo ra các vùng chuyển tiếp xám hoặc tối không mong muốn. OKLCH giải quyết vấn đề này nhờ mô hình màu dựa trên nhận thức thị giác của con người. Khi chuyển từ màu đỏ sang xanh lá trong OKLCH, gradient sẽ đi qua các sắc thái tự nhiên thay vì bị lệch sang xám như trong HSL.

Chroma giúp kiểm soát độ rực rỡ chính xác

Saturation trong HSL là một giá trị tương đối và không phản ánh đúng cường độ màu thực tế. Chroma trong OKLCH cho phép bạn biết chính xác màu sắc sẽ trông như thế nào và có giới hạn rõ ràng cho từng sắc thái. Điều này giúp tránh tình trạng đặt giá trị quá cao dẫn đến màu bị cắt (clipping) và không hiển thị đúng.

Cú pháp sử dụng OKLCH trong CSS

Sử dụng OKLCH trong CSS vô cùng đơn giản và trực quan:

/* Màu đỏ tươi */
.example-red {
  color: oklch(60% 0.25 25);
}

/* Màu xanh dương đậm */
.example-blue {
  background-color: oklch(50% 0.2 250);
}

/* Màu xanh lá nhạt với độ trong suốt */
.example-green {
  border-color: oklch(85% 0.15 145 / 0.5);
}

Trong đó:

• Giá trị đầu tiên là Lightness (từ 0% đến 100%)
• Giá trị thứ hai là Chroma (từ 0 đến khoảng 0.4, tùy thuộc vào màu)
• Giá trị thứ ba là Hue (góc từ 0 đến 360)
• Có thể thêm giá trị alpha (độ trong suốt) sau dấu gạch chéo, tương tự như rgb()

Xây dựng bảng màu với OKLCH

Một trong những ứng dụng mạnh mẽ nhất của OKLCH là tạo bảng màu có hệ thống. Vì Lightness nhất quán trên mọi Hue, bạn có thể tạo các biến thể sáng, tối của cùng một màu chỉ bằng cách thay đổi giá trị L:

:root {
  --primary-hue: 250;
  --primary-chroma: 0.2;
  
  --color-primary-50:  oklch(95% calc(var(--primary-chroma) * 0.1) var(--primary-hue));
  --color-primary-100: oklch(90% calc(var(--primary-chroma) * 0.2) var(--primary-hue));
  --color-primary-200: oklch(80% calc(var(--primary-chroma) * 0.4) var(--primary-hue));
  --color-primary-300: oklch(70% calc(var(--primary-chroma) * 0.6) var(--primary-hue));
  --color-primary-400: oklch(60% calc(var(--primary-chroma) * 0.8) var(--primary-hue));
  --color-primary-500: oklch(50% var(--primary-chroma) var(--primary-hue));
  --color-primary-600: oklch(40% var(--primary-chroma) var(--primary-hue));
  --color-primary-700: oklch(30% var(--primary-chroma) var(--primary-hue));
  --color-primary-800: oklch(20% var(--primary-chroma) var(--primary-hue));
  --color-primary-900: oklch(10% var(--primary-chroma) var(--primary-hue));
}

Cách tiếp cận này đảm bảo rằng mỗi bước trong thang màu có độ tương phản nhất quán, giúp đáp ứng tiêu chuẩn WCAG về độ tương phản dễ dàng hơn nhiều so với việc thử nghiệm từng giá trị HEX riêng lẻ.

So sánh OKLCH với các không gian màu khác

Hỗ trợ trình duyệt và khả năng tương thích

Tính đến năm 2026, OKLCH đã được hỗ trợ trên tất cả các trình duyệt hiện đại bao gồm Chrome, Edge, Firefox và Safari. Điều này có nghĩa là hơn 95% người dùng internet có thể xem nội dung sử dụng OKLCH mà không gặp vấn đề gì.

Tuy nhiên, nếu bạn cần hỗ trợ các trình duyệt cũ, bạn nên sử dụng kỹ thuật fallback bằng cách khai báo màu HEX hoặc RGB trước màu OKLCH:

.button {
  background-color: #3B82F6; /* Fallback cho trình duyệt cũ */
  background-color: oklch(60% 0.2 250); /* Trình duyệt hiện đại */
}

Các công cụ hỗ trợ chuyển đổi sang OKLCH

Nếu bạn đang sử dụng bảng màu hiện tại và muốn chuyển sang OKLCH, có nhiều công cụ hữu ích:

• OKLCH Color Picker: Công cụ trực tuyến giúp chuyển đổi giữa HEX, RGB, HSL và OKLCH một cách chính xác.
• Color.js: Thư viện JavaScript mạnh mẽ cho phép chuyển đổi giữa hàng chục không gian màu khác nhau.
• PostCSS OKLab Function: Plugin giúp bạn viết OKLCH trong CSS và tự động tạo fallback cho trình duyệt cũ trong quá trình build.
• Figma: Từ phiên bản gần đây, Figma đã hỗ trợ OKLCH trong bảng màu, giúp designer và developer làm việc trên cùng một hệ thống màu sắc.

Khi nào nên bắt đầu sử dụng OKLCH?

Bạn nên cân nhắc chuyển sang OKLCH trong các trường hợp sau:

• Khi xây dựng hệ thống thiết kế (design system) mới và cần bảng màu có cấu trúc rõ ràng
• Khi làm việc với dark mode và cần đảm bảo màu sắc giữ nguyên độ sáng nhận thức khi chuyển đổi
• Khi tạo gradient phức tạp giữa nhiều màu sắc khác nhau
• Khi cần hỗ trợ Display P3 trên thiết bị Apple để hiển thị màu sắc rực rỡ hơn
• Khi muốn cải thiện khả năng tiếp cận (accessibility) thông qua việc kiểm soát độ tương phản chính xác hơn

Lưu ý quan trọng khi sử dụng OKLCH

Mặc dù OKLCH mang lại nhiều lợi ích, bạn cần lưu ý một số điểm sau:

• Giá trị Chroma có giới hạn: Không phải mọi tổ hợp L và H đều cho phép giá trị C cao. Nếu đặt C quá cao, trình duyệt sẽ tự động giảm xuống giá trị tối đa có thể hiển thị, dẫn đến màu không như mong đợi.
• Không phải mọi màu đều có thể biểu diễn: Một số màu sRGB cụ thể không thể biểu diễn chính xác trong OKLCH với độ chính xác tuyệt đối, mặc dù sự khác biệt thường không đáng kể.
• Cần thời gian làm quen: Nếu bạn đã quen với HSL, việc chuyển sang Chroma thay vì Saturation có thể đòi hỏi một chút thực hành để nắm bắt.

Kết luận

OKLCH đánh dấu bước tiến quan trọng trong cách lập trình viên và nhà thiết kế web làm việc với màu sắc. Bằng cách dựa trên nhận thức thị giác của con người thay vì công nghệ màn hình, OKLCH giải quyết những vấn đề cố hữu của HSL và HEX đã tồn tại hàng chục năm. Với khả năng tạo bảng màu nhất quán, gradient tự nhiên và hỗ trợ gam màu rộng, OKLCH không chỉ là xu hướng mà còn là tiêu chuẩn tương lai cho CSS.

Nếu bạn đang bắt đầu một dự án mới hoặc cải tiến hệ thống thiết kế hiện tại, việc áp dụng OKLCH sẽ giúp bạn tiết kiệm thời gian điều chỉnh màu sắc, cải thiện trải nghiệm người dùng và chuẩn bị sẵn sàng cho thế hệ màn hình hiển thị tiếp theo. Hãy thử chuyển đổi vài màu trong dự án của bạn sang OKLCH ngay hôm nay để cảm nhận sự khác biệt.