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

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

Adam Argyle

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

https://almanac.httparchive.org/en/2022/css#colors

Vì màn hình có thể hiển thị nhiều màu sắc hơn, CSS cần để chỉ định màu trong phạm vi rộng hơn này. Đị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 cập nhật, nó sẽ bị mắc kẹt vĩnh viễn trong dải màu của thập niên 90, buộc không bao giờ khớp với các cung cấp gam màu rộng có trong hình ảnh và video. Bị chặn, chỉ hiển thị 30% số màu 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ợ gam màu Màu CSS 4 và hệ màu. CSS hiện có thể hỗ trợ HD (độ phân giải cao) hiển thị, chỉ định màu từ gam màu HD đồng thời cung cấp không gian màu với chuyên môn.

Một loạt hình ảnh được hiển thị chuyển đổi giữa màu rộng và màu hẹp gam màu, minh hoạ độ sống động của màu sắc và hiệu ứng của nó.
Hãy tự mình trải nghiệm

Hướng dẫn này có ba phần. Đọc tiếp để nhớ vị trí của màu sắc. Sau đó: đọc màu sắc sẽ xuất hiện ở đâu 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ợ, có thêm 50% màu để bạn lựa chọn. Nếu bạn nghĩ 16 triệu màu nghe có vẻ rất nhiều, hãy chờ đến khi bạn xem có bao nhiêu màu những không gian mới này có thể hiển thị. Ngoài ra, hãy nghĩ về tất cả các độ dốc được gắn dải vì không đủ bit-depth cũng đã được giải quyết.

Ngoài nhiều màu sắc hơn, có thể là màu sống động nhất trên màn hình, hệ màu mới cung cấp những công cụ và phương pháp độc đáo để quản lý và tạo hệ thống màu. Ví dụ: trước đây, chúng ta có HSL và "độ nhẹ" của nó kênh đó là những nhà phát triển web giỏi nhất. Giờ đây, trong CSS, chúng tôi có "sự nhẹ nhàng trực quan" của LCH.

Xem trước cho chính bạn trên Codepen

Hơn nữa, độ dốc và kết hợp có một số nâng cấp: hỗ trợ hệ màu, màu sắc các lựa chọn nội suy và ít dải hơn.

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

Hai kiểu kết hợp màu hàng đầu nằm ở chế độ sRGB và có màu sRGB. Hai kiểu kết hợp màu dưới cùng đang hiển thị p3. Màn hình p3 có nhiều nội dung hơn màu rực rỡ và sự kết hợp dẫn đến màu đen và trắng ở giữa, trong đó sRGB có vẻ hơi khử bão hoà và pha trộn ở giữa không phải là các kết quả đen trắng.
https://codepen.io/web-dot-dev/pen/poZgXQb

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

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

Gam màu là gì?

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

Gam màu cũng có thể có tên. Chẳng hạn như một quả bóng rổ đấu với một quả bóng chày hoặc một cốc cà phê vente so với một cốc cà phê lớn; một cái tên cho kích thước có thể giúp mọi người giao tiếp. Khi học được những tên gam màu này, bạn có thể giao tiếp và giúp bạn hiểu được nhiều màu sắc.

Bài viết này xem xét các gam màu trước đó. Bạn có thể đọc về bảy gam màu mới trong Dùng thêm nhiều màu và không gian mới hơn.

Gam thị giác người

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

Nguồn: Wikipedia

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

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

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 hình dạng và phương pháp truy cập màu sắc. Nhiều loại có hình dạng 3D đơn giản như khối lập phương hoặc hình trụ. Màu này cách sắp xếp xác định màu nào cạnh nhau và cách truy cập và nội suy màu sắc sẽ có tác dụng.

RGB giống như hệ màu hình chữ nhật, trong đó màu được truy cập bằng cách chỉ định toạ độ trên 3 trục. HSL là 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

https://en.wikipedia.org/wiki/HSL_and_HSV

Quy cách cấp 4 giới thiệu 12 hệ màu mới để tra cứu các màu. Đây là màu ngoài 4 màu không gian đã có trước đây:

• Hệ thập lục phân
• RGB
• HSL
• HWB

Tóm tắt về gam màu và hệ màu

Hệ màu là một bản đồ ánh xạ các màu, trong đó gam màu là một dải màu. Xem xét gam màu như tổng các hạt và hệ màu là một cái chai để giữ phạm vi hạt đó.

Sau đây là ảnh tương tác của Alexey Ardov minh hoạ hệ màu. Trỏ, kéo và phóng to trong bản minh hoạ này. Thay đổi hệ màu để xem hình ảnh trực quan về các không gian khác.

• Sử dụng gam màu để trình bày nhiều màu, chẳng hạn như dải màu thấp hoặc hẹp gam so với gam cao hoặc gam rộng.
• Sử dụng không gian màu để thảo luận về cách sắp xếp màu sắc, cú pháp dùng để chỉ định một màu sắc, thao tác với màu sắc và nội suy bằng màu sắc.

Ở trên là gam màu sRGB của các hạt phù hợp với hệ màu khối lập phương RGB Nguồn hình ảnh

Đánh giá hệ màu cổ điển {#classic-color-spaces}

Màu CSS 4 phác thảo một loạt nhãn mới các tính năng và công cụ dành cho CSS và màu sắc. Đầu tiên, hãy tóm tắt lại vị trí của màu trước đây các tính năng mới này.

Kể từ những năm 2000, bạn đã có thể sử dụng các tính năng sau cho mọi tài sản 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 có các từ khóa 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, mã hex có alpha xuất hiện. Chỉ cuối cùng gần đây, hwb() đã bắt đầu bắt đầu trong các trình duyệt.

Tất cả hệ màu cổ điển đều tham chiếu màu trong cùng một gam màu, sRGB.

HEX

Hỗ trợ trình duyệt

• 1
• 12
• 1
• 1

Nguồn

Hệ màu hex chỉ định R, G, B và A có số thập lục phân. Nội dung sau đây ví dụ về mã cho thấy tất cả cách mà cú pháp này có thể chỉ định dấu cộng màu đỏ, xanh lục và xanh dương độ 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ỗ trợ trình duyệt

• 1
• 12
• 1
• 1

Nguồn

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. Hàm này cho phép chỉ định một số tiền từ 0 đến 255 hoặc dưới dạng tỷ lệ phần trăm từ 0 đến 100. Cú pháp này đã xuất hiện trước khi một số quy trình chuẩn hoá cú pháp trong để bạn sẽ thấy cú pháp dấu phẩy và không có dấu phẩy trong ký tự đại diện. Di chuyển xuôi thì dấu phẩy không còn được yêu cầu 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

Hỗ trợ trình duyệt

• 1
• 12
• 1
• 3,1

Nguồn

Là một trong những hệ màu đầu tiên tự định hướng theo ngôn ngữ của con người và giao tiếp, HSL (độ bão hoà màu và độ sáng) cung cấp tất cả màu sắc trong Gam màu sRGB mà không cần não phải nhận biết màu đỏ, màu xanh lục và màu xanh lam như thế nào tương tác. Giống như RGB, ban đầu, RGB cũng có dấu phẩy trong cú pháp, nhưng chuyển xuôi thì dấu phẩy không còn được yêu cầu 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

Hỗ trợ trình duyệt

• 101
• 101
• 96
• 15

Nguồn

Một hệ màu gam màu sRGB khác được định hướng theo cách con người mô tả màu sắc là HWB (màu sắc, độ trắng, độ đen). Tác giả có thể chọn tông màu 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ề không gian màu, cú pháp và công cụ mới, thì hãy tìm hiểu cách chuyển sang màu HD.

Các hệ màu không phải sRGB trên web vẫn còn ở giai đoạn đầu, nhưng chúng ta sẽ nhận thấy mức sử dụng của các nhà thiết kế và nhà phát triển tăng lên theo thời gian. Xác định hệ thống màu để xây dựng một hệ thống thiết kế, chẳng hạn, là một công cụ mạnh mẽ Thanh công cụ dành cho nhà sáng tạo. Mỗi hệ màu mang đến những đặc điểm riêng và lý do khiến hệ màu đó vào thông số CSS, nên bạn có thể bắt đầu với từng thành phần nhỏ rồi thêm khi cần.

Tài nguyên

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

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

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

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

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

• Màu LCH trong CSS: cái gì, tại sao và cách thức?

• Tốt hơn phòng thí nghiệm? Giảm gam màu: Phòng thí nghiệm CIE & 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

• Chuyển đến màu sắc phong phú hơn trong Chromium (PDF)

• LCH là hệ màu tốt nhất!

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

• Color Spaces, của Hannah Weller

• Màu gam rộng trong CSS với Display-P3

• Hệ màu CIE 1931

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

• Color Spaces của Bartosz Ciechanowski

Và công cụ:

• ff163.github.io/color3d/
• Hình ảnh ngẫu nhiên
• Trình tạo độ dốc sống động