OKLCH là gì

• OKLCH là mô hình màu hiện đại được thiết kế phù hợp với nhận thức thị giác của con người, với đặc tính sự thay đổi về độ sáng, độ bão hòa và màu sắc giữa các màu được cảm nhận một cách đồng đều, tức là một mô hình màu đồng nhất theo cảm nhận
• Cấu trúc gồm Lightness (độ sáng), Chroma (độ bão hòa), Hue (màu sắc), cho phép tạo bảng màu nhất quán tốt hơn so với các mô hình trước đây
• Chỉ cần thay đổi Hue trong khi giữ nguyên cùng độ sáng và độ bão hòa là có thể tạo ra bảng màu đồng đều, rất hữu ích cho thiết kế UI
• So với sRGB/HSL, nó cung cấp sự thay đổi sáng tối dễ dự đoán và gradient đồng đều, nhưng trong một số trường hợp có thể tạo ra màu ngoài ý muốn
• Trên các màn hình hiện đại như Display-P3, có thể biểu diễn dải màu rộng hơn; đồng thời được hỗ trợ qua CSS Color 4 trên các trình duyệt mới và cũng có xử lý fallback sRGB, nên đang dần trở thành một phần của tiêu chuẩn web

---

Giới thiệu mô hình màu OKLCH

• OKLCH là mô hình màu hiện đại được phát triển với mục tiêu đồng nhất theo cảm nhận (perceptually uniform)
• Mô hình này hoạt động gần hơn với cách con người thực sự nhận biết màu sắc, nên việc xử lý màu sắc trong thiết kế số và phát triển frontend trở nên thuận tiện hơn nhiều

Khái niệm cơ bản về mô hình màu

• Mô hình màu là hệ thống dùng để định nghĩa và biểu diễn màu sắc bằng toán học
• Ví dụ về các mô hình thường dùng: RGB, HSL, LCH, OKLCH, LAB, XYZ
• Mỗi mô hình quyết định mức độ dễ dàng trong việc biểu diễn và thao tác màu sắc

Ví dụ về cách biểu diễn màu

• oklch(0.55 0.18 260)
• hsl(220 100% 50%)
• rgb(0, 128, 255)
• lch(60% 60 260)
• lab(50 -10 -50)
• color(xyz 0.18 0.19 0.6)
• #1E90FF

Gamut (phạm vi không gian màu)

• Gamut là toàn bộ phạm vi màu mà mô hình màu đó có thể biểu diễn
• Các gamut tiêu biểu: sRGB (mặc định của web), Display-P3 (được hỗ trợ trên thiết bị hiện đại)
• Không gian màu ngoài phạm vi gamut còn có nhiều thuộc tính khác như white point, transfer function

Cấu trúc của OKLCH

Cả OKLCH và LCH đều gồm ba giá trị: Lightness, Chroma, Hue
OKLCH dựa trên không gian màu OKLab

• Lightness (độ sáng/độ chói): biểu diễn từ 0~1 hoặc 0%~100%, đảm bảo sự thay đổi độ sáng đồng đều
• Chroma (độ bão hòa): cường độ của màu, tương tự Saturation (độ bão hòa) trong HSL
• Hue (màu sắc): biểu diễn màu theo góc từ 0~360 độ

Ưu điểm và ứng dụng của OKLCH

• Độ sáng nhất quán

  • Trong OKLCH, nếu chỉ thay đổi hue với cùng độ sáng và độ bão hòa, thì mọi màu sẽ được cảm nhận với độ sáng tương tự nhau
  • Với sRGB hay HSL truyền thống, độ sáng hoặc độ bão hòa có thể trông không nhất quán giữa các màu
  • Vì vậy, OKLCH giúp tạo bảng màu đồng nhất theo cảm nhận dễ dàng hơn

• Các mức sáng tối của màu dễ dự đoán

  • Trong OKLCH, khi thay đổi độ sáng, bạn có thể tạo ra nhiều cấp độ màu mà không làm thay đổi hue (màu sắc) hay chroma (độ bão hòa)
  • Với HSL hay các mô hình tương tự, khi độ sáng thay đổi thường xảy ra hiện tượng trôi sắc độ
  • OKLCH cho phép tạo các thang màu sáng tối nhất quán chỉ bằng cách điều chỉnh độ sáng

• Cách xử lý gradient

  • Trong sRGB, gradient là nội suy giữa các giá trị đỏ, lục, lam, nên điểm trung gian có thể bị xỉn hoặc thay đổi độ sáng mạnh
  • OKLCH nội suy theo các trục Lightness, Chroma, Hue, nên có thể tạo gradient tự nhiên hơn
  • Tuy nhiên, vì Hue có cấu trúc vòng tròn, có thể phát sinh biến đổi màu ngoài dự kiến
  • Để tránh điều này, có thể nội suy tuyến tính trong OKLab để có kết quả dễ dự đoán hơn

Hỗ trợ không gian màu

• sRGB không thể bao phủ hết một phần dải màu rộng mà các màn hình hiện đại có thể hiển thị
• Khi dùng OKLCH, các thiết bị hỗ trợ dải màu rộng như Display-P3 có thể thể hiện màu sắc sống động hơn
• Trên các thiết bị chỉ hỗ trợ sRGB, màu sẽ được ánh xạ sang màu gần giống nhất có thể

Giá trị Chroma (độ bão hòa) tối đa

• OKLCH có thể chỉ định về mặt toán học cả những màu nằm ngoài phạm vi mà màn hình thực tế có thể hiển thị
• Ví dụ, giá trị chroma quá lớn như oklch(0.7 0.4 40) sẽ không thể hiển thị thực tế và bị clipping về màu gần nhất
• Cần hiểu khái niệm chroma tối đa và đặt giá trị phù hợp tùy theo sắc độ, độ sáng và không gian màu được chọn (sRGB, Display-P3)

Hỗ trợ trình duyệt và fallback

• Màu OKLCH được giới thiệu trong CSS Color Module Level 4 và hiện đã được phần lớn trình duyệt hiện đại hỗ trợ
• Trên trình duyệt cũ có thể không được hỗ trợ, nên có thể dùng chỉ thị CSS @supports để đặt giá trị fallback

  @layer base {  
    :root {  
      /* sRGB hex */  
      --color-gray-100: #fcfcfc;  
      --color-gray-200: #fafafa;  
      --color-gray-300: #f4f4f4;  
  
      @supports (color: oklch(0 0 0)) {  
        /* OKLCH */  
        --color-gray-100: oklch(0.991 0 0);  
        --color-gray-200: oklch(0.982 0 0);  
        --color-gray-300: oklch(0.955 0 0);  
      }  
    }  
  }  
  

• Trên trình duyệt được hỗ trợ sẽ áp dụng OKLCH, còn trên trình duyệt không hỗ trợ sẽ áp dụng màu sRGB (hex)

Công cụ oklch.fyi

• oklch.fyi là công cụ web cung cấp các tính năng liên quan đến OKLCH như tạo bảng màu OKLCH, chuyển đổi biến CSS, v.v.
• Công cụ này giúp việc ứng dụng màu OKLCH trong thiết kế hệ thống và phát triển theme trở nên dễ dàng hơn