CSS Function - color-mix()

The color-mix() function in CSS takes two <color> values as parameters and returns a mix of two specified colors, in a particular given colorspace by a given amount.

Possible values

The functional notation for color-mix() function is color-mix(method, color1[ p1], color2[ p2]).

  • method: It is a <color-interpolation-method> that specifies the interpolation colorspace.

  • color1, color2: Holds the <color> values, that will be mixed.

  • p1, p2: It is an optional value, that specifies the amount of color to be mixed. Represented in <percentage> value between 0% and 100%.

    • When both p1 and p2 are not specified, then p1 = p2 = 50%.

    • When p1is not specified, then p1 = 100% - p2.

    • When p2is not specified, then p2 = 100% - p1.

    • When p1 = p2 = 0%, then function gets invalid.

    • When p1 + p2is not equal to 100, then p1' = p1 / (p1 + p2) and p2' = p2 / (p1 + p2), where p1' and p2' are the normalization results.

Following are the different color-interpolation-methods:

  • <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

Syntax

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

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

Following is an example showing the mixing of colors (color1 and color2), based on the value of p1 and p2 (amount of color to be mixed). The color-interpolation-method is 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)

Following is an example showing the mixing of colors (color1 and color2), based on the value of p1 and p2 (amount of color to be mixed). The color-interpolation-method is 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)

Following is an example showing the mixing of colors (color1 and color2), based on the value of p1 and p2 (amount of color to be mixed). The color-interpolation-method is 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>
Advertisements