Tài liệu này nằm trong hướng dẫn về màu sắc cho CSS độ phân giải cao.
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. Codepen sau đây hiển thị tất cả các cú pháp màu mới và cũ:
Đọc phần tóm tắt về không gian màu cổ điển.
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 sắc, tăng 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
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 qua color() {#linear-srgb}
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)
LCH đưa ra cú pháp để truy cập vào các màu bên ngoài gam màu RGB. Đây cũng là tính năng đầu tiên giúp bạn dễ dàng tạo màu vượt trội 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ể đại diện cho 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. Đó là sự sáng tạo "tuyến tính về mặt cảm tính", lấy con người làm trung tâm. Sắc độ tương tự như độ bão hoà; có thể dao động từ 0 đến 230, nhưng về mặt kỹ thuật thì không bị ràng buộc.
Ư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);
}
A98 RGB {#a98-rgb}
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. API này cũng tuyên bố bao phủ 100% màu sắc bề mặt thực tế theo ghi chép 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.
Khoá-Thuật ngữ: Điểm trắng là một thuộc tính của không gian màu, đây là nơi màu trắng thực tồn tại trong không gian. Đối với màn hình điện tử, D65 là điểm trắng phổ biến nhất, ngắn gọn là 6500 kelvin. Điều quan trọng là chuyển đổi màu sắc phải khớp với các điểm trắng để nhiệt độ màu (độ ấm hoặc độ lạnh) không bị ảnh hưởng.
Ư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);
}
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%));
}
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. Đối với .gradient, 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 thực tế thì không. Đó là lý do tôi hiển thị độ dốc 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ể.
Loại nội suy kiểm soát
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.
Mặc dù công cụ này hoạt động rất tốt, 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 từ 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 đường shorter, trừ phi bạn chỉ định cho lớp này đ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ụ về khoảng cách nội suy màu, đườ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 đã di chuyển qua khoảng cách ít nhất có thể, trong đó khoảng cách dài đã di chuyển trên 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 không gian màu, với sự sắp xếp màu sắc và hình dạng độc đáo, tạo ra độ dốc khác nhau. Trong các ví dụ sau, hãy xem cách mỗi không gian màu xử lý điều đó theo cách khác nhau, đặc biệt là khi chuyển từ màu xanh dương sang màu trắng. Hãy chú ý có bao nhiêu màu tím ở giữa; đó được gọi là sự dịch chuyển màu trong nội suy.
Một số độ dốc trong những không gian này rực rỡ hơn các 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%));
}
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!
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 trở thành 255 nội bộ trong công cụ chọn 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
Các bước tiếp theo
Bây giờ, bạn đã quen với các không gian và công cụ màu mới, bạn có thể di chuyển sang màu HD.
Tăng độ rung, thao tác và nội suy nhất quán 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 tài nguyên màu trong hướng dẫn.