Conversor HSL a HWB

HSL describe un color por el matiz en la rueda, la saturación como lo vívido de la mezcla y la luminosidad como lo cerca que queda del negro o del blanco. HWB usa ese mismo matiz y nombra cuánto blanco y cuánto negro se mezclan con el matiz puro. Quienes ya eligen colores en HSL suelen necesitar HWB al escribir funciones hwb() del CSS Color Module, al hablar con herramientas de ilustración que exponen deslizadores de blancura y negrura, o al documentar una muestra como tinte más sombra. Este conversor toma el matiz en grados de cero a trescientos sesenta y la saturación y la luminosidad como porcentajes de cero a cien, y devuelve el triple HWB correspondiente con una cadena CSS hwb().

Cómo se proyecta HSL sobre matiz, blancura y negrura

El matiz es compartido por HSL y HWB: cero grados es rojo puro, ciento veinte es verde puro, doscientos cuarenta es azul puro y trescientos sesenta cierra el círculo de nuevo en rojo. HSL guarda entonces la saturación como hasta dónde se estira un gris de la luminosidad elegida hacia el color plenamente cromático en ese matiz, y la luminosidad como la mezcla entre negro al cero por ciento, un tono medio cerca del cincuenta por ciento y blanco al cien por ciento.

HWB nombra el mismo color como un matiz puro mezclado con una cantidad de blanco y una cantidad de negro. En el intervalo unitario el mapeo es de forma cerrada y no necesita un paso por RGB entero: el croma es uno menos el valor absoluto de dos veces la luminosidad menos uno, todo multiplicado por la saturación; la blancura es la luminosidad menos la mitad del croma; la negrura es uno menos la luminosidad menos la mitad del croma.

Eso equivale a tomar el canal RGB mínimo como blanco y uno menos el canal RGB máximo como negro, que es como el CSS Color Module Level Four define HWB. Cuando la saturación es cero el croma desaparece, así que blancura y negrura pasan a ser porcentajes complementarios que suman cien y describen un gris, un negro o un blanco.

Cuando la luminosidad es cincuenta por ciento y la saturación es cien por ciento, el croma vale uno y tanto el blanco como el negro se colapsan a cero, que es el matiz puro. El matiz debe estar en el intervalo cerrado de cero a trescientos sesenta; saturación y luminosidad deben estar cada una entre cero y cien por ciento inclusive.

Qué envía usted y qué recibe a cambio

Envíe tres números finitos en los campos h, s y l. El campo h es el matiz en grados y es obligatorio; debe situarse entre cero y trescientos sesenta inclusive porque HSL y HWB comparten ese ángulo y este conversor no inventará un envoltorio. Los campos s y l son saturación y luminosidad como porcentajes de cero a cien.

Cuando la saturación queda fuera de cero a cien, la respuesta explica que s debe ser un porcentaje en esa banda cerrada para que un cliente pueda acotar o corregir el token antes de reintentar; la misma regla aplica a la luminosidad.

En caso de éxito, la respuesta devuelve los valores h, s y l limpios, informa la blancura w y la negrura b como porcentajes, anida el objeto hsl de origen y el objeto hwb resultante, emite una cadena CSS imprimible de la forma hwb(H W% B%) e incluye una nota breve de fórmula que reexpresa las identidades de croma.

Comprobaciones clásicas incluyen el azul-cian de tono medio con matiz doscientos diez, saturación ochenta y luminosidad cuarenta y cinco, que mapea a nueve por ciento de blanco y diecinueve por ciento de negro; el rojo puro con matiz cero, saturación cien y luminosidad cincuenta, que mapea a cero de blanco y cero de negro; y cualquier matiz con saturación cero, que colapsa a una mezcla acromática cuya blancura más negrura suma cien.

Dónde aparece la conversión de HSL a HWB en el trabajo real

Los sistemas de diseño suelen redactar rampas de marca en HSL para que los equipos de producto puedan escalonar la luminosidad con contraste accesible manteniendo estables el matiz y una banda de saturación; sin embargo, las hojas de estilo modernas, las aplicaciones de ilustración y varios selectores nativos ya exponen HWB porque mezclar un matiz puro con blanco y negro coincide con cómo los pintores hablan de tintes y sombras.

Los ingenieros front-end que migran un token de propiedades personalizadas hsl() a hwb() necesitan un oráculo determinista que no dependa de la serialización del estilo calculado de un navegador concreto. Las herramientas de visualización de datos y de arte generativo que construyen paletas categóricas avanzando el matiz a saturación y luminosidad fijas aún deben volcar HWB cuando un renderizador o una canalización de impresión pide blancura y negrura en lugar de un tercer eje de luminosidad.

El currículo y las lecciones de bootcamp enseñan modelos cilíndricos en paralelo y necesitan una clave de confianza única para los deberes que coincida con las identidades del CSS Color Module y no con una captura de un selector de color. Si más adelante necesita HSL a RGB, HSL a HSV, conversión multi-formato HEX LAB CMYK o comprobaciones de contraste WCAG, trátelos como intenciones de búsqueda y aterrizajes separados en lugar de sobrecargar esta página dedicada al conversor de HSL a HWB.