Última actualización: 2026-06-23

Conversión de colores (HEX, RGB, HSL)

Un convertidor de colores traduce un mismo color entre las tres notaciones más utilizadas en la web: HEX, RGB y HSL. Cada una describe el mismo color de una manera diferente, y tanto desarrolladores de front-end como diseñadores necesitan con frecuencia pasar un valor de un formato a otro: copiar un código HEX de una herramienta de diseño en una función RGB, o ajustar un color en HSL porque resulta más intuitivo razonarlo en esa representación.

Tres maneras de escribir un mismo color

RGB define un color indicando cuánta luz roja, verde y azul se mezclan, con cada canal como un entero de 0 a 255. HEX es la misma información en base 16: dos dígitos hexadecimales por canal, combinados en un código de seis dígitos como #3B82F6. Como ambos formatos almacenan exactamente los mismos ocho bits por canal, la conversión entre HEX y RGB es exacta: no se pierde ni se gana información.

HSL adopta un enfoque diferente. En lugar de mezclar primarios, nombra un color por su tono (un ángulo de 0 a 360 grados en la rueda de color), su saturación (de 0 a 100 por ciento, de gris a vívido) y su luminosidad (de 0 a 100 por ciento, de negro al tono puro y de ahí a blanco). HSL se aproxima más a la forma en que las personas describen los colores —«un azul un poco más claro y menos intenso»—, lo que lo hace conveniente para ajustes.

Cómo funciona la conversión

Dividir un código HEX en RGB es aritmética de dígitos: cada par de dígitos hex se lee como un número de 00 a FF, es decir, de 0 a 255. Pasar de RGB a HSL requiere primero escalar los canales al intervalo unitario, luego derivar la luminosidad a partir del punto medio entre el canal mayor y el menor, la saturación a partir de su diferencia y el tono a partir de qué canal es el mayor.

Ejemplo resuelto

Se toma #3B82F6. Los tres pares son 3B, 82 y F6, es decir, 59, 130 y 246, por lo que el color es rgb(59, 130, 246). Al escalar cada canal al intervalo unitario se obtiene aproximadamente 0,231, 0,510 y 0,965. El canal mayor es el azul y el menor es el rojo, por tanto:

con un tono de aproximadamente 217 grados, lo que da hsl(217, 91 %, 60 %).

Como RGB almacena 256 niveles discretos mientras que HSL redondea a grados enteros y porcentajes enteros, una conversión de ida y vuelta puede desplazar un valor en un único paso, imperceptible para el ojo pero relevante cuando se comparan códigos. Para explorar la aritmética en base 16 detrás de los códigos HEX, véase la Conversor de Base Numérica.