Tạo CSS gradient đẹp không có "vùng chết màu xám"

• Khi tạo linear gradient chuyển từ màu vàng sang màu xanh dương, sẽ xuất hiện một "gray dead zone" ở giữa

→ Đó là vì thuật toán linear-gradient của CSS xác định giá trị màu của pixel bằng cách lấy trung bình toán học trong RGB

→ Trong không gian màu RGB, nếu tất cả giá trị RGB đều bằng nhau thì luôn trở thành màu thang xám

• Nếu lấy trung bình theo HSL (Hue / Saturation / Lightness) thì sẽ không xuất hiện vùng chết màu xám

• Nhưng nếu đơn giản tạo gradient bằng HSL thì vì "không tính đến nhận thức của con người", nó sẽ trông quá sáng và quá rực

→ Dù có cùng độ sáng, nhưng màu vàng được cảm nhận là sáng hơn

• Vì vậy, dùng các chế độ như HCL, được mô hình hóa dựa trên thị giác con người, có thể sẽ tốt hơn

• Vấn đề là trong CSS hiện vẫn chưa có tính năng chỉ định các chế độ màu như HSL/HCL

→ Vì CSS Gradient không bị cố định chỉ với 2 màu, có thể giải quyết bằng cách chỉ định nhiều màu, từ 10 màu trở lên

• Có thể tạo và sử dụng CSS gradient bằng các chế độ màu như LRGB/HSL/HSV/HCL thông qua Gradient Generator được phát hành kèm theo

[xguru]

Nội dung liên quan đến HSL tôi đã tổng hợp trong bài viết đã đăng trước đây.

• HSLuv - không gian màu thân thiện với nhà phát triển https://vi.news.hada.io/topic?id=1691