Ir al selector de color

Conversor de HEX a HWB

Pega un valor HEX y obtén HWB al instante. Cualquier otro formato también sirve.

Interpretado como HEX

Valor HWBhwb(10.59 20% 0%)
De HWB a HEX

Ajustar el color

11°
100 %

68 %
0,210
34°

Todos los demás formatos

Ejemplos de HEX a HWB

ColorHEXHWB
#ff0000hwb(0 0% 0%)
#00ff00hwb(120 0% 0%)
#0000ffhwb(240 0% 0%)
#ffffffhwb(0 100% 0%)
#000000hwb(0 0% 100%)
#808080hwb(0 50.2% 49.8%)
#ff5733hwb(10.59 20% 0%)
#3b82f6hwb(217.22 23.14% 3.53%)
#10b981hwb(160.12 6.27% 27.45%)
#f59e0bhwb(37.69 4.31% 3.92%)
#8b5cf6hwb(258.31 36.08% 3.53%)
#ec4899hwb(330.37 28.24% 7.45%)

Sobre HEX y HWB

HEX escribe el rojo, el verde y el azul con dos dígitos hexadecimales cada uno, como #ff5733. Es la forma más habitual de escribir colores en la web y en las herramientas de diseño.

HWB describe un color por su matiz y por cuánto blanco y negro lleva mezclados. Forma parte de CSS Color 4 y es práctico para aclarar y oscurecer.

Cómo funciona la conversión

Leemos el valor HEX, lo pasamos a CIE XYZ con las matrices de la especificación CSS Color 4 y de ahí a HWB. Los valores fuera de la gama de destino se ajustan con el algoritmo de CSS Color 4, que conserva la luminosidad y el matiz y reduce el croma.

Preguntas y respuestas

¿Cómo convierto HEX a HWB?

Pega o escribe un valor HEX en el campo de arriba. PickShade lo convierte con las fórmulas de CSS Color 4 mientras escribes, y un clic copia el valor HWB.

¿La conversión de HEX a HWB es exacta?

El cálculo es exacto y el resultado solo se redondea para mostrarlo, con suficientes decimales para volver al mismo color. Si el color no cabe en la gama de destino, PickShade te avisa y muestra el color más cercano que sí cabe.

¿Puedo obtener otros formatos a la vez?

Sí. Todos los demás formatos, incluidos OKLCH, Display P3, Tailwind, SwiftUI, Flutter y Android, aparecen bajo el resultado y se copian con un clic.

¿Este conversor es gratuito?

Sí. Es gratis, no necesita registro y funciona entero en tu navegador.