Función CSS color-mix()

Definición y uso

CSS color-mix() La función se utiliza para mezclar dos valores de colores en una proporción específica en el espacio de color dado.

Ejemplo

Ejemplo 1

Mezcla dos valores de color en proporciones especificadas en el espacio de color hsl:

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

Prueba personalmente

Ejemplo 2

Mezcla dos valores de color en diferentes proporciones en el espacio de color oklab:

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);
}

Prueba personalmente

Sintaxis CSS

color-mix(color-interpolation-method, color1 %, color2 %)
Valores Descripción
color-interpolation-method

Obligatorio. Define el método de interpolación de color a utilizar.

Se compone del nombre del espacio de color seguido por la palabra clave in.

Están disponibles los siguientes dos tipos:

Espacio de color rectangular:

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

Espacio de color polar:

  • hsl
  • hwb
  • lch
  • oklch
color1 %

Obligatorio. Los valores de color a mezclar, así como los valores porcentiles opcionales (0% a 100%), se utilizan para especificar la proporción del color.

El valor por defecto del porcentaje es 50%.
color2 %

Obligatorio. Los valores de color a mezclar, así como los valores porcentiles opcionales (0% a 100%), se utilizan para especificar la proporción del color.

El valor por defecto del porcentaje es 50%.

Detalles técnicos

Versión: Módulo de Color CSS Nivel 5

Compatibilidad del navegador

La tabla de números representa la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
111 111 113 16.2 97

Páginas relacionadas

Referencia:Colores CSS