Cách dùng OKLCH trong CSS

Cú pháp

color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* với độ trong suốt */

• Lightness (độ sáng) chạy từ 0% (đen) đến 100% (trắng).
• Chroma (độ bão hòa) cho biết màu rực rỡ đến mức nào. 0 là màu xám, và phần lớn màu dùng được trong thực tế nằm dưới khoảng 0.37.
• Hue (sắc độ) là góc của màu trên bánh xe màu, từ 0 đến 360.

Thử với OKLCH Color Picker, hoặc chuyển màu thương hiệu của bạn bằng HEX to OKLCH Converter.

Tạo bộ shade

Giữ nguyên chroma và hue, chỉ thay đổi lightness:

:root {
  --brand-300: oklch(80% 0.12 255);
  --brand-500: oklch(62% 0.19 255);
  --brand-700: oklch(45% 0.17 255);
}

Tạo trạng thái hover

Cú pháp màu tương đối cho phép bạn suy ra một màu từ màu khác:

.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }

Màu tương đối mới hơn chính oklch(), nên hãy kiểm tra mức hỗ trợ trình duyệt của người dùng bạn.

Trộn màu

Dùng color-mix() để pha trộn hai màu. Trộn trong OKLCH thường cho màu trung gian sạch hơn so với sRGB:

background: color-mix(in oklch, var(--brand-500) 70%, white);

Bạn có thể thử pha màu với Color Mixer.

Thêm fallback

Trình duyệt hiện đại đều hỗ trợ OKLCH. Với trình duyệt rất cũ, hãy đặt giá trị HEX lên trước. Trình duyệt sẽ bỏ qua những gì nó không đọc được:

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

OKLCH to HEX Converter sẽ cho bạn giá trị đó.

Kiểm tra độ tương phản

Lightness giúp dự đoán độ tương phản dễ hơn, nhưng không đảm bảo tuyệt đối. Luôn kiểm tra các cặp chữ và nền bằng Contrast Checker.