Recomendação de curso:

Função color() do CSS

Definição e uso de CSS color() A função permite especificar cores em espaços de cor específicos.

Exemplo

Exemplo 1

Especifique a cor de fundo no espaço de cor display-p3 (transparência 0.3):

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

Experimente você mesmo

Exemplo 2

Use a sintaxe de valor relativo:

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

Experimente você mesmo

Sintaxe CSS

Sintaxe de valor absoluto

color(colorspace c1 c2 c3 / A)
Valor Descrição
colorspace

Obrigatório. Define um dos espaços de cor pré-definidos:

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

Obrigatório. Representa o valor do componente do espaço de cor.

Cada valor pode ser escrito como número (entre 0 e 1), porcentagem (entre 0% e 100%) ou palavra-chave none.
/ A

Opcional. Representa o valor do canal de transparência da cor (0 representa completamente transparente, 100 representa completamente opaco).

Também pode usar none (representa canal de transparência ausente).

O valor padrão é 100.

Sintaxe de valor relativo

color(from color colorspace c1 c2 c3 / A)
Valor Descrição
from color

Começa com a palavra-chave from, seguida do valor da cor que representa a cor original.

Esta é a cor original baseada na cor relativa.
colorspace

Obrigatório. Define um dos espaços de cor pré-definidos:

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

Obrigatório. Representa o valor do componente do espaço de cor.

Cada valor pode ser escrito como número (entre 0 e 1), porcentagem (entre 0% e 100%) ou palavra-chave none.
/ A

Opcional. Representa o valor do canal de transparência da cor (0 representa completamente transparente, 100 representa completamente opaco).

Também pode usar none (representa canal de transparência ausente).

O valor padrão é 100.

Detalhes técnicos

Versão: Módulo de Cor CSS Nível 5

Suporte do navegador

O número na tabela representa a versão do navegador que suporta completamente essa função.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Páginas relacionadas

Referência:Cores CSS