OKLCH so với HSL
Cả hai định dạng đều mô tả màu bằng sắc độ (hue) và hai giá trị khác. Điểm khác biệt là OKLCH được xây dựng dựa trên cách mắt người nhìn màu, còn HSL thì không.
Vấn đề của độ sáng trong HSL
Đặt màu vàng và màu xanh dương cùng độ sáng HSL, màu vàng sẽ trông sáng hơn hẳn:
color: hsl(60 100% 50%); /* bright yellow */
color: hsl(240 100% 50%); /* dark blue */Trong OKLCH, độ sáng khớp với những gì bạn thực sự thấy hơn nhiều. Các màu có cùng giá trị sẽ trông sáng gần như nhau, nên bảng màu dễ cân bằng hơn.
So sánh trực tiếp
| HSL | OKLCH | |
|---|---|---|
| Độ sáng | Thay đổi theo sắc độ | Khớp gần với cảm nhận của con người |
| Dải màu | Chỉ sRGB | Bao gồm các không gian màu rộng hơn |
| Hỗ trợ trình duyệt | Phổ biến | Tất cả trình duyệt hiện đại |
| Dễ đọc | Quen thuộc | Cần làm quen một chút |
Khi nào nên dùng từng loại
- Dùng OKLCH cho hệ thống thiết kế, các sắc thái được tạo tự động và màu rực rỡ trên màn hình hiện đại.
- Dùng HSL cho những màu dùng nhanh một lần, hoặc khi bạn bắt buộc phải hỗ trợ các trình duyệt rất cũ.
Sẵn sàng chuyển đổi? Hãy chuyển một màu bằng công cụ chuyển HEX sang OKLCH, rồi làm theo hướng dẫn của chúng tôi về cách dùng OKLCH trong CSS.
Công cụ dùng trong hướng dẫn
Chuyển đổi màu OKLCHChọn màu OKLCH bằng thanh trượt độ sáng, độ bão hòa và tông màu, chuyển đổi sang HEX, RGB, HSL và OKLab, kiểm tra gamut sRGB và lấy mã CSS dự phòng.Chuyển HEX sang OKLCHChuyển mã màu HEX sang OKLCH cho CSS hiện đại.Chuyển đổi mã màuCông cụ chuyển đổi màu online miễn phí: đổi HEX sang RGB, HSL, HWB, OKLCH, CMYK và tên màu CSS, rồi tạo bảng màu 50–950 dạng biến CSS.
Câu hỏi thường gặp
OKLCH có tốt hơn HSL không?
Khi xây dựng bảng màu thì thường là có, vì độ sáng của nó nhất quán hơn. HSL vẫn ổn cho các trường hợp đơn giản.
Sự khác biệt giữa LCH và OKLCH là gì?
Cả hai đều mô tả màu theo cách tương tự, nhưng OKLCH dùng một mô hình mới hơn, giúp sắc độ ổn định hơn khi độ sáng thay đổi.
