<color-interpolation-method>

Cú pháp

<color-interpolation-method> chỉ định liệu nội suy có nên sử dụng không gian màu hình chữ nhật hay không gian màu cực với phương pháp nội suy hue tùy chọn:

in <rectangular-color-space>
// or
in <polar-color-space>[ <hue-interpolation method>]

Giá trị

<rectangular-color-space>

Một trong các từ khóa srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50, hoặc xyz-d65.

<polar-color-space>

Một trong các từ khóa hsl, hwb, lch, hoặc oklch.

<hue-interpolation-method> Optional

Thuật toán nội suy hue. Mặc định là shorter hue.

<custom-color-space>

Một <dashed-ident> tham chiếu đến một @color profile tùy chỉnh.

Cú pháp chính thức

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<custom-color-space> = 
  <dashed-ident>  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Ví dụ

So sánh các không gian màu nội suy sử dụng gradient

Ví dụ sau cho thấy hiệu ứng của việc sử dụng các không gian màu nội suy khác nhau cho linear-gradient().

HTML

<div>sRGB:</div>
<div class="gradient srgb"></div>
<div>Oklab:</div>
<div class="gradient oklab"></div>
<div>Oklch (với <code>longer hue</code>):</div>
<div class="gradient oklch-longer"></div>

CSS

.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}

Kết quả

Nội suy màu trong gradient lặp lại

Ví dụ sau cho thấy cách chỉ định không gian màu khi nội suy màu sắc trong gradient lặp lại. Ba hộp hiển thị các loại gradient lặp lại khác nhau sử dụng các hàm repeating-conic-gradient(), repeating-linear-gradient() và repeating-radial-gradient(). Hộp đầu tiên sử dụng không gian màu Lab để nội suy giữa hai giá trị màu. Hộp thứ hai và thứ ba sử dụng OkLCh và thêm vào đó cung cấp <hue-interpolation-method> để chỉ định cách nội suy giữa các giá trị hue.

HTML

<div class="gradient conic">conic</div>
<div class="gradient linear">linear</div>
<div class="gradient radial">radial</div>

CSS

Chúng ta đã dùng cùng hai màu trong mỗi gradient để minh họa các hiệu ứng khác nhau của <hue-interpolation-method> và color space đối với nội suy màu trong gradient.

.gradient {
  height: 200px;
  width: 200px;
  display: inline-block;
  font-family: monospace;
  margin: 10px;
  font-size: 16px;
}

.conic {
  background-image: repeating-conic-gradient(
    in lab,
    burlywood,
    blueviolet 120deg
  );
}

.linear {
  background-image: repeating-linear-gradient(
    in oklch,
    burlywood,
    blueviolet 75px
  );
}

.radial {
  background-image: repeating-radial-gradient(
    in oklch longer hue,
    blueviolet 50px,
    burlywood 100px
  );
}

Kết quả

So sánh hộp đầu tiên và thứ hai cho thấy sự khác biệt của việc nội suy giữa hai màu trong các không gian màu khác nhau. So sánh hộp thứ hai và thứ ba cho thấy sự khác biệt giữa các <hue-interpolation-method>, với gradient tuyến tính dùng phương pháp shorter (mặc định) và gradient hướng tâm dùng phương pháp longer.

Thông số kỹ thuật

Khả năng tương thích trình duyệt

css.types.color.color-mix

css.types.color.color.display-p3-linear

Xem thêm

• <color>, <gradient>
• <hue-interpolation-method>