função hwb() do CSS

definição e uso

CSS hwb() A função CSS usa o modelo de tom, brilho e intensidade (HWB) para especificar cores. Também é possível adicionar um canal de transparência opcional (representando a transparência da cor).

Exemplo

Definir diferentes cores HWB(A):

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p1 {background-color:hwb(120 40% 20%);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}

#p9 {background-color:hwb(360 90% 0%);}

Experimente pessoalmente

Sintaxe CSS

Sintaxe de valor absolutohue whiteness blackness / A)
Valor Descrição
hue

Obrigatório. Define o ângulo no círculo cromático (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul.

Também pode usar none (equivalente a 0deg).
whiteness

Obrigatório. Define a brancura da mistura; 0% representa brancura nula, 100% representa brancura completa.

Também pode usar none (equivalente a 0%).
blackness

Obrigatório. Define a densidade da mistura; 0% representa densidade nula, 100% representa densidade completa.

Também pode usar none (equivalente a 0%).
/ A

Opcional. Representa o valor do canal de transparência da cor (0% ou 0 representa transparência completa, 100% ou 100 representa opacidade completa).

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

O valor padrão é 100%.

Sintaxe de valor relativo

hwb(from color whiteness blackness / A)
Valor Descrição
from color

Começa com o termo from, seguido pelo valor da cor que representa a cor original.

Esta é a cor original baseada na cor relativa.
hue

Obrigatório. Define o ângulo no círculo cromático (de 0 a 360) - 0 (ou 360) é vermelho, 120 é verde, 240 é azul.

Também pode usar none (equivalente a 0deg).
whiteness

Obrigatório. Define a brancura da mistura; 0% representa brancura nula, 100% representa brancura completa.

Também pode usar none (equivalente a 0%).
blackness

Obrigatório. Define a densidade da mistura; 0% representa densidade nula, 100% representa densidade completa.

Também pode usar none (equivalente a 0%).
/ A

Opcional. Representa o valor do canal de transparência da cor (0% ou 0 representa transparência completa, 100% ou 100 representa opacidade completa).

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

O valor padrão é 100%.

Detalhes técnicos

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

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Misturar números e porcentagens nos parâmetros
121 121 122 Não suportado 107

Páginas relacionadas

Referência:Cores CSS

Referência:Função hsl() do CSS

Referência:Função lab() do CSS

Referência:Função lch() do CSS

Referência:Função oklab() do CSS

Referência:Função oklch() do CSS