Thecolor-mix() functional notation takes two<color> values and returns the result of mixing them in a given colorspace by a given amount.

Syntax

/* Polar color space */color-mix(in hsl, hsl(200 50 80), coral)color-mix(in hsl, hsl(200 50 80) 20%, coral 80%)/* Rectangular color space */color-mix(in srgb, plum, #123456)color-mix(in lab, plum 60%, #123456 50%)/* With hue interpolation method */color-mix(in lch increasing hue, hsl(200deg 50% 80%), coral)color-mix(in lch longer hue, hsl(200deg 50% 80%) 44%, coral 16%)

Parameters

Thecolor-mix( <color-interpolation-method>, <color> [<percentage>], <color> [<percentage>] ) accepts the following parameters:

<color-interpolation-method>

Specifies what interpolation method should be used to mix the colors. It consists of thein keyword followed by acolor space (one of the color spaces listed in theformal syntax), and, optionally, a<hue-interpolation-method>.

<color>

A color to mix; can be any valid<color> value.

<percentage>Optional

A percentage value specifying the amount of the corresponding color to mix; can be any<percentage> value between0% and100%, inclusive.

Return value

A<color>; the result of mixing the colors, in the given<color-space>, in the specified amounts and hue direction.

Description

Thecolor-mix() function enables mixing two<color> values of any type, in a specific ratio, in a given colorspace, using either a shorter or longer hue interpolation method. Browsers support a plethora of color spaces; thecolor-mix() function enables a wide range of colors to be mixed, not limited to the sRGB color space.

This demo allows you to select two colors,color-one andcolor-two, and mix them, optionally setting each color's percentage, the color space in which the colors are mixed, and the interpolation method. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. Change the percentage values of each color using the sliders. Change the color space via the drop-down menu.

Choosing a color space

Choosing the correct color space is important for producing desired results. Given the same colors to mix, different color spaces may be more appropriate depending on the interpolation use case.

• If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
• If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab (and older Lab) color spaces are appropriate, because they are designed to be perceptually uniform.
• If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, the Oklch (and older LCH) color spaces work well.
• Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes.

Color interpolation method

The<color-interpolation-method> specifies what interpolation method should be used to mix the colors. It consists of thein keyword and the color space the colors should be mixed in.The color space must be one of the available color spaces listed in theformal syntax. Depending on the color space used, you can optionally direct the hue to be mixed along a longer or shorter path.

The<rectangular-color-space> category includessrgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,lab,oklab,xyz,xyz-d50, andxyz-d65.

The<polar-color-space> category includeshsl,hwb,lch, andoklch. With these you can optionally follow the color space name with a<hue-interpolation-method>. This value defaults toshorter hue, but can also be set tolonger hue,increasing hue, ordecreasing hue.

Color percentages

Each of the two colors can be declared with a<percentage> value between0% and100%, which specifies the amount of the corresponding color to mix. The percentages are normalized if the total value of the declared percentages does not equal100%.

The two color percentages (we'll refer to them asp1 andp2) are normalized as follows:

• If bothp1 andp2 are omitted, thenp1 = p2 = 50%.
• Ifp1 is omitted, thenp1 = 100% - p2.
• Ifp2 is omitted, thenp2 = 100% - p1.
• Ifp1 = p2 = 0%, the function is invalid.
• Ifp1 + p2 ≠ 100%, thenp1' = p1 / (p1 + p2) andp2' = p2 / (p1 + p2), wherep1' andp2' are the normalization results.
  • Ifp1 + p2 < 100%, then an alpha multiplier ofp1 + p2 is applied to the resulting color. This is similar to mixing intransparent, with percentagept = 100% - p1 - p2.

Formal syntax

<color-mix()> =
color-mix(<color-interpolation-method>? ,[<color>&&<percentage [0,100]>?]#)

<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

Examples

Mixing two colors

This example demonstrates mixing two colors, red#a71e14 at different percentages and white with no percentage given. The higher the percentage of#a71e14 is mixed, the more red and less white the output color is.

HTML

<ul>  <li>0%</li>  <li>25%</li>  <li>50%</li>  <li>75%</li>  <li>100%</li>  <li></li></ul>

CSS

Thecolor-mix() function is used to add increasing percentages of red, up to 100%. The 6th<li> doesn't include a percentage for either color.

ul {  display: flex;  list-style-type: none;  font-size: 150%;  gap: 10px;  border: 2px solid;  padding: 10px;}li {  padding: 10px;  flex: 1;  box-sizing: border-box;  font-family: monospace;  outline: 3px solid #a71e14;  text-align: center;}

li:nth-child(1) {  background-color: color-mix(in oklab, #a71e14 0%, white);}li:nth-child(2) {  background-color: color-mix(in oklab, #a71e14 25%, white);}li:nth-child(3) {  background-color: color-mix(in oklab, #a71e14 50%, white);}li:nth-child(4) {  background-color: color-mix(in oklab, #a71e14 75%, white);}li:nth-child(5) {  background-color: color-mix(in oklab, #a71e14 100%, white);}li:nth-child(6) {  background-color: color-mix(in oklab, #a71e14, white);}

Result

The total value of both colors in acolor-mix() function is 100%, even if the values set by the developer don't total 100%. In this example, as only one color has a percentage assigned, the other color is implicitly given a percentage value so that the combined total equals 100%. In the last<li>, where neither color is assigned a percentage, both default to 50%.

Adding transparency

This example demonstrates using thecolor-mix() function to add transparency to a color by mixing any color withtransparent.

HTML

<ul>  <li>0%</li>  <li>25%</li>  <li>50%</li>  <li>75%</li>  <li>100%</li>  <li></li></ul>

CSS

Thecolor-mix() function is used to add increasing percentages ofred, which is declared using acustom property named--base, defined on the:root. The 6th<li> doesn't include a percentage, creating an output color that is half as opaque as the--base color. We include a striped background on the<ul> to make the transparency visible.

ul {  display: flex;  list-style-type: none;  font-size: 150%;  gap: 10px;  border: 2px solid;  padding: 10px;}li {  padding: 10px;  flex: 1;  box-sizing: border-box;  font-family: monospace;  outline: 1px solid var(--base);  text-align: center;}

:root {  --base: red;}ul {  background: repeating-linear-gradient(    45deg,    chocolate 0px 2px,    white 2px 12px  );}li:nth-child(1) {  background-color: color-mix(in srgb, var(--base) 0%, transparent);}li:nth-child(2) {  background-color: color-mix(in srgb, var(--base) 25%, transparent);}li:nth-child(3) {  background-color: color-mix(in srgb, var(--base) 50%, transparent);}li:nth-child(4) {  background-color: color-mix(in srgb, var(--base) 75%, transparent);}li:nth-child(5) {  background-color: color-mix(in srgb, var(--base) 100%, transparent);}li:nth-child(6) {  background-color: color-mix(in srgb, var(--base), transparent);}

Result

In this way, thecolor-mix() function can be used to add transparency to any color, even if the color is already non-opaque (with an alpha channel value < 1). However,color-mix() can't be used to make a semi-transparent color fully opaque. For this, use arelative color with a CSScolor function. Relative colors can alter the value of any color channel, including increasing a color's alpha channel to render the color fully opaque.

Using hue interpolation in color-mix()

This example demonstrates the hue interpolation methods available to thecolor-mix() function. When using hueinterpolation, the resulting hue is between the hue values of the two colors being mixed. The value will be different based on which route is taken around the color wheel.

For more information, see<hue-interpolation-method>.

<p>longer</p><ul>  <li>100%</li>  <li>80%</li>  <li>60%</li>  <li>40%</li>  <li>20%</li>  <li>0%</li></ul><p>shorter</p><ul>  <li>100%</li>  <li>80%</li>  <li>60%</li>  <li>40%</li>  <li>20%</li>  <li>0%</li></ul><p>increasing</p><ul>  <li>100%</li>  <li>80%</li>  <li>60%</li>  <li>40%</li>  <li>20%</li>  <li>0%</li></ul><p>decreasing</p><ul>  <li>100%</li>  <li>80%</li>  <li>60%</li>  <li>40%</li>  <li>20%</li>  <li>0%</li></ul>

CSS

Theshorter hue interpolation method takes the shorter route around the color wheel, whereas thelonger hue interpolation method takes the longer route. Withincreasing hue, the route starts with increasing values. Withdecreasing hue the value decreases. We mix two<named-color> values to create a series oflch() intermediary colors that differ based on which route is taken around the color wheel. The mixed colors includered,blue, andyellow with LCH hue values of approximately 41deg, 301deg, and 100deg, respectively.

To reduce code redundancy, we usedCSS custom properties for both colors and for the interpolation method, setting different values on each<ul>.

body {  font-family: monospace;}ul {  display: flex;  list-style-type: none;  font-size: 150%;  gap: 10px;  padding: 10px;  margin: 0;}li {  padding: 10px;  flex: 1;  outline: 1px solid var(--base);  text-align: center;}

ul:nth-of-type(1) {  --distance: longer; /* 52 degree hue increments */  --base: red;  --mixin: blue;}ul:nth-of-type(2) {  /* 20 degree hue decrements */  --distance: shorter;  --base: red;  --mixin: blue;}ul:nth-of-type(3) {  /* 40 degree hue increments */  --distance: increasing;  --base: yellow;  --mixin: blue;}ul:nth-of-type(4) {  /* 32 degree hue decrements */  --distance: decreasing;  --base: yellow;  --mixin: blue;}li:nth-child(1) {  background-color: color-mix(    in lch var(--distance) hue,    var(--base) 100%,    var(--mixin)  );}li:nth-child(2) {  background-color: color-mix(    in lch var(--distance) hue,    var(--base) 80%,    var(--mixin)  );}li:nth-child(3) {  background-color: color-mix(    in lch var(--distance) hue,    var(--base) 60%,    var(--mixin)  );}li:nth-child(4) {  background-color: color-mix(    in lch var(--distance) hue,    var(--base) 40%,    var(--mixin)  );}li:nth-child(5) {  background-color: color-mix(    in lch var(--distance) hue,    var(--base) 20%,    var(--mixin)  );}li:nth-child(6) {  background-color: color-mix(    in lch var(--distance) hue,    var(--base) 0%,    var(--mixin)  );}

Result

Withlonger hue the increments or decrements between colors will always be the same or larger than when usingshorter hue. Useincreasing hue ordecreasing hue when the direction of the hue value change is more important than the length between values.

Specifications

Browser compatibility

See also

• <color>
• <color-interpolation-method>
• <hue>
• CSS relative colors