Función hwb() de CSS

Definición y uso

CSS hwb() La función CSS especifica colores utilizando el modelo de tono-blanco-negro (HWB). También se puede agregar un canal de transparencia opcional (que representa la transparencia del color).

Ejemplo

Definir diferentes colores 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%);}

Prueba personalmente

Sintaxis de CSS

Sintaxis de valor absolutohue whiteness blackness / A)
Valor Descripción
hue

Obligatorio. Define el ángulo en el anillo de color (de 0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul.

También se puede usar none (equivalente a 0deg).
whiteness

Obligatorio. Define la blancura de la mezcla; 0% representa ausencia de blancura, 100% representa blancura completa.

También se puede usar none (equivalente a 0%).
blackness

Obligatorio. Define la oscuridad de la mezcla; 0% representa ausencia de oscuridad, 100% representa oscuridad completa.

También se puede usar none (equivalente a 0%).
/ A

Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa transparencia completa, 100% o 100 representa opacidad completa).

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

El valor predeterminado es 100%.

Sintaxis de valor relativo

hwb(from color whiteness blackness / A)
Valor Descripción
from color

Empieza con el keyword from, seguido de un valor de color que representa la color original.

Esta es la color original sobre la que se basa el color relativo.
hue

Obligatorio. Define el ángulo en el anillo de color (de 0 a 360) - 0 (o 360) es rojo, 120 es verde, 240 es azul.

También se puede usar none (equivalente a 0deg).
whiteness

Obligatorio. Define la blancura de la mezcla; 0% representa ausencia de blancura, 100% representa blancura completa.

También se puede usar none (equivalente a 0%).
blackness

Obligatorio. Define la oscuridad de la mezcla; 0% representa ausencia de oscuridad, 100% representa oscuridad completa.

También se puede usar none (equivalente a 0%).
/ A

Opcional. Representa el valor del canal de transparencia del color (0% o 0 representa transparencia completa, 100% o 100 representa opacidad completa).

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

El valor predeterminado es 100%.

Detalles técnicos

Versión: CSS Color Module Level 4

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Mezclar números y porcentajes en los parámetros
121 121 122 No soportado 107

Páginas relacionadas

Referencia:Colores de CSS

Referencia:Función hsl() de CSS

Referencia:Función lab() de CSS

Referencia:Función lch() de CSS

Referencia:Función oklab() de CSS

Referencia:Función oklch() de CSS