OKLCH là gì: định dạng màu cuối cùng cũng khớp với mắt người

OKLCH là gì

OKLCH là dạng tọa độ cực của Oklab, một không gian màu theo cảm nhận do Björn Ottosson công bố năm 2020. Nó gồm ba con số. L là độ sáng cảm nhận, từ 0 (đen) đến 1 hay 100% (trắng). C là độ rực (chroma), tức lượng màu, từ 0 (xám) đến khoảng 0,37 với những màu rực nhất mà màn hình hiển thị được. H là góc sắc màu (hue), từ 0 đến 360 độ.

Cùng một màu viết ở các định dạng khác nhau trông như sau. Mọi giá trị bên dưới đều được PickShade tính trực tiếp, nên bạn có thể sao chép nguyên văn.

Vì sao OKLCH tốt hơn HSL

Độ sáng của HSL là một công thức, không phải cảm nhận. hsl(60 100% 50%) là màu vàng tươi, còn hsl(240 100% 50%) là màu xanh dương đậm, vậy mà cả hai đều ghi độ sáng 50%. Dựng bảng màu trên HSL thì sắc màu nào cũng phải chỉnh tay.

Trong OKLCH, các màu có cùng L trông sáng như nhau. Bạn có thể giữ L và C rồi xoay H để có một bộ sắc màu cân đối, hoặc giữ H và C rồi đổi L theo từng bậc để có thang sắc độ gọn gàng. Đó là lý do Tailwind CSS v4 định nghĩa toàn bộ bảng màu mặc định bằng OKLCH.

Độ sáng còn giúp dự đoán độ tương phản. Chữ có L chênh với nền khoảng 0,4 trở lên thường dễ đọc, nhờ vậy việc chọn màu đạt chuẩn tiếp cận trở nên dễ tính toán hơn nhiều.

Cú pháp trong CSS

Độ sáng có thể viết dưới dạng phần trăm hoặc số từ 0 đến 1. Độ rực là một con số. Sắc màu là một góc tính bằng độ. Độ trong suốt đặt sau dấu gạch chéo.

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

Hỗ trợ trình duyệt

oklch() chạy trên mọi trình duyệt hiện hành: Safari từ bản 15.4, Chrome và Edge từ bản 111, Firefox từ bản 113. Như vậy là hơn 90% người dùng. Với trình duyệt rất cũ, hãy đặt một giá trị HEX dự phòng ở dòng ngay trước giá trị OKLCH.

color: #ff5733;
color: oklch(68% 0.21 33.7);

Giới hạn độ rực và gam màu

OKLCH có thể mô tả những màu mà không màn hình nào hiển thị được. Độ rực tối đa phụ thuộc vào độ sáng và sắc màu: màu vàng rực chỉ có ở vùng độ sáng cao, màu xanh dương rực chỉ có ở vùng độ sáng thấp. Khi giá trị nằm ngoài gam sRGB hoặc Display P3, trình duyệt sẽ kéo nó về trong gam, và màu có thể bị lệch.

PickShade đánh dấu các màu nằm ngoài sRGB và đưa ra màu gần nhất nằm vừa trong gam, tìm bằng cách giảm độ rực nhưng giữ nguyên độ sáng và sắc màu, đúng phương pháp mà CSS Color 4 khuyến nghị.

Cách chuyển HEX sang OKLCH

Quá trình chuyển đổi đi từ HEX sang sRGB, từ sRGB sang ánh sáng tuyến tính, từ sRGB tuyến tính sang không gian tế bào nón LMS, lấy căn bậc ba, nhân ma trận để ra Oklab và cuối cùng đổi Oklab sang tọa độ cực. Làm bằng tay rất dễ sai, vì vậy hãy dán màu bất kỳ vào công cụ chuyển đổi và sao chép kết quả.

Hỏi đáp