Colores HWB: blancura y negrura en CSS

Trata HWB como un modelo de edición sRGB

HWB significa tono, blancura y negrura. CSS Color 4 lo define como otra forma de especificar un color sRGB: se parte del tono sRGB completamente saturado, se mezcla una proporción de blanco y se reserva otra proporción para negro. El resultado permanece en sRGB, así que HWB no habilita Display P3 ni otros colores de gamut amplio. Su valor es operativo: un selector conserva un tono estable mientras la persona ajusta cuánto procede de los extremos blanco y negro.

• El tono usa el mismo círculo que HSL, incluido el espaciado visual desigual entre ángulos numéricos.
• La blancura eleva el canal sRGB mínimo y acerca el resultado a blanco mientras sigue siendo opaco.
• La negrura reduce el canal máximo disponible y acerca el resultado a negro mientras sigue siendo opaco.
• HWB se resuelve a sRGB, por lo que un HEX o rgb() equivalente representa cualquier resultado HWB opaco.
• Las coordenadas HWB son controles de edición, no evidencia de accesibilidad; el contraste se calcula desde los colores renderizados resueltos.

Usa sintaxis separada por espacios y mantén alpha aparte

La función se escribe hwb(H W B / A). El tono acepta un ángulo o un número sin unidad interpretado en grados; los ángulos fuera de una vuelta regresan a la misma posición. Blancura y negrura se expresan claramente como porcentajes. Alpha va después de una barra y vale 100% si se omite. A diferencia de hsl(), HWB no tiene forma antigua con comas: las comas invalidan hwb(). CSS moderno también admite none para un componente ausente, pero none no equivale a cero y resulta sobre todo relevante en interpolaciones.

:root {
  --action: hwb(210 10% 20%);
  --action-translucent: hwb(210 10% 20% / 60%);
  --action-wrapped-hue: hwb(570deg 10% 20%); /* Same hue as 210deg */
}

/* Invalid: HWB does not have a comma syntax. */
.invalid-example {
  color: hwb(210, 10%, 20%);
}

Aumenta la blancura y observa el umbral del primer plano

Mantén el tono en 210 grados y la negrura en 20%, y aumenta la blancura. El mayor canal resuelto permanece en 80% mientras suben los canales menores. La tabla sigue el algoritmo HWB a sRGB de CSS Color 4, redondea cada canal al valor de 8 bits más cercano y calcula contraste desde ese HEX con la fórmula de luminancia WCAG. AA para texto normal exige al menos 4,5:1.

• Para este tono y negrura, el primer plano cambia entre 10% y 20% de blancura.
• Con 10%, negro alcanza solo 4,37:1 y blanco 4,81:1; redondear el porcentaje de entrada no hace seguras ambas opciones.
• El paso 40% da a negro 6,99:1, suficiente para AA pero justo por debajo de 7:1 para AAA en texto normal.
• Prueba cada estado semántico de forma independiente; no presupongas un único primer plano seguro para toda la rampa.
• Conserva valores sin redondear para decidir y redondea únicamente la documentación mostrada.

Aumenta la negrura sin confundirla con opacidad

Mantén ahora tono 210 grados y blancura 10%. Al aumentar la negrura se reduce la aportación disponible del tono puro, mientras el canal mínimo permanece cerca de 10%. Todas las filas siguen siendo completamente opacas. Es distinto de reducir alpha: un color translúcido revela un fondo desconocido, pero un HWB con más negrura ya se resuelve como una terna sRGB completa. Al oscurecerse la escala, el primer plano cambia en la dirección contraria.

Normaliza blancura más negrura al llegar a 100%

El caso límite más importante aparece cuando W + B es al menos 100%. CSS no rechaza el color: normaliza ambas cantidades por su suma y devuelve un resultado acromático cuyos tres canales sRGB son W / (W + B). El tono original no puede modificar ese gris y queda sin efecto. Por eso valores con totales distintos pero idéntica proporción W:B pueden resolver el mismo color tras cruzar el límite.

• La primera fila es el ejemplo de CSS Color 4: 40 / (40 + 80) produce un gris de un tercio.
• Blancura y negrura iguales siempre normalizan a gris 50% cuando su suma alcanza el límite.
• No codifiques tono semántico en un token acromático: cambiar el ángulo no cambia el resultado.
• Si una escala debe conservar el tono, valida W + B < 100% antes de publicarla.
• Evita ciclos repetidos con porcentajes HWB redondeados porque la proporción W:B puede derivar cerca del límite.

Convierte entre RGB, HWB y HSL sin perder la fuente

Para un color sRGB, la blancura HWB es el menor canal RGB normalizado y la negrura es uno menos el mayor canal. El tono deriva de la diferencia entre canales mediante la misma geometría que HSL. La conversión es determinista, pero el redondeo destinado a visualización no es reversible. Conserva una representación canónica con precisión suficiente y deriva las alternativas para documentación y controles de copia en vez de sobrescribir repetidamente la fuente.

Publica tokens HWB con evidencia resuelta

Un conjunto práctico conserva juntos las coordenadas editables, un fallback sRGB resuelto y los resultados de primer plano probados. Las declaraciones directas pueden poner HEX antes de HWB, de modo que el software que no entienda el valor posterior mantenga el anterior. Este fallback no resuelve el contraste con alpha ni vuelve accesible una escala sin probar; cada estado final renderizado necesita evidencia propia.

:root {
  --action: hwb(210 10% 20%);
  --action-muted: hwb(210 30% 20%);
  --action-dark: hwb(210 10% 40%);
  --on-action: #FFFFFF;
  --on-action-muted: #000000;
}

.action {
  color: #FFFFFF;
  background: #1A73CC;
  background: var(--action); /* 4.81:1 with white */
}

.action-muted {
  color: var(--on-action-muted);
  background: #4D8CCC;
  background: var(--action-muted); /* 5.94:1 with black */
}

• Mantén W + B por debajo de 100% cuando el tono elegido deba seguir visible.
• Guarda coordenadas HWB canónicas con precisión suficiente y exporta HEX redondeado como valor sRGB derivado.
• Prueba por separado pares normal, hover, active, selected, focus y disabled en temas claro y oscuro.
• Resuelve alpha sobre el fondo real antes de calcular luminancia o contraste.
• No presentes HWB como gamut amplio o perceptualmente uniforme: hereda el gamut y las limitaciones de tono de sRGB.
• Usa HSL si saturación y luminosidad del modelo son los controles previstos, y OKLCH si se requiere espaciado perceptivo.
• Enlaza la especificación y conserva valores de auditoría sin redondear para que otro generador reproduzca el resultado.