CSS color-mix() Function
Example
Mix two color values in an hsl colorspace, by a given amount:
div {
padding: 15px;
border: 2px solid black;
background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS color-mix() function mixes two color
values in a given colorspace, by a given amount.
| Version: | CSS Color Module Level 5 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| color-mix() | 111 | 111 | 113 | 16.2 | 97 |
CSS Syntax
color-mix(color-interpolation-method, color1 %, color2 %)
| Value | Description |
|---|---|
| color-interpolation-method | Required. Defines which color interpolation method to be used. It
consists of the in keyword followed by a color-space name. The following
two types are available:
|
| color1 % | Required. A color value to mix and an optional percentage value between 0% and 100% that specifies the amount of color. Default percentage value is 50% |
| color2 % | Required. A color value to mix and an optional percentage value between 0% and 100% that specifies the amount of color. Default percentage value is 50% |
More Examples
Example
Mix two color values in an oklab colorspace, by different amounts:
li:nth-child(1) {
background-color: color-mix(in oklab, #6a5acd 0%,
pink);
}
li:nth-child(2) {
background-color: color-mix(in
oklab, #6a5acd 25%, pink);
}
li:nth-child(3) {
background-color: color-mix(in oklab, #6a5acd 50%, pink);
}
li:nth-child(4) {
background-color: color-mix(in oklab, #6a5acd 75%,
pink);
}
li:nth-child(5) {
background-color: color-mix(in
oklab, #6a5acd 100%, pink);
}
Try it Yourself »
Related Pages
CSS reference: CSS colors.
