Sử dụng nhiều màu hơn và không gian mới

Tài liệu này là một phần của hướng dẫn về màu CSS có độ 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 cho thấy tất cả cú pháp màu mới và cũ cùng nhau:

Đọc thông tin tóm tắt về các 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, tăng từ 7 gam màu mới được chia sẻ trước đó:

• sRGB Tuyến tính
• LCH
• okLCH
• LAB
• okLAB
• Display p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

Giới thiệu về không gian màu web mới

Các không gian màu sau đây cung cấp quyền truy cập vào gam màu lớn hơn sRGB. Không gian màu display-p3 cung cấp gần gấp đôi số lượng màu so với RGB, trong khi Rec2020 cung cấp gần gấp đôi số lượng màu so với display-p3. Quả là 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 tham số không gian màu trước, sau đó là một loạt 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ì việc có 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ột tham số.

Ưu điểm

• Không gian chuẩn hoá để truy cập vào các không gian màu sử dụng kênh RGB.
• Có thể mở rộng quy mô lên bất kỳ không gian màu nào dựa trên RGB có gam màu rộng.

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 thông qua color()

Không gian màu này cung cấp các tính năng giống như rgb(). Ngoài ra, nó còn cung cấp số thập phân từ 0 đến 1, được sử dụng giống như 0% đến 100%.

Ưu điểm

• Hầu hết màn hình đều hỗ trợ phạm vi của không gian 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 cảm nhận (như lch())
• Không có màu gam màu rộng.
• Độ dốc thường đi qua một 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() {#linear-srgb}

Phương án thay thế tuyến tính này cho RGB cung cấp cường độ kênh có thể dự đoán.

Ưu điểm

• Truy cập trực tiếp vào các kênh RGB, rất hữu ích cho các công cụ như công cụ phát triển trò chơi hoặc chương trình ánh sáng.

Nhược điểm

• Không tuyến tính về mặt cảm nhận.
• Màu đen và trắng được đóng gói ở 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);
}

Hiệu ứng chuyển màu sẽ được thảo luận chi tiết sau, nhưng trước tiên, bạn nên xem hiệu ứng chuyển màu từ đen sang trắng của srgb và linear-srgb để minh hoạ sự khác biệt giữa các hiệu ứng này:

LCH

LCH giới thiệu cú pháp để truy cập vào các màu nằm 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. Lý do là mọi màu không gian CIE (lch, oklch, lab, oklab) đều có thể thể hiện toàn bộ quang phổ màu mà con người nhìn thấy.

Không gian màu này được mô hình hoá theo 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à nhiều màu khác. Cá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ị từ 0 đến 100. Đây là một kiểu chữ đặc biệt "trực quan tuyến tính", mang lại cảm giác nhẹ nhàng tập trung vào con người. Độ 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 là không giới hạn.

Ưu điểm

• Có thể dự đoán được thao tác với màu sắc nhờ tính chất tuyến tính về mặt cảm nhận, chủ yếu là (xem oklch).
• Sử dụng các kênh quen thuộc.
• Thường có hiệu ứng chuyển màu sống động.

Nhược điểm

• Dễ dàng vượt quá gam màu.
• Trong một số ít trường hợp, hiệu ứng chuyển màu có thể cần một điểm điều chỉnh ở giữa để tránh sự thay đổi về sắc độ.

.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);
}

LAB

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 kích thước độ sáng tuyến tính (L) theo nhận thức. A và B trong LAB đại diện cho các trục riêng biệt của thị giác màu của con người: đỏ-xanh lục và xanh dương-vàng. Khi A được gán giá trị dương, màu đỏ sẽ được thêm vào và màu xanh lục sẽ được thêm vào khi giá trị này dưới 0. Khi B được cung cấp một số dương, màu vàng sẽ được thêm vào, trong đó các giá trị âm sẽ chuyển sang màu xanh dương.

Ưu điểm

• Độ dốc nhất quán về mặt cảm nhận.
• Dải động cao.

Nhược điểm

• Có thể thay đổi sắc độ.
• Khó xác định 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);
}

OKLCH

Hệ màu này là chỉnh sửa cho LCH. Và giống như LCH, (L) tiếp tục biểu thị độ sáng tuyến tính theo cảm nhận, C cho sắc độ và H cho sắc độ.

Không gian này sẽ quen thuộc nếu bạn đã 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 có sắc độ thay vì độ bão hoà. Các giá trị này khá giống nhau, ngoại trừ việc các mức điều chỉnh độ sáng và sắc độ thường đi theo cặp, nếu không, bạn có thể dễ dàng yêu cầu các màu sắc độ cao nằm ngoài gam màu mục tiêu.

Ưu điểm

• Không có gì bất ngờ khi làm việc với các sắc thái màu xanh dương và màu tím.
• Độ sáng tuyến tính theo cảm nhận.
• 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 vượt quá gam màu.
• Mới và tương đối chưa được khai thác.
• Ít 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 là biện pháp khắc phục cho LAB. Không gian này cũng được xác nhận là không gian được tối ưu hoá cho chất lượng xử lý hình ảnh, đối với chúng ta trong CSS, điều này có nghĩa là chất lượng chuyển màu và thao tác chức năng màu.

Ưu điểm

• Không gian mặc định cho ảnh động và nội dung nội suy.
• Độ sáng tuyến tính theo cảm nhận.
• Không có sự thay đổi về sắc độ như LAB.
• Độ dốc nhất quán về mặt cảm nhận.

Nhược điểm

• Mới và tương đối chưa được khai thác.
• Ít 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);
}

Display P3

Gam màu và không gian màu Display P3 đã trở nên phổ biến kể từ khi Apple hỗ trợ các gam màu này 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, sớm hơn 5 năm so với bất kỳ trình duyệt nào khác. Nếu bạn sử dụng sRGB, đây là không gian màu tuyệt vời để bắt đầu làm việc khi bạn chuyển các kiểu sang dải động cao hơn.

Ưu điểm

• Hỗ trợ tốt, được coi là đường cơ sở cho màn hình HDR.
• Có nhiều màu hơn 50% so với sRGB.
• Công cụ cho nhà phát triển cung cấp một công cụ chọn màu tuyệt vời.

Nhược điểm

• Cuối cùng sẽ bị Rec2020 và không gian CIE vượt qua.

.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 xu hướng chuyển sang UHDTV (truyền hình độ nét cực 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 như Display P3 đối với người tiêu dùng.

Ưu điểm

• Màu sắc Ultra HD.

Nhược điểm

• Chưa phổ biến trong số người tiêu dùng (chưa).
• Không thường thấy trong 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}

A98 RGB là viết tắt của Adobe 1998 RGB, được Adobe tạo ra để thể hiện hầu hết các màu có thể đạt được từ máy in CMYK. P3 cung cấp nhiều màu hơn sRGB, đặc biệt là trong các sắc thái xanh lục và xanh lam.

Ưu điểm

• Lớn hơn không gian màu sRGB và Display P3.

Nhược điểm

• Không phải là không gian chung mà các nhà thiết kế kỹ thuật số làm việc.
• Không nhiều người chuyển đổi 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);
}

ProPhoto RGB

Được Kodak tạo ra, không gian gam màu rộng này cung cấp các màu cơ bản ở phạm vi cực rộng và có sự thay đổi sắc độ tối thiểu khi thay đổi độ sáng. Hệ thống này cũng tuyên bố bao phủ 100% màu sắc bề mặt thực tế như được Michael Pointer ghi lại vào năm 1980.

Ưu điểm

• Độ đậm nhạt của màu sắc thay đổi rất ít 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à hư cấu, nghĩa là không nằm trong phổ màu mà mắt người 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

Không gian màu CIE XYZ bao gồm tất cả màu sắc mà một người có thị lực trung bình có thể nhìn thấy. Đó là lý do tại sao nó đượ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 là các sắc độ có thể có trong độ chói Y đã cho.

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.

Thuật ngữ chính: Điểm trắng là một thuộc tính của không gian màu, là nơi màu trắng thực sự 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 và là viết tắt của 6500 kelvin. Trong quá trình chuyển đổi màu, điều quan trọng là các điểm trắng phải khớp để nhiệt độ màu (ấm hoặc lạnh) không bị ảnh hưởng.

Ưu điểm

• Quyền truy cập ánh sáng tuyến tính có các trường hợp sử dụng tiện lợi.
• Thích hợp để pha màu thực tế.

Nhược điểm

• Không tuyến tính về mặt cảm nhận 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);
}

Không gian màu tuỳ chỉnh

Quy cách CSS Color 5 cũng có một đường dẫn để hướng dẫn trình duyệt về không gian màu tuỳ chỉnh. Đây là hồ sơ ICC cho trình duyệt biết cách giải quyết màu sắc.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

Sau khi tải, hãy truy cập vào màu sắc từ hồ sơ tuỳ chỉnh này bằng hàm color() và chỉ định giá trị kênh cho hồ sơ đó.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

Nội suy màu

Hiệu ứng chuyển đổi từ màu này sang màu khác xuất hiện trong ảnh động, hiệu ứng chuyển màu và việc kết hợp màu. Quá trình chuyển đổi này thường được chỉ định là 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 đó. Trong trường hợp này, nội suy có nghĩa là tạo một loạt màu trung gian để tạo hiệu ứng chuyển đổi mượt mà thay vì hiệu ứng chuyển đổi tức thì.

Với hiệu ứng chuyển màu, nội suy là một loạt màu dọc theo một hình dạng. Với ảnh động, đó là một loạt màu sắc 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 hiệu ứng chuyển màu, các màu trung gian sẽ xuất hiện cùng một lúc:

Tính năng mới trong nội dung nội suy màu

Với việc bổ sung các gam màu và không gian màu mới, có thêm các tuỳ chọn mới cho hoạt động nội suy. Việc chuyển đổi màu in hsl từ xanh dương sang trắng sẽ dẫn đến kết quả rất khác 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 đổi từ một màu trong một không gian 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%));
}

May mắn thay, thông số kỹ thuật Color 4 có hướng dẫn cho trình duyệt về cách xử lý các nội dung 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 không gian màu khác nhau và sử dụng không gian màu mặc định oklab.

Bạn có thể nghĩ rằng trình duyệt sẽ sử dụng lch làm không gian màu, vì đó là màu đầu tiên, nhưng không phải vậy. Đó là lý do tôi hiển thị một độ dốc so sánh thứ hai .lch. Độ dốc .lch là độ dốc từ không gian màu lch.

Ít hiện hiện tượng dải màu hơn nhờ màu 16 bit

Trước khi có công việc về màu sắc này, tất cả màu sắc đều được lưu trong 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 cho mỗi kênh và 2^ 24 màu có thể có (bỏ qua alpha). 2 ^ 24 = 16.777.216, "hàng triệu màu".

Sau khi xử lý màu, bốn giá trị dấu phẩy động 16 bit, mỗi kênh sẽ có dấu phẩy động riêng thay vì được gộp lại với nhau. Đây là tổng cộng 64 bit dữ liệu, dẫn đến nhiều hơn hàng triệu màu.

Bạn cần thực hiện công việc này để hỗ trợ màu HD. Điều này làm tăng lượng thông tin màu sắc có thể lưu trữ, đồng thời có tác dụng phụ tốt là trình duyệt có nhiều màu hơn để sử dụng trong hiệu ứng chuyển màu.

Hiện tượng dải màu là khi không có đủ màu để tạo hiệu ứng chuyển màu mượt mà và "các dải" màu sẽ xuất hiện. Hiện tượng phân đoạn được giảm thiểu đáng kể khi nâng cấp lên màu có độ phân giải cao hơn.

Kiểm soát 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, trình duyệt sẽ sử dụng tuyến đường ngắn theo mặc định. Hãy xem xét một tình huống có hai điểm trong một hình trụ màu HSL. Dải chuyển màu thu đượ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)

Đường chuyển màu ở trên đi thẳng giữa màu xanh lục và màu đỏ, đi qua tâm của không gian màu. Mặc dù những thông tin trên rất hữu ích để giúp bạn hiểu sơ bộ, nhưng đó không phải là những gì thực sự xảy ra. Dưới đây là hiệu ứng chuyển màu trong Codepen sau đây và rõ ràng là không có màu trắng ở giữa như minh hoạ mô phỏng.

Tuy nhiên, vùng giữa của hiệu ứng chuyển màu đã mất đi độ sống động. Lý do là các màu rực rỡ nhất nằm ở cạnh hình dạng không gian màu, chứ không phải ở giữa nơi nội suy di chuyển gần. Điều này thường được gọi là "vùng chết". Có một số cách để khắc phục hoặc giải quyết vấn đề này.

Chỉ định thêm điểm dừng chuyển màu để tránh vùng chết

Một kỹ thuật để tránh vùng chết hiện nay là thêm các điểm dừng màu bổ sung trong hiệu ứng chuyển màu để hướng dẫn nội suy nằm trong phạm vi sống động của không gian màu. Đây thực sự là một giải pháp, vì các điểm dừng bổ sung giúp ứng dụng hoạt động xung quanh vùng chết.

Erik Kennedy đã tạo một công cụ chuyển màu giúp bạn tính toán các điểm dừng màu bổ sung để tránh vùng chết ngay cả trong không gian màu có xu hướng thu hút vùng chết. Khi sử dụng, hãy truyền các màu giống như trong ví dụ đầu tiên nhưng thay đổi phương thức nội suy màu thành HSL, bạn sẽ có kết quả như sau:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

Với các điểm dừng được hướng dẫn, quá trình nội suy không còn là một đường thẳng mà có vẻ như uốn cong xung quanh vùng chết, giúp duy trì độ bão hoà, dẫn đến hiệu ứng chuyển màu sống động hơn nhiều.

Mặc dù công cụ này hoạt động rất hiệu quả, nhưng nếu bạn có thể kiểm soát tương tự hoặc tốt hơn ngay từ CSS thì sao?

Chỉ đạo quá trình nội suy màu

Trong Color 4, chúng tôi đã thêm khả năng kiểm soát chiến lược bội giá trị màu và đây là một cách mới để giải quyết (:wink:) vùng chết. Hãy nghĩ về một góc màu và xem xét một độ dốc 2 điểm dừng chỉ thay đổi góc, ví dụ như chuyển đổi màu từ 140deg sang 240deg.

Nội suy màu ngắn hơn so với nội suy màu dài hơn

Theo mặc định, độ dốc sẽ đi theo tuyến đường shorter nếu có thể, trừ phi bạn chỉ định độ dốc đi theo tuyến đường longer. Các tuỳ chọn nội suy màu sắc sẽ chỉ định hướng xoay góc, chẳng hạn như yêu cầu người dùng xoay sang trái thay vì phải (heh, Zoolander):

Trong ví dụ về khoảng cách nội suy màu sắc, đườ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 thái hơn vì nó đã di chuyển qua khoảng cách ít nhất có thể, trong khi khoảng cách dài đã di chuyển qua nhiều sắc thái hơn.

Tăng so với giảm nội suy màu

Có thêm hai chiến lược nội suy màu sắc trong Color 4, nhưng chúng chỉ dành riêng cho không gian màu hình trụ. Tiếp tục với hai màu trong các ví dụ trước, hình ảnh hiện cho thấy cách hoạt động của việc tăng và giảm.

Codepen ở trên đã sử dụng ColorJS để minh hoạ kết quả dự kiến. CSS bạn sẽ viết để đạt được hiệu ứng 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%)
  );
}

Để kết thúc phần nội dung về nội suy màu sắc, sau đây là một sân chơi thú vị, nơi bạn có thể thay đổi màu sắc 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 sắc 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 coi đây là 4 thủ thuật mới vừa được đưa vào bộ công cụ màu của bạn.

Độ dốc trong các không gian màu khác nhau

Mỗi không gian màu, với hình dạng và cách sắp xếp màu sắc riêng biệt, sẽ tạo ra một hiệu ứng chuyển màu khác nhau. Trong các ví dụ sau, hãy xem cách mỗi không gian màu xử lý màu sắc khác nhau, đặc biệt là từ màu xanh dương sang màu trắng. Hãy lưu ý số lượng màu trở thành màu tím ở giữa; đó được gọi là sự thay đổi sắc độ trong quá trình nội suy.

Một số hiệu ứng chuyển màu trong các không gian này sống động hơn so với các hiệu ứng khác hoặc ít đi qua vùng chết hơn. Các không gian như lab sẽ đóng gói các màu lại với nhau theo cách tối ưu hoá cho độ bão hoà, trái ngược với các không gian được tối ưu hoá để con người 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));
}

Mặc dù kết quả của bản minh hoạ ở trên không rõ ràng, nhưng kết quả này cho thấy kết quả nội suy nhất quán hơn với lab. Tuy nhiên, cú pháp của lab không dễ đọc, có 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 cú pháp quen thuộc nhưng yêu cầu nội dung chuyển màu được nội suy hoàn toàn trong một không gian 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 cùng một màu trong hwb nhưng chỉ định không gian màu để nội suy thành hwb hoặc oklab. hwb là không gian màu tuyệt vời cho độ sống động cao nhưng có thể có các vùng 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 các hiệu ứng chuyển màu tuyến tính theo nhận thức vẫn giữ được độ bão hoà. Tính năng này rất thú vị vì bạn có thể thử một vài không gian màu khác nhau để xem hiệu ứng chuyển màu nào bạn thích nhất.

Dưới đây là một Codepen thử nghiệm với các hiệu ứng chuyển màu và không gian màu, các chiến lược kết hợp và so khớp để khám phá các khả năng. Ngay cả quá trình chuyển đổi từ màu đen sang màu trắng cũng khác nhau trong mỗi không gian màu!

Kẹp gam màu

Có những trường hợp một màu có thể yêu cầu một giá trị nằm ngoài gam màu. Hãy xem xét màu sau:

rgb(300 255 255)

Giá trị tối đa cho một kênh màu trong không gian 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.

Clamping là khi thông tin bổ sung chỉ bị xoá. 300 trở thành 255 trong công cụ màu. Màu sắc hiện đã được kẹp trong không gian của nó.

Chọn không gian 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 "không gian màu" nào. Từ các nghiên cứu và kinh nghiệm của mình, tôi không thấy một không gian màu nào là không gian màu duy nhất cho tất cả các tác vụ của mình. Mỗi phương thức đều có những thời điểm 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ó 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à điểm xuất phát của tôi. Nếu kết quả không như mong đợi, tôi sẽ thử kiểm thử các không gian khác. Để pha trộn màu sắc và tạo hiệu ứng chuyển màu, 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 sắc tổng thể của giao diện người dùng, tôi thích oklch.

Sau đây là một số bài viết mà mọi người đã chia sẻ chiến lược màu sắc mới của họ 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 toàn bộ vào oklch, có thể họ sẽ thuyết phục bạn làm như vậy:

1. OKLCH trong CSS: lý do chúng tôi chuyển từ RGB và HSL của Andrey Sitnik
2. Định dạng màu của Josh W. Comeau
3. OK, OKLCH của Chris Coyier

Các bước tiếp theo

Giờ đây, khi đã quen thuộc với các không gian màu và công cụ mới, bạn có thể chuyển sang màu HD.

Độ sống động cao hơn, thao tác và nội suy nhất quán, đồng thời mang đến trải nghiệm sống động hơn cho người dùng.

Đọc thêm về tài nguyên màu trong hướng dẫn.