HSL es el lenguaje de color en el que bocetan los diseñadores — «un verde azulado a 175 grados, bastante saturado, más bien oscuro» — pero las pantallas, las imágenes y la mayoría de las librerías de código consumen en última instancia tripletes RGB y códigos hexadecimales. Este conversor de HSL a RGB hace esa última traducción. Escribe un tono (0–359 en la rueda de color), una saturación y una luminosidad (ambas 0–100 %), y obtendrás los valores RGB exactos, el código hexadecimal y CSS listo para copiar, con una muestra en vivo que prueba que el color descrito es el color buscado. Es la segunda mitad natural del trabajo de paletas: diseñas la familia en HSL, subiendo la luminosidad por escalones para tonos y estados, y luego exportas cada escalón a RGB o hex para las herramientas que lo exigen. Los valores precargados — 175, 77 %, 26 % — son un verde azulado profundo cuya respuesta RGB es 15, 118, 110, una conversión que puedes contrastar con cualquier referencia de color. Sin subidas ni cuentas; la matemática ocurre en tu navegador.
Cómo HSL se convierte en RGB
La conversión pasa por el croma: cuánto color permite la luminosidad. Con luminosidad 26 % y saturación 77 %, el croma C = (1 − |2×0,26 − 1|) × 0,77 ≈ 0,40. El tono 175° cae en el segmento entre el cian (180°) y el verde (120°), más cerca del cian, así que el segundo componente X sale cerca de 0,37 y el verde se lleva el croma completo. Sumando el punto de ajuste m = L − C/2 ≈ 0,06 a cada canal y escalando por 255 se obtiene R ≈ 15, G ≈ 118, B ≈ 110: el verde azulado de la muestra. Los seis segmentos del tono explican por qué la rueda se divide en intervalos de 60°: cada segmento tiene un canal a croma completo, uno a cero y uno en rampa entre ambos, y esa es toda la geometría que una conversión necesita. Los grises son el caso degenerado: con saturación 0 el croma es 0, todos los canales igualan la luminosidad y el tono deja de significar algo.
Dónde se usa la respuesta RGB
Muchas superficies se niegan a hablar HSL. El código de Canvas 2D suele construir colores desde números de canal en bucles de procesado de imagen; los motores de juegos y los frameworks de apps nativas guardan los colores normalmente como flotantes RGB o hex; las herramientas de datos exportan RGB; y los clientes de correo antiguos aceptan hex pero se atragantan con las funciones de color modernas de CSS. Así que el flujo se repite en todas partes: una paleta diseñada en una herramienta que habla HSL (la mayoría de las apps de diseño lo hacen) debe entregarse a un entorno que habla RGB. Convertir cada escalón de la paleta a propósito — en vez de ir y venir con un selector a ojo — mantiene intactas las relaciones de la familia: los escalones que comparten tono y saturación en HSL siguen visiblemente emparentados en RGB, y una escalera de luminosidad sigue siendo una escalera. La salida hexadecimal cubre las herramientas de notación compacta, y la línea CSS empareja las formas rgb() y hsl() para que una hoja de estilos lleve la que prefieran tus convenciones.
Notas de precisión antes de fiarte
Los canales RGB son enteros, así que un color HSL cae en los valores de canal más cercanos: exacto para casi cualquier fin, pero un viaje de ida y vuelta HSL → RGB → HSL puede mover un punto porcentual cuando los porcentajes originales ya venían redondeados de otra conversión. Si un color debe igualar una especificación de marca con precisión, convierte una sola vez desde los valores canónicos y guarda el resultado RGB en vez de convertir en los dos sentidos repetidamente. Y ten en cuenta que la rueda es circular: el tono 360 es el tono 0 (rojo), esta herramienta repliega los tonos negativos al rango, y tonos como 175 solo parecen estar «entre» colores con nombre porque los hitos nombrados (rojo, verde, azul, cian, magenta, amarillo) son solo seis puntos sobre un círculo continuo.
Preguntas frecuentes
¿Qué RGB es hsl(175, 77 %, 26 %)?
rgb(15, 118, 110), hex #0f766e: el conversor viene precargado con él, y la muestra enseña el verde azulado profundo.
¿Por qué la saturación 0 siempre es gris?
La saturación es la cantidad de croma. A cero no hay ninguno, así que todos los canales igualan la luminosidad: escala de grises pura, diga lo que diga el tono.
¿Luminosidad 50 % significa un color «medio»?
Significa la mitad de camino entre el negro y la forma más viva de ese color con ese tono y saturación. El brillo percibido aún varía según el tono — los amarillos parecen más claros que los azules con la misma L — pero la escala es consistente.
¿Puedo escribir el tono 360?
Sí; la herramienta lo repliega a 0 (rojo), porque la rueda es un círculo. Los valores más allá de una vuelta completa se envuelven igual.
Herramientas relacionadas
English version: HSL to RGB Converter — Turn HSL Colours into RGB and Hex. También te puede interesar: Conversor de RGB a HSL — Convierte Colores RGB a HSL al Instante · Conversor de HEX a HSL — Obtén Valores HSL desde Cualquier Color Hexadecimal.
Inserta esta herramienta en tu web — gratis
Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.