Bộ chọn & chuyển đổi màu OKLCH

OKLCH là gì?

OKLCH là không gian màu do Björn Ottosson thiết kế (2020) và được đưa vào đặc tả Color Level 4 của CSS. Nó mô tả một màu bằng ba giá trị trực quan: L (Lightness – độ sáng, 0–100%), C (Chroma – độ rực của màu, khoảng 0–0.37 với màu trên màn hình) và H (Hue – góc màu từ 0 đến 360°). Khác với HSL, OKLCH đồng đều về mặt thị giác: hai màu có cùng L sẽ thực sự trông sáng như nhau với mắt người.

Vì sao lập trình viên chuyển từ HSL sang OKLCH

• Bảng màu dễ dự đoán: trong HSL, màu vàng ở độ sáng 50% trông sáng hơn hẳn màu xanh dương ở 50%. Trong OKLCH, chỉ thay đổi tông màu thì độ sáng cảm nhận vẫn giữ nguyên, rất phù hợp để tạo các trạng thái nút và thang màu cho design system nhất quán (đó là lý do Tailwind CSS v4 dùng bảng màu OKLCH).
• Tính toán độ tương phản tốt hơn: một chênh lệch độ sáng cố định sẽ cho ra chênh lệch độ tương phản khá đồng đều.
• Màu gamut rộng: OKLCH có thể biểu diễn các màu Display P3 mà HEX và rgb() không làm được, nhờ vậy màn hình hiện đại hiển thị được màu sống động hơn.

Gamut và giá trị dự phòng

Không phải tổ hợp L/C/H nào cũng hiển thị được trên màn hình sRGB. Khi độ bão hòa quá cao, công cụ này giữ nguyên độ sáng và tông màu rồi giảm độ bão hòa cho đến khi màu nằm trong gamut, sau đó xuất kết quả đó làm giá trị HEX/RGB dự phòng. Trong CSS, bạn nên viết giá trị dự phòng trước và OKLCH sau; các trình duyệt hỗ trợ OKLCH sẽ dùng dòng thứ hai:

color: #e5484d;
color: oklch(63% 0.2 25);

OKLCH và OKLab

OKLab là cùng không gian màu nhưng dùng tọa độ vuông góc (L, a, b). Nó lý tưởng để trộn màu và tạo gradient — bạn có thể thử Bộ trộn màu — còn OKLCH dễ chỉnh sửa hơn cho con người.

Cũng được tìm dưới tên: oklch, oklab, màu perceptual, hex sang oklch, oklch sang hex, bộ chọn màu oklch, bộ chọn màu, gamut srgb.

Các công cụ dùng kèm tốt với Chuyển đổi màu OKLCH

• Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
• Tạo bảng màu Tailwind — Dán một màu thương hiệu và nhận thang màu 11 bước (50 đến 950) được cân bằng, tính theo OKLCH, kèm gợi ý độ tương phản và xuất file cho Tailwind v3, v4, CSS và SCSS.
• Chuyển HEX sang RGBA — Dán mã HEX, kéo thanh độ mờ và sao chép đúng đoạn CSS bạn cần: rgba() truyền thống, rgb( / alpha) hiện đại hoặc HEX 8 số.
• Kiểm tra độ tương phản APCA — Tính độ tương phản độ sáng APCA (Lc) giữa chữ và nền, xem chúng phù hợp với những trường hợp nào, và so sánh với tỷ lệ WCAG 2 truyền thống.