CSS color-mix() Function
- Previous Page CSS color() function
- Next Page CSS conic-gradient() function
- Go to the Previous Level CSS Function Reference Manual
Definition and Usage
CSS color-mix()
The function is used to mix two color values at a specified ratio in the given color space.
Instance
Example 1
Mix two color values in the specified proportions in the hsl color space:
div { padding: 15px; border: 2px solid black; background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%); }
Example 2
Mix two color values in different proportions in the oklab color space:
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); }
CSS Syntax
color-mix(color-interpolation-method, color1 %, color2 %)
Value | Description |
---|---|
color-interpolation-method |
Required. Defines the color interpolation method to be used. It consists of the keyword 'in' followed by the name of the color space. Available in the following two types: Rectangular Color Space:
Polar Coordinate Color Space:
|
color1 % |
Required. The color values to be mixed, as well as the optional percentage values (0% to 100%), are used to specify the proportion of the color. The default percentage value is 50%. |
color2 % |
Required. The color values to be mixed, as well as the optional percentage values (0% to 100%), are used to specify the proportion of the color. The default percentage value is 50%. |
Technical Details
Version: | CSS Color Module Level 5 |
---|
Browser Support
The numbers in the table indicate the browser version that first fully supports this function.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
111 | 111 | 113 | 16.2 | 97 |
Related Pages
Reference:CSS Colors
- Previous Page CSS color() function
- Next Page CSS conic-gradient() function
- Go to the Previous Level CSS Function Reference Manual