CSS 函式 - color-mix()

CSS 中的 color-mix() 函式採用兩個 <color> 值作為引數，並返回在特定顏色空間中以給定量混合的兩個指定顏色的混合結果。

可能的值

color-mix() 函式的功能表示法為 color-mix(method, color1[ p1], color2[ p2])。

method：這是一個 <color-interpolation-method>，用於指定插值顏色空間。
color1, color2：儲存將要混合的 <color> 值。
p1, p2：這是一個可選值，用於指定要混合的顏色量。用 <percentage> 值表示，介於 0% 和 100% 之間。
- 當 p1 和 p2 均未指定時，則 p1 = p2 = 50%。
- 當 p1 未指定時，則 p1 = 100% - p2。
- 當 p2 未指定時，則 p2 = 100% - p1。
- 當 p1 = p2 = 0% 時，函式無效。
- 當 p1 + p2 不等於 100 時，則 p1' = p1 / (p1 + p2) 和 p2' = p2 / (p1 + p2)，其中 p1' 和 p2' 是歸一化結果。

以下是不同的 color-interpolation-method：

<rectangular-color-space>：srgb、srgb-linear、lab、oklab、xyz、xyz-d50、xyz-d65
<polar-color-space>：hsl、hwb、lch、oklch
<hue-interpolation-method>：shorter、longer、increasing、decreasing

語法

color(display-p3 0.45 1 0) | color(display-p3 0.45 1 0 / 0.4)

CSS color-mix() - rectangular-color-space (srgb)

以下是一個示例，它顯示了基於 p1 和 p2 值（要混合的顏色量）混合顏色（color1 和 color2）的情況。color-interpolation-method 為 rectangular-color-space (srgb)

<html>
<head>
<style>
   .container {
      display: flex;
      border: 3px solid blue;
      padding: 5px;
      width: 350px;
   }

   #sample-div   {
      width: 80px;
      height: 80px;
      border: 2px solid black;
      margin-right: 10px;
   }
   
   .color-srgb-p1 {
      background-color: color-mix(in srgb, #65ef23 90%, yellow);
   }  

   .color-srgb-p2 {
      background-color: color-mix(in srgb, #65ef23, yellow 80%);
   }  

   .color-srgb-none {
      background-color: color-mix(in srgb, #65ef23, yellow);
   }  

   .color-srgb-both {
      background-color: color-mix(in srgb, #65ef23 20%, yellow 45%);
   }  
</style>
</head>
<body>
   <h2>Normalization of colors based on p1 and p2</h2>
   <div class="container">
      <div class="color-srgb-p1" id="sample-div">p1=90%</div>
      <div class="color-srgb-p2" id="sample-div">p2=80%</div>
      <div class="color-srgb-none" id="sample-div">none</div>
      <div class="color-srgb-both" id="sample-div">p1=20% p2=45%</div>
   </div>
</body>
</html>

CSS color-mix() - polar-color-space (hsl)

以下是一個示例，它顯示了基於 p1 和 p2 值（要混合的顏色量）混合顏色（color1 和 color2）的情況。color-interpolation-method 為 polar-color-space (hsl)

<html>
<head>
<style>
   .container {
      display: flex;
      border: 3px solid blue;
      padding: 5px;
      width: 350px;
   }

   #sample-div   {
      width: 80px;
      height: 80px;
      border: 2px solid black;
      margin-right: 10px;
   }
   
   .color-hsl-p1 {
      background-color: color-mix(in hsl, #90b 90%, white);
   }  

   .color-hsl-p2 {
      background-color: color-mix(in hsl, #90b, white 80%);
   }  

   .color-hsl-none {
      background-color: color-mix(in hsl, #90b, white);
   }  

   .color-hsl-both {
      background-color: color-mix(in hsl, #90b 20%, white 45%);
   }  
</style>
</head>
<body>
   <h2>Normalization of colors - hsl colorspace</h2>
   <div class="container">
      <div class="color-hsl-p1" id="sample-div">p1=90%</div>
      <div class="color-hsl-p2" id="sample-div">p2=80%</div>
      <div class="color-hsl-none" id="sample-div">none</div>
      <div class="color-hsl-both" id="sample-div">p1=20% p2=45%</div>
   </div>
</body>
</html>

CSS color-mix() - hue-interpolation-method (lch)

以下是一個示例，它顯示了基於 p1 和 p2 值（要混合的顏色量）混合顏色（color1 和 color2）的情況。color-interpolation-method 為 hue-interpolation-method (lch)

<html>
<head>
<style>
   .container {
      display: flex;
      border: 3px solid blue;
      padding: 10px;
      width: 700px;
   }

   #sample-div   {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      margin-right: 10px;
   }
   
   .color-lch-color1 {
      background-color: lch(50% 100% 200);
   }  

   .color-lch-color2 {
      background-color: lch(100% 50 200);
   }  

   .color-shorter {
      background-color: color-mix(in lch shorter hue,
      lch(50% 100% 200),
      lch(100% 50 200)
      );
   }  

   .color-longer {
      background-color: color-mix(in lch longer hue,
      lch(50% 100% 200),
      lch(100% 50 200)
      );
   }  

   .color-increasing {
      background-color: color-mix(in lch increasing hue,
      lch(50% 100% 200),
      lch(100% 50 200)
      );
   }  

   .color-decreasing {
      background-color: color-mix(in lch decreasing hue,
      lch(50% 100% 200),
      lch(100% 50% 200)
      );
   }  
</style>
</head>
<body>
   <h2>hue interpolation method</h2>
   <div class="container">
      <div class="color-lch-color1" id="sample-div">p1=90%</div>
      <div class="color-lch-color2" id="sample-div">p2=80%</div>
      <div class="color-shorter" id="sample-div">shorter</div>
      <div class="color-longer" id="sample-div">longer</div>
      <div class="color-increasing" id="sample-div">increasing</div>
      <div class="color-decreasing" id="sample-div">decreasing</div>
   </div>
</body>
</html>

列印頁面