Função color-mix() do CSS

Definição e uso

CSS color-mix() A função é usada para mesclar dois valores de cores em uma proporção especificada no espaço de cores fornecido.

Exemplo

Exemplo 1

Mix two color values in the hsl color space at specified proportions:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color-mix(in hsl, hsl(125 60 90), salmon 85%);
}

Try It Yourself

Example 2

Mix two color values in the oklab color space at different proportions:

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

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:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • lab
  • oklab
  • xyz
  • xyz-d50
  • xyz-d65

Polar Coordinate Color Space:

  • hsl
  • hwb
  • lch
  • oklch
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 represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Páginas relacionadas

Referência:Cores CSS