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, các chức năng thao tác và độ dốc 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 đã rất quen thuộc với việc chỉ định màu trong gam màu này.
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. Bị mắc kẹt, 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 thoát khỏi cái bẫy này; được viết chủ yếu bởi Lea Verou và Chris Liley.
Từ Chrome 111 là tính năng hỗ trợ cho các gam màu và không gian màu CSS Color 4, tham gia Safari đã hỗ trợ display-p3 kể từ năm 2016. CSS hiện có thể hỗ trợ các 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 hệ màu theo các chuyên môn. Hướng dẫn này sẽ giải thích cách bạn có thể bắt đầu tận dụng thế giới màu sắc mới này.
Hãy tự mình dùng thử
Trong các trình duyệt hỗ trợ, có thêm 50% màu sắc để lựa chọn! 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ống động nhất trên màn hình, không gian 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. Hai cách kết hợp màu trên cùng được trình bày theo sRGB. Hai kiểu kết hợp màu ở dưới cùng là màn hình p3. Màn hình p3 có màu sắc rực rỡ hơn và việc kết hợp tạo ra màu đen và trắng hoàn toàn ở giữa. Trong trường hợp sRGB có vẻ hơi khử bão hoà và hỗn hợp ở giữa không phải là kết quả đen hoặc trắng hoàn toàn.
https://codepen.io/web-dot-dev/pen/poZgXQb
Hướng dẫn này sẽ cho biết vị trí của màu sắc, vị trí của màu sắc và cách CSS sẽ bật và hỗ trợ các nhà phát triển web quản lý màu sắc.
Tổng quan
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.
Ngoài ra, còn có nhiều tính năng khác ngoài "màu sắc khác". Ở cuối bài viết 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 tác 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 sẽ giới thiệu cho bạn 7 gam màu mới, tất cả đều có phạm vi rộng hơn sRGB, đồng thời mô tả các tính năng khác nhau của các gam màu đó để giúp bạn chọn gam màu để sử dụng:
Gam thị giác của con người
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 từ 7 gam màu mới đã được chia sẻ trước đó:
- Tuyến tính sRGB
- LCH
- okLCH
- Hàm LAB
- okLAB
- Màn hình P3
- Rec2020
- A98 RGB
- Prophoto RGB
- XYZ
- XYZ d50
- XYZ d65
Những màu này bổ sung cho 4 hệ màu có sẵn trước đó:
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.
Cách sử dụng nhiều màu hơn, không gian mới và kết quả gỡ lỗi
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. Sau đó là phần tổng quan về hệ màu, cú pháp và công cụ mới.
Codepen sau đây hiển thị tất cả cú pháp màu mới và cũ:
Bài đánh giá về hệ màu cổ điển
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%);
}
Làm quen với hệ màu mới trên web
Các hệ màu sau đây cho phép bạn truy cập vào các gam màu lớn hơn sRGB. Không gian màu display-p3 cung cấp số màu nhiều gấp đôi so với RGB, trong khi Rec2020 có số lượng màu nhiều gấp đôi so với display-p3. Có rất nhiều màu sắc!
Hàm color()
Bạn có thể sử dụng hàm color() mới cho bất kỳ không gian màu nào chỉ định màu bằng các kênh R, G và B. color() lấy một tham số không gian màu trước, sau đó là một chuỗi các giá trị kênh cho RGB và một số alpha (không bắt buộc).
Bạn sẽ thấy nhiều không gian màu mới sử dụng hàm này vì các hàm chuyên biệt như rgb, srgb, hsl, hwb, v.v. đang phát triển thành một danh sách dài, dễ dàng hơn để có không gian màu làm tham số.
Ưu điểm
- Không gian chuẩn hoá để truy cập vào các hệ màu sử dụng kênh RGB.
- Có thể mở rộng theo không gian màu dựa trên gam màu rộng bất kỳ.
Nhược điểm
- Không hoạt động với HSL, HWB, LCH, okLCH hoặc okLAB
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
sRGB qua color()
Không gian màu này cung cấp các tính năng tương tự như rgb(). Ngoài ra, giá trị này còn cung cấp các thập phân từ 0 đến 1, được sử dụng chính xác như 0% đến 100%.
Ưu điểm
- Gần như tất cả các màn hình đều hỗ trợ dải màu của hệ màu này.
- Hỗ trợ công cụ thiết kế.
Nhược điểm
- Không tuyến tính về mặt khái niệm (chẳng hạn như
lch()là) - Không có gam màu rộng.
- Chuyển màu thường đi qua vùng chết.
.valid-css-srgb-colors {
--percents: color(srgb 34% 58% 73%);
--decimals: color(srgb .34 .58 .73);
--percents-with-opacity: color(srgb 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb none none none);
--empty-channels-black2: color(srgb);
}
sRGB tuyến tính thông qua color()
Thay thế tuyến tính này cho RGB mang lại cường độ kênh có thể dự đoán được.
Ưu điểm
- Quyền truy cập trực tiếp vào các kênh RGB, thích hợp cho những hoạt động như công cụ phát triển trò chơi hoặc trình chiếu ánh sáng.
Nhược điểm
- Không tuyến tính về mặt khái niệm.
- Màu đen và trắng được lấp đầy ở các cạnh.
.valid-css-srgb-linear-colors {
--percents: color(srgb-linear 34% 58% 73%);
--decimals: color(srgb-linear .34 .58 .73);
--percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
--decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);
/* empty */
--empty-channels-black: color(srgb-linear none none none);
--empty-channels-black2: color(srgb-linear);
}
Chuyển màu sẽ được thảo luận chi tiết sau, nhưng bạn có thể xem hiệu ứng chuyển màu đen sang trắng srgb và linear-srgb để minh hoạ sự khác biệt của chúng:
LCH (Thuỵ Điển)
Không gian đầu tiên của bài đăng này giới thiệu cú pháp để truy cập vào các màu bên ngoài gam màu RGB! Đây cũng là công cụ đầu tiên giúp bạn dễ dàng tạo màu ngoài gam màu cho màn hình. Điều này là do bất kỳ màu không gian CIE nào (lch, oklch, lab, oklab) đều có thể biểu thị toàn bộ phổ màu mà con người nhìn thấy được.
Hệ màu này được mô hình hoá dựa trên thị giác của con người và cung cấp cú pháp để chỉ định bất kỳ màu nào trong số đó và các màu khác. Kênh LCH là độ sáng, sắc độ và sắc độ. Hue là một góc, như trong HSL và HWB. Độ sáng là một giá trị nằm trong khoảng từ 0 đến 100, nhưng không giống như độ sáng của HSL, đó là độ sáng đặc biệt, "về mặt khái niệm tuyến tính", tập trung vào con người. Sắc độ tương tự như độ bão hoà; có thể nằm trong khoảng từ 0 đến 230 nhưng cũng không bị ràng buộc về mặt kỹ thuật.
Ưu điểm
- Thao tác màu sắc có thể dự đoán được nhờ vào cảm giác tuyến tính (xem oklch).
- Sử dụng các kênh quen thuộc.
- Thường có độ dốc rực rỡ.
Nhược điểm
- Dễ dàng thoát khỏi gam màu.
- Trong một số ít trường hợp, độ dốc có thể cần được điều chỉnh ở điểm giữa để ngăn sự dịch chuyển màu.
.valid-css-lch-colors {
--percent-and-degrees: lch(58% 32 241deg);
--just-the-degrees: lch(58 32 241deg);
--minimal: lch(58 32 241);
--percent-opacity: lch(58% 32 241 / 50%);
--decimal-opacity: lch(58% 32 241 / .5);
/* chromaless and hueless */
--empty-channels-white: lch(100 none none);
--empty-channels-black: lch(none none none);
}
Phòng thí nghiệm
Một không gian màu khác được tạo để truy cập vào gam màu CIE, một lần nữa với chiều sáng tuyến tính (L) theo cảm nhận. A và B trong LAB đại diện cho các trục độc đáo của thị giác màu sắc của con người: đỏ – xanh lục và xanh dương – vàng. Khi A nhận được một giá trị dương, giá trị này sẽ cộng thêm màu đỏ và cộng thêm màu xanh lục khi thấp hơn 0. Khi B được cho là một số dương, hệ thống sẽ cộng thêm màu vàng, trong đó giá trị âm hướng về màu xanh dương.
Ưu điểm
- Độ dốc nhất quán về mặt cảm giác.
- Dải động cao.
Nhược điểm
- Có khả năng thay đổi màu sắc.
- Khó trao tay tác giả hoặc đoán màu khi đọc giá trị.
.valid-css-lab-colors {
--percent-and-degrees: lab(58% -16 -30);
--minimal: lab(58 -16 -30);
--percent-opacity: lab(58% -16 -30 / 50%);
--decimal-opacity: lab(58% -16 -30 / .5);
/* chromaless and hueless */
--empty-channels-white: lab(100 none none);
--empty-channels-black: lab(none none none);
}
Chấp nhận được
Hệ màu này điều chỉnh cho LCH. Và giống như LCH, (L) tiếp tục thể hiện độ sáng tuyến tính về mặt cảm tính, C cho sắc độ và H cho màu sắc.
Không gian này quen thuộc nếu bạn từng làm việc với HSL hoặc LCH. Chọn một góc trên bánh xe màu cho H, chọn độ sáng hoặc độ tối bằng cách điều chỉnh L, nhưng sau đó chúng ta sẽ có sắc độ thay vì độ bão hoà. Chúng khá giống nhau, ngoại trừ việc việc điều chỉnh độ sáng và sắc độ có xu hướng đi theo cặp, hoặc bạn có thể dễ dàng yêu cầu các màu có sắc độ cao nằm ngoài gam màu mục tiêu.
Ưu điểm
- Không có gì ngạc nhiên khi làm việc với tông màu xanh dương và tím.
- Theo cảm tính, độ sáng tuyến tính.
- Sử dụng các kênh quen thuộc.
- Dải động cao.
- Có công cụ chọn màu hiện đại của Evil Martians.
Nhược điểm
- Dễ dàng thoát khỏi gam màu.
- Mới và tương đối chưa được khám phá.
- Một số công cụ chọn màu.
.valid-css-oklch-colors {
--percent-and-degrees: oklch(64% .1 233deg);
--just-the-degrees: oklch(64 .1 233deg);
--minimal: oklch(64 .1 233);
--percent-opacity: oklch(64% .1 233 / 50%);
--decimal-opacity: oklch(64% .1 233 / .5);
/* chromaless and hueless */
--empty-channels-white: oklch(100 none none);
--empty-channels-black: oklch(none none none);
}
OKLAB
Không gian này chỉnh sửa đối với LAB. Lớp này cũng được tuyên bố là không gian được tối ưu hoá cho chất lượng xử lý hình ảnh. Đối với chúng tôi, CSS có nghĩa là các độ dốc và chất lượng thao tác với hàm màu.
Ưu điểm
- Không gian mặc định cho ảnh động và nội suy.
- Theo cảm tính, độ sáng tuyến tính.
- Không có sự thay đổi màu sắc như LAB.
- Độ dốc nhất quán về mặt cảm giác.
Nhược điểm
- Mới và tương đối chưa được khám phá.
- Một số công cụ chọn màu.
.valid-css-oklab-colors {
--percent-and-degrees: oklab(64% -.1 -.1);
--minimal: oklab(64 -.1 -.1);
--percent-opacity: oklab(64% -.1 -.1 / 50%);
--decimal-opacity: oklab(64% -.1 -.1 / .5);
/* chromaless and hueless */
--empty-channels-white: oklab(100 none none);
--empty-channels-black: oklab(none none none);
}
Hiển thị P3
Gam màu hiển thị và không gian màu P3 đã trở nên phổ biến kể từ khi được Apple hỗ trợ kể từ năm 2015 trên iMac. Apple cũng hỗ trợ display-p3 trong các trang web thông qua CSS kể từ năm 2016, trước mọi trình duyệt khác 5 năm. Nếu đến từ sRGB, đây là một không gian màu tuyệt vời để bạn bắt đầu làm việc khi di chuyển các kiểu lên một dải động cao hơn.
Ưu điểm
- Khả năng hỗ trợ tuyệt vời, được coi là giá trị cơ sở cho màn hình HDR.
- Nhiều hơn 50% màu so với sRGB.
- Công cụ cho nhà phát triển có một công cụ chọn màu tuyệt vời.
Nhược điểm
- Cuối cùng, sẽ bị vượt qua bởi không gian Rec2020 và CIE.
.valid-css-display-p3-colors {
--percents: color(display-p3 34% 58% 73%);
--decimals: color(display-p3 .34 .58 .73);
--percent-opacity: color(display-p3 34% 58% 73% / 50%);
--decimal-opacity: color(display-p3 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(display-p3 none none none);
--empty-channels-black2: color(display-p3);
}
Rec2020
Rec2020 là một phần của việc chuyển sang UHDTV (truyền hình có độ phân giải siêu cao), cung cấp nhiều màu sắc để sử dụng trong nội dung nghe nhìn 4k và 8k. Rec2020 là một gam màu khác dựa trên RGB, lớn hơn display-p3, nhưng không phổ biến lắm với người tiêu dùng như Display P3.
Ưu điểm
- Màu Ultra HD.
Nhược điểm
- Tuy nhiên, chưa phổ biến lắm ở người tiêu dùng.
- Thường thấy trên thiết bị cầm tay hoặc máy tính bảng.
.valid-css-rec2020-colors {
--percents: color(rec2020 34% 58% 73%);
--decimals: color(rec2020 .34 .58 .73);
--percent-opacity: color(rec2020 34% 58% 73% / 50%);
--decimal-opacity: color(rec2020 .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(rec2020 none none none);
--empty-channels-black2: color(rec2020);
}
RGB A98
Là viết tắt của Adobe 1998 RGB, A98 RGB do Adobe tạo ra để thể hiện hầu hết các màu có được từ máy in CMYK. Phiên bản này cung cấp nhiều màu hơn sRGB, đáng chú ý là các tông màu lục lam và xanh lục.
Ưu điểm
- Lớn hơn hệ màu của sRGB và Display P3.
Nhược điểm
- Đây không phải là lĩnh vực chung mà các nhà thiết kế kỹ thuật số đã làm việc.
- Không có nhiều người chuyển bảng màu từ CMYK.
.valid-css-a98-rgb-colors {
--percents: color(a98-rgb 34% 58% 73%);
--decimals: color(a98-rgb .34 .58 .73);
--percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(a98-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(a98-rgb none none none);
--empty-channels-black2: color(a98-rgb);
}
RGB Prophoto
Do Kodak tạo ra, không gian gam màu rộng này độc đáo cung cấp các màu chính có phạm vi cực rộng và có sự thay đổi màu ở mức tối thiểu khi thay đổi độ sáng. Bản mẫu này cũng tuyên bố bao phủ 100% màu bề mặt thực tế theo tài liệu của Michael Pointer vào năm 1980.
Ưu điểm
- Màu sắc tối thiểu thay đổi khi thay đổi độ sáng.
- Màu chính rực rỡ.
Nhược điểm
- Khoảng 13% màu sắc được cung cấp là tưởng tượng, nghĩa là các màu này không nằm trong phổ màu mà con người có thể nhìn thấy.
.valid-css-prophoto-rgb-colors {
--percents: color(prophoto-rgb 34% 58% 73%);
--decimals: color(prophoto-rgb .34 .58 .73);
--percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
--decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);
/* chromaless and hueless */
--empty-channels-black: color(prophoto-rgb none none none);
--empty-channels-black2: color(prophoto-rgb);
}
XYZ, XYZ-d50, XYZ-d65
Hệ màu CIE XYZ bao gồm tất cả các màu mà một người có thị lực trung bình có thể nhìn thấy. Đây là lý do tại sao thuộc tính này được dùng làm tham chiếu chuẩn cho các không gian màu khác. Y là độ chói, X và Z có thể là các sắc độ trong độ sáng Y cho trước.
Sự khác biệt giữa d50 và d65 là điểm trắng, trong đó d50 sử dụng điểm trắng d50 và d65 sử dụng điểm trắng d65.
Ưu điểm
- Truy cập ánh sáng tuyến tính có các trường hợp sử dụng hữu ích.
- Phù hợp để phối màu vật lý.
Nhược điểm
- Không tuyến tính theo khái niệm như lch, oklch, lab và oklab.
.valid-css-xyz-colors {
--percents: color(xyz 22% 26% 53%);
--decimals: color(xyz .22 .26 .53);
--percent-opacity: color(xyz .22 .26 .53 / 50%);
--decimal-opacity: color(xyz .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz none none none);
--empty-channels-black2: color(xyz);
}
.valid-css-xyz-d50-colors {
--percents: color(xyz-d50 22% 26% 53%);
--decimals: color(xyz-d50 .22 .26 .53);
--percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d50 none none none);
--empty-channels-black2: color(xyz-d50);
}
.valid-css-xyz-d65-colors {
--percents: color(xyz-d65 22% 26% 53%);
--decimals: color(xyz-d65 .22 .26 .53);
--percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
--decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);
/* chromaless and hueless */
--empty-channels-black: color(xyz-d65 none none none);
--empty-channels-black2: color(xyz-d65);
}
Hệ màu tuỳ chỉnh
Thông số kỹ thuật CSS Color 5 cũng có một đường dẫn để dạy trình duyệt một hệ màu tuỳ chỉnh. Đây là hồ sơ ICC cho trình duyệt biết cách phân giải màu.
@color-profile --foo {
src: url(path/to/custom.icc);
}
Sau khi tải, hãy truy cập màu từ hồ sơ tuỳ chỉnh này bằng hàm color() và chỉ định các giá trị kênh cho màu đó.
.valid-css-color-from-a-custom-profile {
background: color(--foo 1 0 0);
}
Loại nội suy màu
Bạn có thể thấy hiệu ứng chuyển đổi từ màu này sang màu khác trong ảnh động, độ dốc và phối màu. Quá trình chuyển đổi này thường được chỉ định dưới dạng màu bắt đầu và màu kết thúc, trong đó trình duyệt dự kiến sẽ nội suy giữa các màu đó. Nội suy trong trường hợp này có nghĩa là tạo ra một loạt các màu giữa để tạo ra quá trình chuyển đổi suôn sẻ thay vì chuyển đổi tức thì.
Với độ dốc, nội suy là một loạt các màu dọc theo một hình dạng. Với ảnh động, đó là một loạt màu theo thời gian.
@keyframes bg {
0%, 100% {
background: orange;
}
25% {
background: magenta;
}
50% {
background: lime;
}
75% {
background: cyan;
}
}
.circle {
animation: bg 5s ease-in-out infinite;
}
Với độ dốc, tất cả các màu ở giữa sẽ hiển thị cùng một lúc:
Tính năng mới của tính năng nội suy màu
Với việc bổ sung các gam màu và không gian màu mới, sẽ có thêm các tuỳ chọn mới để nội suy. Việc chuyển màu in hsl từ xanh dương sang trắng sẽ tạo ra một cảm giác rất khác so với sRGB.
.classic-gradient-in-srgb {
background: linear-gradient(to right, blue, white);
}
.new-gradient-in-hsl {
background: linear-gradient(in hsl to right, blue, white);
}
Không thể thấy bản minh hoạ Codepen?
Sau đó, điều gì sẽ xảy ra nếu bạn chuyển từ một màu trong không gian này sang một màu trong một không gian hoàn toàn khác:
.gradient {
/* oklab will be the common space */
background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}
.lch {
/* lch is specified */
background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}
Không thể thấy bản minh hoạ Codepen?
Thật may cho bạn, quy cách Màu 4 có hướng dẫn cho các trình duyệt về cách xử lý các phép nội suy không gian màu chéo này. Trong trường hợp trên đối với .gradient, các trình duyệt sẽ nhận thấy các hệ màu phân biệt và sử dụng hệ màu mặc định oklab.
Bạn có thể cho rằng trình duyệt sẽ sử dụng lch làm hệ màu, vì đó là
màu đầu tiên, nhưng không phải vậy và đó là lý do tôi hiển thị hiệu ứng chuyển màu so sánh thứ hai
.lch. Độ dốc .lch là độ dốc từ hệ màu lch.
Ít dải hơn nhờ màu 16 bit
Trước khi đổi màu này, tất cả các màu được lưu dưới dạng một số nguyên 32 bit để đại diện cho cả 4 kênh: đỏ, xanh lục, xanh dương và alpha. Đây là 8 bit mỗi kênh và có thể sử dụng 2^ 24 màu (bỏ qua alpha). 2 ^ 24 = 16.777.216, "hàng triệu màu".
Sau khi màu này hoạt động, 4 giá trị dấu phẩy động 16 bit, mỗi kênh có số thực riêng thay vì được gộp lại với nhau. Đây là tổng dữ liệu 64 bit, do đó có hơn hàng triệu màu.
Đây là công việc bắt buộc để hỗ trợ màu HD. Điều này làm tăng lượng thông tin về màu sắc có thể được lưu trữ, điều này có tác dụng phụ tuyệt vời là trình duyệt sẽ sử dụng nhiều màu hơn trong hiệu ứng chuyển màu.
Dải chuyển màu là khi không có đủ màu để tạo dải chuyển màu mượt mà và "dải" màu trở nên hiển thị. Việc nâng cấp lên màu có độ phân giải cao hơn sẽ được giảm thiểu đáng kể.
Kiểm soát loại nội suy
Khoảng cách ngắn nhất giữa hai điểm luôn là một đường thẳng. Với tính năng nội suy màu, các trình duyệt sẽ thực hiện lộ trình ngắn theo mặc định. Hãy xem xét trường hợp trong đó có hai điểm trong một hình trụ màu HSL. Một hiệu ứng chuyển màu sẽ nhận được các bước màu bằng cách di chuyển dọc theo đường giữa hai điểm.
linear-gradient(to right, #94e99c, #e06242)
Hình ảnh minh hoạ từ trên xuống, của một hình trụ HSL có đường kẻ giữa các điểm dừng màu
Đường chuyển màu ở trên đi thẳng giữa màu lục đến màu đỏ nhạt, đi qua trung tâm của hệ màu. Mặc dù những điều trên rất hữu ích trong việc giúp bạn hiểu được ban đầu, nhưng thực tế không phải như vậy. Đây là độ dốc trong Codepen sau đây và rõ ràng không có màu trắng ở giữa như phần minh hoạ mô phỏng cho thấy.
Tuy nhiên, vùng giữa của độ dốc đã mất sự sống động. Điều này là do các màu rực rỡ nhất nằm ở cạnh của hình dạng không gian màu, chứ không phải ở trung tâm nơi phép nội suy di chuyển gần đó. Tình trạng này thường được gọi là "vùng chết". Có một vài cách để khắc phục hoặc giải quyết vấn đề này.
Chỉ định nhiều điểm dừng chuyển màu để tránh vùng chết
Một kỹ thuật hiện nay để tránh vùng chết là thêm các điểm dừng màu bổ sung vào hiệu ứng chuyển màu có chủ ý hướng nội suy để nằm trong phạm vi rung của không gian màu. Thực chất là một công việc giải quyết xung quanh, vì các điểm dừng bổ sung giúp hoạt động xung quanh vùng chết.
Có một công cụ chuyển màu do Erik Kennedy tạo để tính toán các điểm dừng màu bổ sung cho bạn, nhằm giúp bạn tránh vùng chết, ngay cả trong các hệ màu có xu hướng nổi lên về phía đó. Bằng cách sử dụng, chuyển cùng một màu từ ví dụ đầu tiên nhưng thay đổi nội suy màu thành HSL, thao tác này sẽ tạo ra:
linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
Hình ảnh minh hoạ từ trên xuống của một hình trụ HSL có một đường cong có 9 điểm dừng màu
Với các điểm dừng có hướng dẫn, nội suy không còn là một đường thẳng nữa mà có vẻ cong quanh vùng chết, giúp duy trì độ bão hoà, dẫn đến độ dốc có màu rực rỡ hơn nhiều.
Tuy công cụ này hoạt động rất hiệu quả, nhưng nếu bạn có thể có quyền kiểm soát tương tự hoặc lớn hơn ngay trong CSS thì sao?
Định hướng loại nội suy màu
Trong Màu 4, tính năng điều khiển chiến lược nội suy màu đã được thêm vào và là một cách mới để cải thiện (:wink:) vùng chết. Hãy nghĩ về một góc độ màu và xem xét độ dốc có 2 điểm chỉ thay đổi góc, chẳng hạn như chuyển màu từ 140deg sang 240deg.
Loại nội suy màu ngắn hơn so với màu dài hơn
Theo mặc định, hiệu ứng chuyển màu sẽ đi theo tuyến shorter, trừ phi bạn chỉ định cho nó đi theo tuyến đường longer. Các tuỳ chọn nội suy Hue hướng dẫn thao tác xoay góc, chẳng hạn như yêu cầu ai đó rẽ trái thay vì phải (heh, Zoolander):
Trong ví dụ trực quan về khoảng cách nội suy màu sắc ở trên, đường dẫn ngắn và đường dẫn dài được mô phỏng để minh hoạ sự khác biệt. Khoảng cách ngắn có ít sắc độ hơn vì khoảng cách này đã đi qua khoảng cách ít nhất có thể, trong đó quãng đường dài sẽ đi qua nhiều màu sắc hơn.
Loại nội suy sắc độ tăng/giảm
Có thêm hai chiến lược nội suy màu sắc trong Màu 4, nhưng các chiến lược này chỉ dành cho không gian màu hình trụ. Giữ nguyên 2 màu trong các ví dụ trước, hình ảnh giờ đây cho thấy cách hoạt động của chế độ tăng và giảm.
Codepen ở trên đã sử dụng ColorJS để minh hoạ kết quả dự kiến. CSS mà bạn muốn viết để đạt được hiệu quả tương tự mà không cần thư viện JavaScript sẽ là:
.longer-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl longer hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
.decreasing-hue-interpolation-in-css {
background: linear-gradient(
to right in hsl decreasing hue,
hsl(180deg 100% 75%),
hsl(240deg 100% 75%)
);
}
Để loại bỏ loại nội suy màu, dưới đây là một sân chơi thú vị nơi bạn có thể thay đổi màu giữa 2 điểm dừng màu và xem hiệu ứng của lựa chọn nội suy màu cũng như cách không gian màu thay đổi kết quả chuyển màu. Các hiệu ứng có thể rất khác nhau; hãy xem đây là bốn thủ thuật mới vừa được đưa vào thanh công cụ màu của bạn.
Chuyển màu trong các hệ màu khác nhau
Mỗi hệ màu, dựa trên sự sắp xếp màu và hình dạng độc đáo, sẽ tạo ra độ dốc khác nhau. Hãy xem các ví dụ bên dưới, đặc biệt là ở trường "xanh dương sang trắng". Xem mỗi hệ màu xử lý việc này theo cách khác nhau. Hãy lưu ý có bao nhiêu màu tím ở giữa, đó được gọi là "thay đổi màu" trong quá trình nội suy.
Không thể thấy bản minh hoạ Codepen?
Hình ảnh xuất hiện chỉ là một trong số nhiều ví dụ về Codepen. Bạn nên dùng thử bản dùng thử Canary hoặc Safari Tech Preview để xem các bản dùng thử này.
Một số độ dốc trong những không gian này sẽ rực rỡ hơn những không gian khác hoặc di chuyển ít hơn qua vùng chết.
Các không gian như lab tập hợp các màu lại với nhau theo cách được tối ưu hoá cho độ rực màu, ngược lại với các không gian được tối ưu hoá để con người có thể viết màu như hwb().
.hwb {
background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}
Bản minh hoạ ở trên, mặc dù tinh tế trong các kết quả, nhưng cho thấy tính năng nội suy nhất quán hơn với phòng thí nghiệm. Tuy nhiên, cú pháp của phòng thí nghiệm không hề đơn giản để đọc, có những số âm rất lạ khi đến từ rgb hoặc hsl. Tin vui là chúng ta có thể sử dụng hwb cho một cú pháp quen thuộc nhưng yêu cầu nội suy độ dốc hoàn toàn trong một hệ màu khác, chẳng hạn như oklab.
.hwb {
background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
Không thể thấy bản minh hoạ Codepen?
Ví dụ này sử dụng màu tương tự trong hwb nhưng chỉ định hệ màu để nội suy cho hwb hoặc oklab. hwb là không gian màu tuyệt vời cho độ rực rỡ cao nhưng có thể có các vùng điểm chết hoặc điểm sáng (xem điểm nóng màu lục lam trong ví dụ trên cùng). oklab rất phù hợp với độ chuyển màu tuyến tính về mặt khái niệm mà vẫn có độ bão hoà. Tính năng này rất thú vị khi bạn có thể thử một vài không gian màu khác nhau để xem bạn thích màu chuyển màu nào nhất.
Dưới đây là một Codepen thử nghiệm với độ dốc và không gian màu, chiến lược trộn và khớp để khám phá những khả năng. Ngay cả chuyển đổi từ đen sang trắng cũng khác nhau trong mỗi hệ màu!
Không thể thấy bản minh hoạ Codepen?
Kẹp gam màu
Có những trường hợp màu sắc có thể yêu cầu nội dung nào đó nằm ngoài gam màu. Cân nhắc màu sau:
rgb(300 255 255)
Giá trị tối đa cho một kênh màu trong hệ màu rgb là 255, nhưng ở đây, 300 đã được chỉ định cho màu đỏ. Điều gì sẽ xảy ra? Kẹp gam màu.
Việc kẹp là trường hợp thông tin bổ sung được gỡ bỏ một cách đơn giản. 300 sẽ trở thành 255 trong công cụ màu. Màu hiện đã được xác định trong khoảng không gian.
Chọn hệ màu
Sau khi tìm hiểu về các không gian màu này và hiệu ứng của chúng, nhiều người cảm thấy choáng ngợp và muốn biết nên chọn "một" nào. Từ nghiên cứu và kinh nghiệm của mình, tôi không thấy một hệ màu duy nhất cho tất cả các tác vụ của mình. Mỗi ứng dụng đều có những khoảnh khắc khi chúng tạo ra kết quả mong muốn.
Nếu có một không gian tốt nhất thì sẽ không có quá nhiều không gian mới được ra mắt.
Tuy nhiên, tôi có thể nói rằng các không gian CIE – lab, oklab, lch và oklch – là vị trí bắt đầu của tôi. Nếu kết quả của các không gian đó không phải là điều tôi mong đợi, thì tôi sẽ thử nghiệm các không gian khác. Để kết hợp màu và tạo độ dốc, tôi đồng ý với lựa chọn thông số kỹ thuật mặc định là oklab. Đối với hệ thống màu và màu giao diện người dùng tổng thể, tôi thích oklch.
Dưới đây là một vài bài viết trong đó mọi người đã chia sẻ các chiến lược màu
được cập nhật dựa trên các không gian màu và tính năng mới này. Ví dụ: Andrey Sitnik
đã tập trung vào oklch, có thể họ sẽ thuyết phục bạn làm điều tương tự:
- OKLCH trong CSS: lý do chúng tôi chuyển từ RGB và HSL của Andrey Sitnik
- Định dạng màu của Josh W. Cưỡi ngựa
- OK, OKLCH của Chris Coyier
Di chuyển sang màu HD CSS
Có hai chiến lược chính để cập nhật màu cho dự án web nhằm hỗ trợ màn hình gam màu rộng:
Xuống cấp nhẹ
Sử dụng hệ màu mới và cho phép trình duyệt cũng như hệ điều hành tìm ra màu nào sẽ hiển thị dựa trên khả năng hiển thị.Cải tiến tăng dần
Sử dụng@supportsvà@mediađể đánh giá khả năng của trình duyệt của người dùng và nếu các điều kiện được đáp ứng, hãy cung cấp các màu gam màu rộng.
Nếu trình duyệt không hiểu được màu display-p3:
color: red;
color: color(display-p3 1 0 0);
Nếu trình duyệt hiểu được màu display-p3:
color: red;
color: color(display-p3 1 0 0);
Mỗi hình thức đều có những ưu và nhược điểm riêng. Dưới đây là danh sách ngắn gọn các ưu và nhược điểm:
Xuống cấp nhẹ
- Ưu điểm
- Tuyến đường đơn giản nhất.
- Trình duyệt sẽ gam ánh xạ hoặc kẹp thành sRGB nếu không phải là màn hình gam rộng, do đó trách nhiệm thuộc về trình duyệt.
- Nhược điểm
- Trình duyệt có thể chuyển gam clamp hoặc gam map thành một màu bạn không yêu thích.
- Trình duyệt có thể không hiểu được yêu cầu màu sắc và không thực hiện được hoàn toàn. Tuy nhiên, bạn có thể giảm thiểu điều này bằng cách chỉ định màu hai lần, cho phép hiển thị dự phòng tầng về màu trước đó mà nó hiểu được.
Nâng cao dần dần
- Ưu điểm
- Kiểm soát nhiều hơn nhờ độ trung thực màu được quản lý.
- Chiến lược bổ sung không ảnh hưởng đến màu hiện tại.
- Nhược điểm
- Bạn cần quản lý hai cú pháp màu riêng biệt.
- Bạn cần quản lý hai gam màu riêng biệt.
Kiểm tra khả năng hỗ trợ gam màu và không gian màu
Trình duyệt cho phép kiểm tra khả năng hỗ trợ gam màu rộng cũng như khả năng hỗ trợ cú pháp màu từ CSS và JavaScript. Gam màu chính xác mà người dùng không có, câu trả lời chung được cung cấp để bảo vệ quyền riêng tư của người dùng. Tuy nhiên, tính năng hỗ trợ hệ màu chính xác được cung cấp vì tính năng này không dành riêng cho các chức năng của phần cứng của người dùng, chẳng hạn như gam màu.
Truy vấn hỗ trợ gam màu
Các mã ví dụ sau đây kiểm tra dải màu của người dùng truy cập trên màn hình của họ.
Đang kiểm tra từ CSS
Yêu cầu hỗ trợ ít cụ thể nhất là truy vấn nội dung nghe nhìn dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Bạn có thể yêu cầu hỗ trợ gần đúng hoặc nhiều hơn thông qua truy vấn nội dung nghe nhìn color-gamut:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Có thêm hai truy vấn phương tiện để kiểm tra hỗ trợ:
Kiểm tra từ JavaScript
Đối với JavaScript, hàm window.matchMedia() có thể được gọi và chuyển một truy vấn nội dung nghe nhìn để đánh giá.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Bạn có thể sao chép mẫu ở trên cho các truy vấn phương tiện còn lại.
Các truy vấn hỗ trợ về hệ màu
Các mã ví dụ sau đây kiểm tra trình duyệt của người dùng truy cập và lựa chọn không gian màu cần sử dụng.
Đang kiểm tra từ CSS
Bạn có thể yêu cầu hỗ trợ từng màu sắc bằng truy vấn @supports:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Kiểm tra từ JavaScript
Đối với JavaScript, hàm CSS.supports() có thể được gọi và chuyển một cặp thuộc tính và giá trị để xem trình duyệt có hiểu hay không.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Kết hợp việc kiểm tra phần cứng và phân tích cú pháp cùng nhau
Trong khi đợi từng trình duyệt triển khai các tính năng màu mới này, bạn nên kiểm tra cả tính năng phần cứng và khả năng phân tích cú pháp màu. Đây thường là những gì tôi sử dụng khi tăng dần màu sắc lên độ phân giải cao:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Gỡ lỗi màu bằng Công cụ của Chrome cho nhà phát triển
Công cụ của Chrome cho nhà phát triển được cập nhật và được trang bị các công cụ mới để giúp nhà phát triển tạo, chuyển đổi và gỡ lỗi màu HD.
Đã cập nhật công cụ chọn màu
Công cụ chọn màu hiện hỗ trợ tất cả các hệ màu mới. Cho phép tác giả tương tác với các giá trị kênh giống như họ thường làm.
Ranh giới gam màu
Chúng tôi cũng thêm một đường ranh giới gam màu, vẽ một đường giữa gam srgb và gam display-p3. Làm rõ gam màu đã chọn nằm trong gam màu nào.
Điều này giúp tác giả phân biệt trực quan giữa màu HD và màu không phải HD.
Việc này đặc biệt hữu ích khi làm việc với hàm color() và không gian màu mới vì chúng có thể tạo ra cả màu không phải HD và HD. Nếu bạn muốn kiểm tra xem màu của mình thuộc gam màu nào, hãy bật công cụ chọn màu lên và xem!
Đang chuyển đổi màu
Công cụ cho nhà phát triển đã có thể chuyển đổi màu sắc giữa các định dạng được hỗ trợ như hsl, hwb, rgb và hex trong nhiều năm. shift + click trên một bảng màu hình vuông trong ngăn Kiểu để thực hiện hoạt động chuyển đổi này. Các công cụ màu mới không chỉ xoay vòng qua các lượt chuyển đổi, mà còn tạo ra một cửa sổ bật lên để tác giả có thể xem và chọn lượt chuyển đổi họ muốn.
Khi chuyển đổi, bạn phải biết liệu lượt chuyển đổi đã được cắt cho vừa với không gian hay chưa. Công cụ cho nhà phát triển hiện có một biểu tượng cảnh báo về màu đã chuyển đổi để cảnh báo cho bạn về hoạt động cắt này.
Khám phá thêm tính năng gỡ lỗi CSS trong Công cụ cho nhà phát triển trong thông báo gần đây.
Kết luận
Hệ màu không phải sRGB trên web mới chỉ mới bắt đầu, nhưng tôi tin rằng các nhà thiết kế và nhà phát triển sẽ 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 nhỏ với những tính năng này và thêm vào nếu cần.
Thích thú chơi với những món đồ chơi màu sắc mới này! Nhiều thao tác rung hơn, nhiều thao tác nhất quán và nội suy hơn và nhìn chung mang lại trải nghiệm nhiều màu sắc hơn cho người dùng.
Đọc thêm
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/