CSS 函数

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'是归一化结果。

以下是不同之处颜色混合方法:

  • <rectangle-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(): 矩形颜色空间(srgb)

以下是一个示例，显示基于 p1 和 p2 的值（要混合的颜色量）混合颜色（颜色 1 和颜色 2）。颜色混合方法是矩形颜色空间（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>基于 p1 和 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(): 极坐标颜色空间（hsl）

以下是示例显示基于 p1 和 p2 值（要混合的颜色量）的颜色混合（颜色 1 和颜色 2）。颜色混合方法是极坐标颜色空间（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>颜色标准化 - hsl 颜色空间</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(): 色调混合方法（lch）

以下是示例显示基于 p1 和 p2 值（要混合的颜色量）的颜色混合（颜色 1 和颜色 2）。颜色混合方法为色调混合方法（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>色相混合法</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>