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.