Recomendación de curso:

Función color() de CSS

Definición y uso de CSS color() La función permite especificar el color en un espacio de color específico.

Ejemplo

Ejemplo 1

Especifique el color de fondo en el espacio de color display-p3 (transparencia 0.3):

div {
  padding: 15px;
  border: 2px sólido negro;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Prueba por ti mismo

Ejemplo 2

Usar la sintaxis de valor relativo:

div {
  padding: 15px;
  border: 2px sólido negro;
  background-color: color(from blue srgb r g b / 0.4);
}

Prueba por ti mismo

Sintaxis CSS

Sintaxis de valor absoluto

color(colorspace c1 c2 c3 / A)
Valor Descripción
colorspace

Obligatorio. Define uno de los espacios de color predefinidos:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Obligatorio. Representa el valor del componente del espacio de color.

Cada valor se puede escribir como número (entre 0 y 1), porcentaje (entre 0% y 100%) o palabra clave none.
/ A

Opcional. Representa el valor del canal de transparencia del color (0 representa completamente transparente, 100 representa completamente opaco).

También se puede usar none (que representa un canal de transparencia sin transparencia).

El valor predeterminado es 100.

Sintaxis de valor relativo

color(from color colorspace c1 c2 c3 / A)
Valor Descripción
from color

Comienza con la palabra clave from, seguida del valor del color que representa la color original.

Esta es la color original en la que se basa el color relativo.
colorspace

Obligatorio. Define uno de los espacios de color predefinidos:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Obligatorio. Representa el valor del componente del espacio de color.

Cada valor se puede escribir como número (entre 0 y 1), porcentaje (entre 0% y 100%) o palabra clave none.
/ A

Opcional. Representa el valor del canal de transparencia del color (0 representa completamente transparente, 100 representa completamente opaco).

También se puede usar none (que representa un canal de transparencia sin transparencia).

El valor predeterminado es 100.

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 15 97

Páginas relacionadas

Referencia:Colores CSS