Convertidor RGB a HWB
Convierte RGB a HWB — el espacio de color más intuitivo. Piensa en color + blanco + negro.
Valores RGB
RGB(51, 153, 204)
HWB(200°, 20%, 20%)
H: 200°W: 20%B: 20%
CSS: hwb(200 20% 20%)¿Qué es HWB?
HWB (Hue, Whiteness, Blackness) fue propuesto por Alvy Ray Smith en 1996 como una forma más intuitiva de seleccionar colores. Piensa: "tomo un color puro (H), le agrego blanco (W) y negro (B)".
| Eje | Rango | Significado |
|---|---|---|
| H | 0° → 360° | Tono (igual que HSL/HSV) |
| W | 0% → 100% | Cantidad de blanco mezclado |
| B | 0% → 100% | Cantidad de negro mezclado |
HWB vs HSL
| Propiedad | HSL | HWB |
|---|---|---|
| Modelo mental | Tono + Saturación + Luminosidad | Tono + Blanco + Negro |
| Para diseñadores | Menos intuitivo | Más intuitivo (como un pintor) |
| Crear tintes | Aumentar L, reducir S | Solo aumentar W |
| Crear sombras | Reducir L | Solo aumentar B |
| Soporte CSS | Universal | Chrome 101+, Safari 15+ |
Preguntas Frecuentes
¿HWB funciona en CSS?
Sí:
hwb(220 20% 30%). Compatible con Chrome 101+, Safari 15+, Firefox 96+. Tiene mejor soporte que oklch() y lch().¿HWB es perceptualmente uniforme?
No, al igual que HSL. HWB es más intuitivo que HSL para seleccionar colores, pero no perceptualmente uniforme. Para eso, usa OKLCH o LAB.
¿Qué ocurre si W + B > 100%?
Los valores se normalizan proporcionalmente. Por ejemplo, HWB(0, 80%, 60%) se normaliza a HWB(0, 57%, 43%), resultando en un gris.
¿Puedo mezclar colores con HWB?
Sí. Agregar blanco (W) aclara el color. Agregar negro (B) lo oscurece. Es la forma más intuitiva de crear tintes y sombras.
¿HWB y HSB/HSV son lo mismo?
No. Aunque ambos trabajan con tono, HWB mezcla blanco y negro al tono puro. HSV mezcla saturación y brillo. El modelo mental de HWB es más cercano a cómo un pintor mezcla pigmentos.