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

Tài liệu này nằm trong hướng dẫn về màu sắc có độ phân giải cao cho CSS.

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. Codepen sau đây cho thấy tất cả và cú pháp màu cũ kết hợp:

Đọc bản tóm tắt về hệ màu cổ điển.

Quy cách cấp 4 ra mắt năm 12 hệ màu mới để tra cứu màu, tăng từ 7 gam màu mới được chia sẻ trước đó:

• Tuyến tính sRGB
• LCH
• okLCH
• LAB
• okLAB
• Màn hình p3
• Rec2020
• a98 RGB
• ProPhotos 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 tiếp cận các gam màu lớn hơn so với sRGB. Chiến lược phát hành đĩa đơn không gian màu display-p3 cung cấp số lượng màu gần gấp đôi so với RGB, trong khi Rec2020 cung cấp dịch vụ này gần gấp đôi so với display-p3. Có quá nhiều màu sắc!

Hàm color()

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Gói thuê bao mới color() có thể được sử dụng cho bất kỳ hệ màu nào chỉ định màu bằng R, G và B các kênh. color() lấy tham số không gian màu trước, sau đó là một chuỗi cho RGB và một số giá trị alpha (không bắt buộc).

Bạn sẽ thấy nhiều hệ màu mới sử dụng hàm này vì việc có các hàm chuyên dụng như rgb, srgb, hsl, hwb, v.v. đã tăng lên thành danh sách dài, thì hệ thống sẽ dễ dàng hơn để hệ màu là một tham số.

Ưu điểm

• Không gian chuẩn hoá để truy cập vào không gian màu sử dụng kênh RGB.
• Có thể mở rộng theo hệ 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);
}

Lưu ý: Màu có thể nằm trong sRGB Gamut, Display P3 Gamut hoặc Rec2020 Gamut; Lên đến 77,6% phổ nhìn thấy.

sRGB thông qua color()

Hệ màu này cung cấp các tính năng tương tự như rgb(). Chiến dịch này còn cung cấp số 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 này.
• Hỗ trợ công cụ thiết kế.

Nhược điểm

• Không tuyến tính rõ ràng (như lch() là)
• Không có gam màu rộng.
• Hiệu ứng chuyển màu thường trả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() {#linear-srgb}

Thay thế tuyến tính này cho RGB cung cấp 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, thuận tiện cho những trò chơi 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 theo cảm nhận.
• Màu đen và trắng nằm ở 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);
}

Độ dốc sẽ được thảo luận chi tiết sau, nhưng nhanh chóng, sẽ có ý nghĩa khi thấy srgb và linear-srgb từ đen sang trắng để minh hoạ sự khác biệt của chúng:

LCH

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

LCH đưa ra cú pháp để truy cập vào các màu bên ngoài gam màu RGB. Ngoài ra công cụ đầu tiên giúp dễ dàng tạo giá trị ngoài gam màu cho màn hình. Điều này là do màu không gian CIE (lch, oklch, lab, oklab) có thể biểu thị toàn bộ phổ màu có thể nhìn thấy của con người.

Hệ màu này được lập mô hình theo thị giác của con người và cung cấp để chỉ định bất kỳ màu nào trong số đó và các màu khác. Kênh LCH rất nhẹ nhàng, sắc độ và màu sắc. Hue là một góc, như trong HSL và HWB. Độ sáng là một giá trị từ 0 đến 100. Đó là một "tuyến tính nhận thức" đặc biệt lấy con người làm trung tâm nhẹ nhàng. Sắc độ tương tự như độ bão hoà; nó có thể dao động từ 0 đến 230, nhưng không bị ràng buộc về mặt kỹ thuật.

Ưu điểm

• Thao tác màu có thể dự đoán được nhờ vào cảm nhận được tuyến tính, chủ yếu (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 hoà mình.
• Trong một số ít trường hợp, độ dốc có thể cần một điểm điều chỉnh ở 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);
}

Thận trọng: Chroma có thể cho phép tác giả dễ dàng vượt quá gam màu của màn hình. Luôn thận trọng có giá trị C có sắc độ cao.

LAB

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Một hệ màu khác được tạo ra để tiếp cận gam màu CIE, một lần nữa với cảm giác độ sáng tuyến tính (L). A và B trong LAB biểu thị các trục duy nhất của thị giác màu của người: đỏ-xanh lục và xanh lam-vàng. Khi A cho giá trị dương hệ thống sẽ thêm màu đỏ và thêm màu xanh lục khi giá trị thấp hơn 0. Khi B cho trước một số dương thì sẽ có màu vàng, trong đó giá trị âm hướng sang màu xanh dương.

Ưu điểm

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

Nhược điểm

• Có khả năng dịch chuyển màu.
• Khó dùng tay tạo hoặc đoán màu khi đọc cá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ỗ trợ trình duyệt

• 111
• 111
• 113
• 15,4

Nguồn

Hệ màu này chính xác cho LCH. Cũng giống như LCH, (L) tiếp tục đại diện cho độ sáng tuyến tính rõ ràng, C cho sắc độ và H cho sắc độ.

Đây là không gian 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 lượng độ 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à. 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 theo cặp, hoặc có thể dễ dàng yêu cầu những màu có sắc độ cao nằm ngoài gam mục tiêu.

Ưu điểm

• Không có gì bất ngờ khi làm việc với tông màu xanh lam và tím.
• Độ sáng tuyến tính cảm nhận được.
• Sử dụng các kênh quen thuộc.
• Dải động cao.
• Có một công cụ chọn màu hiện đại của Evil Martians.

Nhược điểm

• Dễ dàng hoà mình.
• Mới và tương đối chưa được khám phá.
• Một vài 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

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15,4

Nguồn

Khoảng trống này chính xác cho LAB. Không gian 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, chúng tôi trong CSS có nghĩa là độ dốc và chất lượng thao tác của hàm màu.

Ưu điểm

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

Nhược điểm

• Mới và tương đối chưa được khám phá.
• Một vài 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

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Lưu ý: Màu nằm trong Display P3 Gamut; 45,5% phổ nhìn thấy.

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

Ưu điểm

• Hỗ trợ tuyệt vời, được xem là cơ sở cho màn hình HDR.
• Nhiều màu hơn 50% so với màu 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

• Không gian Rec2020 và CIE cuối cùng sẽ bị 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

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Lưu ý: Màu nằm trong Rec2020 Gamut; 77,6% phổ nhìn thấy.

Rec2020 là một phần trong phong trào UHDTV (TV có độ phân giải siêu cao), cung cấp nhiều màu sắc để sử dụng trong nội dung đa phương tiện 4k và 8k. Rec2020 là một tính năng khác Gam màu dựa trên RGB, lớn hơn display-p3, nhưng không phổ biến bằng người tiêu dùng dưới vai trò là Mạng Hiển thị P3.

Ưu điểm

• Màu sắc Ultra HD.

Nhược điểm

• Mức độ phổ biến của người tiêu dùng vẫn chưa phổ biến.
• 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}

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Lưu ý: Màu nằm trong RGB 98 Gamut; 52,1% phổ nhìn thấy.

Viết tắt của Adobe 1998 RGB, A98 RGB được Adobe tạo ra để hiển thị hầu hết có thể đạt được bằng máy in CMYK. Ảnh này cung cấp nhiều màu hơn so với sRGB, đáng chú ý là với màu lục lam và xanh lục.

Ưu điểm

• Lớn hơn hệ màu sRGB và Display P3.

Nhược điểm

• Không phải là một không gian chung của các nhà thiết kế kỹ thuật số.
• Không có nhiều người chuyển bảng khung hiển thị 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

Hỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Lưu ý: Màu nằm trong ProPhoto Gamut; 90% phổ nhìn thấy.

Do Kodak tạo ra, không gian gam màu rộng này độc đáo cung cấp các dải ô chính màu sắc và đặc điểm thay đổi màu sắc ở mức tối thiểu khi thay đổi độ sáng. Họ cũng tuyên bố bao gồm 100% màu sắc của bề mặt thực tế như trong tài liệu của Michael Pointer vào năm 1980.

Ưu điểm

• Tông màu 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 có imaginary, nghĩa là chúng không nằm trong phạm vi có thể nhìn thấy của con người.

.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ỗ trợ trình duyệt

• 111
• 111
• 113
• 15

Nguồn

Lưu ý: Màu nằm trong HVS Gamut; 100% phổ nhìn thấy của con người (HVS).

Hệ màu CIE XYZ bao gồm tất cả các màu mà người có thị lực trung bình. Đây là lý do tại sao màu này được sử dụng làm tham chiếu chuẩn cho màu khác không gian. Y là độ chói, X và Z là các giá trị có thể có trong Y đã cho độ chói.

Sự khác biệt giữa d50 và d65 là điểm trắng, trong đó d50 sử dụng d50 các điểm trắng 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 hệ màu, đó là nơi màu trắng thực sự tồn tại trong không gian này. Đối với màn hình điện tử, D65 là lựa chọn phổ biến nhất điểm trắng chung và có độ chính xác là 6500 độ K. Chú trọng màu sắc lượt chuyển đổi mà các điểm trắng khớp với nhiệt độ màu (độ ấm hoặc độ mát) không bị ảnh hưởng.

Ưu điểm

• Chế độ truy cập vào đèn tuyến tính có các trường hợp sử dụng tiện lợi.
• Thích hợp để phối màu vật lý.

Nhược điểm

• Đây không phải là nội dung tuyến tính theo nhận thức 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

Thông số CSS Color 5 cũng có để dạy trình duyệ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 vào các màu trong hồ sơ tuỳ chỉnh này bằng hàm color() và chỉ định các giá trị kênh cho nó.

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

Nội suy màu sắc

Bạn có thể thấy sự chuyển đổi từ màu này sang màu khác trong ảnh động, độ dốc và trộn màu. Hiệu ứng chuyển đổi này thường được chỉ định là màu bắt đầu và màu kết thúc, nơi trình duyệt dự kiến sẽ nội suy giữa chúng. Trong trường hợp này, nội suy có nghĩa là tạo một loạt các màu ở giữa để tạo hiệu ứng chuyển đổi mượt mà thay vì hiệu ứng tức thì.

Với độ dốc, phép nội suy là một chuỗi các màu dọc theo một hình dạng. Bằ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, 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 trong nội suy màu

Với việc bổ sung các gam màu và hệ màu mới, sẽ có thêm để nội suy. Chuyển màu in hsl từ xanh dương sang trắng kết quả 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ì xảy ra nếu bạn chuyển đổi 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%));
}

Thật may cho bạn, Color 4 Thông số kỹ thuật có hướng dẫn cho các trình duyệt về cách xử lý nội suy không gian màu. Đối với .gradient, trình duyệt sẽ chú ý đến sự khác biệt hệ màu và sử dụng hệ màu mặc định oklab.

Bạn có thể nghĩ 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 như vậy. Đó là lý do tôi hiển thị độ dốc so sánh thứ hai .lch. Độ dốc .lch là một dải chuyển màu từ hệ màu lch.

Ít phân dải hơn nhờ màu 16 bit

Trước khi màu này được tạo ra, tất cả màu đã được lưu ở dạng một số nguyên 32 bit để đại diện cho cả bốn kênh; đỏ, xanh lục, xanh lam và alpha. Tốc độ này là 8 bit trên mỗi và 2^ 24 màu có thể sử dụng (bỏ qua alpha). 2 ^ 24 = 16.777.216, "hàng triệu màu".

Sau khi màu này hoạt động, bốn giá trị dấu phẩy động 16 bit, mỗi kênh có thay vì gộp thành một nhóm. Đây là tổng số 64 bit dữ liệu, tạo ra hàng triệu màu.

Tác vụ này là bắt buộc để hỗ trợ màu HD. Thao tác này tăng độ màu có thể được lưu trữ. Điều này có một tác dụng phụ thú vị là nhiều màu hơn để trình duyệt sử dụng trong độ dốc.

Tạo dải chuyển màu khi không có đủ màu để tạo dải chuyển màu mượt mà và "dải" hiển thị nổi bật. Băng tần được giảm thiểu rất nhiều bằng hãy nâng cấp lên màu có độ phân giải cao hơn.

Nguồn của hình ảnh

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. Có màu thì theo mặc định, trình duyệt sẽ chuyển hướng ngắn. Cân nhắc một tình huống tại đó có hai điểm trong một hình trụ màu HSL. Độ dốc sẽ nhận được các bước màu bằng cách đi theo đường thẳng giữa hai điểm.

linear-gradient(to right, #94e99c, #e06242)

(minh hoạ mô phỏng)
Khung nhìn từ trên xuống của một hình trụ HSL với một đường kẻ giữa các điểm màu

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

Tuy nhiên, vùng giữa của độ dốc đã mất độ rung. Đ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 hệ màu, chứ không phải trong tâm của phép nội suy gần đó. Điều này thường được gọi là "vùng chết". Có là một vài 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 hôm nay là thêm các điểm dừng màu sắc trong độ dốc có chủ đích hướng dẫn phép nội suy nằm trong phạm vi những dải màu rực rỡ của hệ màu. Nói một cách đơn giản, đó là điểm dừng bổ sung giúp hệ thống hoạt động quanh vùng chết.

Erik Kennedy tạo một công cụ chuyển màu để tính toán màu sắc bổ sung dừng cho bạn, giúp bạn tránh vùng chết ngay cả trong những không gian màu thường hấp dẫn về phía nó. Sử dụng thuộc tính này, truyền cùng các màu trong ví dụ đầu tiên nhưng thay đổi nội suy màu thành HSL, nó tạo ra điều này:

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

(minh hoạ mô phỏng)
Khung nhìn từ trên xuống của một hình trụ HSL với một đường cong gồm 9 điểm dừng màu

Với các điểm dừng có hướng dẫn, phép nội suy không còn là đường thẳng mà dường như di chuyển xung quanh vùng chết, giúp duy trì độ bão hoà, dẫn đến chuyển màu rực rỡ 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ể có các chỉ số tương tự hoặc cao hơn quyền kiểm soát ngay từ CSS?

Định hướng nội suy màu

Trong Màu 4, khả năng kiểm soát chiến lược nội suy màu sắc đã được thêm vào và là một cách mới để giải quyết (:wink:) vùng chết. Cân nhắc màu sắc và xem xét dải màu 2 điểm dừng chỉ thay đổi góc, có màu sắc chẳng hạn như chuyển từ 140deg sang 240deg.

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

Độ dốc mặc định lấy Định tuyến shorter có thể trừ phi mà bạn chỉ định để lấy Tuyến đường longer. Sắc độ các tuỳ chọn nội suy chỉ đạo việc xoay góc, chẳng hạn như yêu cầu người nào đó quay lại trái thay vì phải (hề, Zoolander):

Trong ví dụ về khoảng cách nội suy hue, đường dẫn ngắn và lộ trình dài được mô phỏng để minh hoạ sự khác biệt. Khoảng cách ngắn có ít màu sắc giữa chúng hơn vì nó đi qua một khoảng cách nhỏ nhất có thể, khi khoảng cách xa đã đi qua nhiều sắc độ hơn.

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

Có thêm hai chiến lược nội suy màu sắc trong Màu 4, nhưng chỉ dành cho hình trụ hệ màu. Giữ nguyên 2 màu sắc trong các ví dụ trước, hình ảnh giờ đây sẽ 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ả mong đợi. CSS bạn cầ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%)
  );
}

Để tắt nội suy màu sắc, đây là một sân chơi thú vị nơi bạn có thể thay đổi màu giữa 2 màu dừng và xem hiệu ứng của lựa chọn nội suy màu như cũng như cách hệ màu thay đổi kết quả độ dốc. Các hiệu ứng có thể rất different; hãy xem đây là bốn thủ thuật mới vừa được thêm vào thanh công cụ màu của bạn.

Dải chuyển màu trong các hệ màu khác nhau

Mỗi hệ màu, dựa trên hình dạng và cách sắp xếp màu sắc duy nhất, dẫn đến một độ dốc khác nhau. Trong các ví dụ sau, hãy xem cách mỗi hệ màu xử lý khác nhau, đặc biệt là khi từ màu xanh lam sang màu trắng. Chú ý số lượng trở nên tím ở giữa; đây được gọi là dịch chuyển sắc độ trong nội suy.

Một số độ dốc trong 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 thông qua vùng chết. Các không gian như lab nhóm màu sắc lại với nhau theo cách được tối ưu hoá cho độ bão hoà, vì 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));
}

Bản minh hoạ ở trên, mặc dù tinh tế trong các kết quả, nhưng thể hiện sự nhất quán hơn trong phòng thí nghiệm. Tuy nhiên, cú pháp của lab này không đơn giản, có số âm rất lạ khi đến từ rgb hoặc hsl. Tốt tin tức, chúng ta có thể sử dụng hwb cho cú pháp quen thuộc nhưng yêu cầu độ dốc phải được nội suy hoàn toàn trong hệ màu khác, 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àu trong hwb nhưng chỉ định hệ màu cho nội suy thành hwb hoặc oklab. hwb là hệ màu tuyệt vời dành cho sống động 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ụ hàng đầu). oklab là công cụ tuyệt vời cho các độ dốc tuyến tính nhận biết bão hoà. Tính năng này rất thú vị vì bạn có thể thử một vài màu khác không gian để xem bạn thích độ dốc nào nhất.

Dưới đây là một thử nghiệm của Codepen với độ dốc và không gian màu, kết hợp các chiến lược so khớp để khám phá những khả năng. Thậm chí là từ màu đen thành màu trắng là khác nhau trong mỗi hệ màu!

Kẹp gam

Có những trường hợp mà màu có thể yêu cầu một giá trị nào đó nằm ngoài gam màu. Hãy cân nhắc sử dụng màu sau:

rgb(300 255 255)

Phạm vi tối đa của 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.

Kẹp là khi thông tin bổ sung chỉ đơn giản là bị loại bỏ. 300 trở thành 255 nội bộ cho công cụ màu. Màu sắc hiện đã được giới hạn trong không gian.

Chọn hệ màu

Nhiều người sau khi tìm hiểu về các không gian màu này và tác dụng của chúng, choáng ngợp và muốn biết "điểm nào" để chọn. Từ nghiên cứu của tôi và tôi không thấy một hệ màu riêng biệt cho tất cả các tác vụ của mình. Một có những thời điểm khi 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 đến vậy 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à của tôi địa điểm bắt đầu. Nếu kết quả mà tôi nhận được không như mình mong đợi thì tôi sẽ chọn kiểm thử các không gian khác. Để kết hợp màu sắc và tạo độ dốc, tôi đồng ý với lựa chọn thông số kỹ thuật mặc định của oklab. Tôi thích hệ thống màu và màu tổng thể của giao diện người dùng oklch.

Đây là một vài bài viết mà mọi người đã chia sẻ về màu sắc mới cập nhật của họ dựa trên các hệ 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 chuyển từ RGB và HSL 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

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

Sống động hơn, thao tác và nội suy nhất quán hơn và về tổng thể mang lại nhiều màu sắc hơn cho người dùng.

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