- Không gian màu OKLCH khác với RGB hay HSL truyền thống ở chỗ dựa trên nhận thức của con người, nên chính xác và dễ dự đoán hơn
- Phù hợp để cải thiện hệ thống thiết kế và khả năng truy cập, đặc biệt mạnh trong việc biểu diễn màu gam rộng như P3, giúp tương thích tốt hơn với các thiết bị hiện đại
oklch() là định dạng màu dễ đọc và trực quan, giúp thao tác màu bằng mã nguồn trở nên đơn giản hơn. Nó tách biệt độ sáng (L), độ bão hòa (C), màu sắc (H) và độ mờ (a)- Cùng với đặc tả CSS Colors 4/5, các tính năng thao tác màu gốc đang được tăng cường, vì vậy OKLCH là một lựa chọn hướng tới tương lai
- Hệ sinh thái như Stylelint, plugin Figma, thư viện JS, v.v. cũng đang phát triển nhanh chóng, mang lại tác động tích cực cho sự cộng tác giữa thiết kế và phát triển
- Tuy vậy, hệ sinh thái vẫn chưa thực sự trưởng thành, và một số tổ hợp màu có thể không hiển thị được trên mọi màn hình
Áp dụng OKLCH vào dự án
- Tìm các giá trị màu trong CSS hiện có và chuyển đổi sang OKLCH, sau đó dùng plugin Figma hoặc công cụ chuyển đổi để sao chép và áp dụng màu OKLCH
- Sắp xếp các màu trong CSS thành bảng màu thuộc tính tùy chỉnh để tăng khả năng tái sử dụng và bảo trì
- Dùng Stylelint và plugin để tự động phát hiện và ngăn chặn việc sử dụng các màu ngoài OKLCH
- Tích hợp Stylelint vào môi trường CI để tự động hóa việc kiểm tra tính nhất quán của màu sắc
Những lợi ích đạt được sau khi chuyển sang OKLCH
- Mã nguồn dễ đọc hơn
- Chỉnh sửa màu sắc có thể dự đoán được
- Xây dựng hệ thống thiết kế dựa trên màu tương đối
- Hỗ trợ các biểu đạt thị giác nâng cao như màu P3
- Khả năng cộng tác tốt hơn với đội ngũ thiết kế
1 bình luận
Có vẻ như việc viết và đọc các chuỗi như đèn màu DMX sẽ trở nên thuận tiện hơn đáng kể.