Hướng dẫn về màu CSS có độ phân giải cao

CSS Color 4 mang đến các chức năng và công cụ màu gam màu rộng cho web: nhiều màu sắc hơn, nhiều hàm thao tác hơn và độ chuyển màu tốt hơn.

Trong hơn 25 năm, sRGB (màu xanh lục đỏ tiêu chuẩn của màu xanh dương) là màu gamut duy nhất cho các độ dốc và màu CSS, với không gian màu có các thành phần như rgb(), hsl() và hex. Đây là khả năng gam màu phổ biến nhất trong các màn hình; một mẫu số chung. Chúng tôi đã quen với việc chỉ định màu trong đó.

Khi màn hình có nhiều khả năng hiển thị nhiều màu sắc hơn, CSS cần có cách để chỉ định màu từ trong những dải màu rộng hơn này. Các định dạng màu hiện tại không có ngôn ngữ cho dải màu rộng.

Nếu CSS không bao giờ cập nhật, CSS sẽ bị mắc kẹt mãi mãi trong dải màu của thập niên 90, buộc phải không bao giờ khớp với các đề xuất gam màu rộng có trong hình ảnh và video. Treo, chỉ hiển thị 30% màu sắc mà mắt người có thể nhìn thấy. Cảm ơn CSS Color Level 4 đã giúp chúng tôi giải quyết vấn đề, được viết chủ yếu bởi Lea Verou và Chris Liley.

Chrome hỗ trợ các gam màu và hệ màu CSS Color 4. CSS hiện có thể hỗ trợ màn hình HD (độ phân giải cao), chỉ định màu từ gam màu HD trong khi vẫn cung cấp không gian màu theo các chuyên môn.

Hướng dẫn này gồm 3 phần. Hãy đọc tiếp để nhớ lại vị trí của màu sắc. Sau đó, hãy đọc nơi màu sắc sẽ thay đổi và cách quản lý màu trong tương lai bằng cách di chuyển sang màu HD.

Tổng quan

Trong các trình duyệt được hỗ trợ, bạn có thể chọn trong số 50% màu sắc khác. Nếu bạn nghĩ rằng 16 triệu màu nghe có vẻ rất nhiều, hãy chờ cho đến khi bạn thấy bao nhiêu màu một số không gian mới này có thể hiển thị. Ngoài ra, hãy suy nghĩ về tất cả các dải chuyển màu đã phân dải vì không có đủ độ sâu bit, nhưng vấn đề này cũng đã được giải quyết.

Ngoài các màu sắc khác, được cho là màu sắc sống động nhất mà màn hình có khả năng, hệ màu mới còn cung cấp các công cụ và phương thức độc đáo để quản lý và tạo hệ thống màu. Ví dụ: trước đây chúng tôi có HSL và kênh "độ nhẹ" của nó, đó là kênh tốt nhất mà các nhà phát triển web có. Hiện tại trong CSS, chúng tôi có "mức độ nhẹ nhàng trong nhận thức" của LCH.

Hơn nữa, tính năng chuyển màu và trộn có một số nâng cấp: hỗ trợ không gian màu, tuỳ chọn nội suy màu sắc và ít dải hơn.

Hình ảnh sau đây cho thấy một số bản nâng cấp kết hợp.

Vấn đề với màu sắc và web là CSS chưa sẵn sàng về độ phân giải cao, trong khi hầu hết các màn hình mà hầu hết mọi người đều có trong túi, vòng hoặc gắn trên tường đều có gam màu rộng, màu có độ phân giải cao. Khả năng hiển thị màu của màn hình tăng nhanh hơn CSS, giờ đây CSS đã sẵn sàng để bắt kịp.

Không chỉ có "nhiều màu sắc hơn". Ở cuối các tài liệu này, bạn có thể chỉ định thêm màu, cải thiện độ dốc và chọn không gian màu cũng như gam màu phù hợp nhất cho từng nhiệm vụ.

Gam màu là gì?

Gam biểu thị kích thước của một thứ gì đó. Cụm từ "hàng triệu màu" là một nhận xét về gam màu của màn hình hoặc dải màu để chọn. Trong hình ảnh sau đây, 3 gam màu được so sánh với nhau. Kích thước càng lớn thì càng có nhiều màu.

Một gam màu cũng có thể có tên. Giống như một quả bóng rổ với một quả bóng chày hoặc một cốc cà phê thông gió với một ông lớn; tên cho kích thước có thể giúp mọi người giao tiếp. Khi biết được các tên gam màu này, bạn có thể giao tiếp và nhanh chóng hiểu được các dải màu.

Bài viết này xem xét các gam màu trước đây. Bạn có thể đọc về 7 gam màu mới trong phần Sử dụng nhiều màu hơn và không gian mới.

Gam thị giác của con người

Các gam màu thường được so sánh với gam màu trực quan của con người; toàn bộ các màu mà chúng tôi tin rằng mắt người có thể nhìn thấy. HVS thường được mô tả bằng sơ đồ màu, như sau:

Hình dạng ngoài cùng là những gì chúng ta có thể nhìn thấy dưới dạng con người, còn hình tam giác bên trong là phạm vi hàm rgb(), còn gọi là hệ màu sRGB.

Như bạn đã thấy hình tam giác ở trên, so sánh kích thước gam màu, bạn sẽ thấy hình tam giác ở bên dưới. Đây là cách ngành giao tiếp về gam màu và so sánh các gam màu đó.

Hệ màu là gì?

Không gian màu là sự sắp xếp của một gam màu, thiết lập một hình dạng và phương thức truy cập vào màu. Nhiều hình dạng là các hình dạng 3D đơn giản như hình khối hoặc hình trụ. Cách sắp xếp màu này xác định các màu đứng cạnh nhau và cách hoạt động của việc truy cập và nội suy màu.

RGB giống như không gian màu hình chữ nhật, trong đó các màu được truy cập bằng cách chỉ định toạ độ trên 3 trục. HSL là một không gian màu hình trụ, trong đó màu được truy cập bằng góc màu và toạ độ trên 2 trục

Thông số kỹ thuật cấp 4 giới thiệu 12 không gian màu mới để tra cứu màu. Các tính năng này bổ sung cho 4 không gian màu có sẵn trước đó:

• Thập lục phân
• RGB
• HSL
• HWB

Tóm tắt về gam màu và không gian màu

Không gian màu là sự liên kết màu, trong đó gam màu là một dải màu. Hãy xem gam màu là tổng các hạt và không gian màu là một cái chai được tạo ra để chứa phạm vi hạt đó.

Đây là hình ảnh tương tác của Alexey Ardov minh hoạ không gian màu. Trỏ, kéo và thu phóng trong bản minh hoạ này. Hãy thay đổi hệ màu để xem hình ảnh của các không gian khác.

• Sử dụng gam màu để nói về một loạt màu, chẳng hạn như gam màu thấp hoặc gam hẹp so với phạm vi cao hoặc gam màu rộng.
• Sử dụng không gian màu để nói về cách sắp xếp màu, cú pháp dùng để chỉ định màu, thao tác với màu và nội suy qua màu sắc.

Đánh giá không gian màu cổ điển {#classic-color-spaces}

CSS Color 4 trình bày một loạt các tính năng và công cụ mới cho CSS và màu sắc. Đầu tiên, hãy tóm tắt nguồn gốc của màu sắc trước khi có các tính năng mới này.

Kể từ những năm 2000, bạn có thể sử dụng thuộc tính sau cho mọi thuộc tính CSS chấp nhận màu dưới dạng giá trị: thập lục phân (số thập lục phân), rgb(), rgba(), theo tên như hotpink hoặc với các từ khoá như currentColor.

Khoảng năm 2010, tuỳ thuộc vào trình duyệt của bạn, CSS có thể sử dụng màu hsl(). Sau đó, vào năm 2017, hệ thống lục phân có alpha đã xuất hiện. Cuối cùng, chỉ gần đây, hwb() mới bắt đầu được hỗ trợ trong các trình duyệt.

Tất cả các không gian màu cổ điển này đều có màu tham chiếu trong cùng một gam màu, sRGB.

Hàm THỬ NGHIỆM

Không gian màu hex chỉ định R, G, B và A cùng với các số thập lục phân. Các ví dụ về mã sau đây cho thấy tất cả các cách cú pháp này có thể chỉ định độ mờ màu đỏ, xanh lục và xanh dương cộng với độ mờ.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

Hệ màu RGB cho phép truy cập trực tiếp vào các kênh màu đỏ, xanh lục và xanh dương. Nó cho phép chỉ định số tiền từ 0 đến 255 hoặc dưới dạng phần trăm từ 0 đến 100. Cú pháp này tồn tại trước khi chuẩn hoá cú pháp trong quy cách, vì vậy, bạn sẽ thấy các cú pháp dấu phẩy và không có dấu phẩy. Từ giờ trở đi, dấu phẩy không còn cần thiết nữa.

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);

  --empty-channels: rgb(none none none);
}

HSL

Là một trong những không gian màu đầu tiên định hướng theo ngôn ngữ và hoạt động giao tiếp của con người, HSL (độ bão hoà màu và độ sáng) cung cấp tất cả các màu trong gam màu sRGB mà không đòi hỏi não bộ phải biết mức độ tương tác của màu đỏ, xanh lục và xanh dương. Giống như RGB, ban đầu nó cũng có dấu phẩy trong cú pháp, nhưng chuyển tiếp, dấu phẩy không còn cần thiết nữa.

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB (Quản lý thiết bị di động)

Một không gian màu khác của gam màu sRGB định hướng theo cách con người mô tả màu là HWB (màu sắc, độ trắng, độ đen). Tác giả có thể chọn một sắc độ và kết hợp màu trắng hoặc đen để tìm màu mong muốn.

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

Các bước tiếp theo

Đọc về các hệ màu, cú pháp và công cụ mới, sau đó tìm hiểu cách di chuyển sang màu HD.

Hệ màu không phải sRGB trên web mới chỉ mới bắt đầu, nhưng chúng ta sẽ thấy các nhà thiết kế và nhà phát triển sử dụng nhiều hơn theo thời gian. Chẳng hạn, việc biết được hệ màu nào cần dùng để xây dựng hệ thống thiết kế là một công cụ hiệu quả cho thanh công cụ của nhà sáng tạo. Mỗi hệ màu cung cấp các tính năng riêng biệt và lý do chúng được thêm vào thông số kỹ thuật CSS. Bạn có thể bắt đầu từ quy mô nhỏ với những tính năng này và thêm vào nếu cần.

Tài nguyên

Đọc thêm các bài viết cấp 5 về màu của chúng tôi.

• Cú pháp màu tương đối của CSS
• Kết hợp màu CSS

Ngoài ra, bạn có thể tìm đọc thêm trên web:

• Mô-đun màu CSS cấp 4 từ W3C

• Mô-đun màu CSS cấp 5 từ W3C

• Màu LCH trong CSS: cái gì, tại sao và như thế nào?

• Tốt hơn Phòng thí nghiệm? Giảm gam màu: CIE Lab và OKLab

• Hướng đến màu sắc phong phú hơn trên web

• Okhsv và Okhsl: Hai hệ màu mới để chọn màu

• Hướng đến màu sắc phong phú hơn trong Chromium (PDF)

• LCH là hệ màu phù hợp nhất!

• Thiết kế hệ thống màu dễ tiếp cận

• Color Spaces của Hannah Weller

• Gam rộng màu trong CSS với Display-P3

• Hệ màu CIE 1931

• Định dạng màu trong CSS

• Không gian màu sắc của Bartosz Ciechanowski

Và công cụ:

• afc163.github.io/color3d/
• Hình ảnh hoá Gamut
• Trình tạo độ dốc sống động