Hướng dẫn màu sắc CSS độ nét cao

• CSS Color 4 cung cấp cho web một loạt công cụ và tính năng màu sắc phong phú, đồng thời bắt đầu hỗ trợ HD CSS
• Thiết bị hiển thị ngày càng tốt hơn, nhưng trước đây CSS chưa thể hỗ trợ điều đó
• Trong CSS, suốt 25 năm chỉ sử dụng dải màu sRGB, và dải này chỉ biểu đạt được khoảng 30% số màu mà mắt người có thể nhìn thấy
• Từ Chrome 111, hỗ trợ CSS Color Level 4
  • Có thể chọn 12 không gian màu mới hỗ trợ các dải màu như RGB 98, Display p3, Rec2020, ProPhoto
  • Giờ đây đã ngang bằng với Safari, vốn đã hỗ trợ display-p3 từ năm 2016 (dải màu do Apple tạo ra)
• CSS nay đã hỗ trợ màn hình HD, và trên các trình duyệt có hỗ trợ, có thể biểu đạt nhiều hơn 50% số màu

Mục lục bài viết

• Tổng quan
  • Dải màu (Color Gamut) là gì?
  • Phạm vi thị giác của con người
  • Không gian màu (Color Space) là gì?
  • Tóm tắt về dải màu và không gian màu
• Cách tiếp cận nhiều màu sắc hơn, nhiều không gian hơn và kết quả debug hơn
  • Xem lại các không gian màu cổ điển
  • Làm quen với các không gian màu mới trên web
  • Nội suy màu (Interpolation)
  • Kẹp phạm vi
  • Chọn không gian màu
• Di chuyển sang màu CSS HD
  • Kiểm tra hỗ trợ dải màu và không gian màu
  • Debug màu bằng Chrome DevTools
• Kết luận