Convertir un color entre RGB, HSL y hexadecimal

Trabajar con color en la web implica alternar constantemente entre varias notaciones. Un convertidor de color evita los errores manuales y permite pasar de un formato a otro de forma instantánea según el contexto de uso. Cada formato tiene sus puntos fuertes, y saber cuál utilizar es uno de los reflejos del desarrollador front-end.

Estos son los usos típicos que motivan una conversión de color:

• RGB es nativo en CSS y JavaScript, legible por los humanos para entender una dominante (canales rojo, verde, azul en 0-255).
• HSL hace que modificar un tono sea trivial: basta con ajustar la saturación o la luminosidad sin recalcular cada canal.
• HEX es el formato canónico para copiar y pegar: seis caracteres, compatible con todo, ideal para los maquetados de Figma, Sketch o las guías de estilo.
• Las conversiones HEX to RGB, RGB to HEX, HEX to HSL y sus recíprocas son las operaciones más habituales en CSS y JavaScript.

RGB y RGBA (Red, Green, Blue, Alpha)

Cada canal se codifica como un entero entre 0 y 255, lo que corresponde a un octeto por componente y da 16 777 216 colores posibles. El canal alfa de RGBA va de 0 (transparente) a 1 (opaco) y controla la transparencia.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX y HEX8 (notación hexadecimal)

Formato compacto muy extendido: #RRGGBB con seis caracteres, donde cada par representa un canal RGB en base 16. La variante #RRGGBBAA con ocho caracteres añade el canal alfa en hexadecimal (00 transparente, FF opaco). La notación corta #RGB también existe: #F53 es equivalente a #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL y HSLA (Hue, Saturation, Lightness, Alpha)

HSL describe el color de forma perceptual. Hue es un ángulo sobre la rueda cromática (0 a 360°), Saturation y Lightness son porcentajes. Es el formato recomendado para generar variantes: aclarar un botón en hover, desaturar un estado deshabilitado, crear una paleta coherente variando únicamente el tono.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Otros formatos existentes

CMYK (Cyan, Magenta, Yellow, Key) se utiliza en impresión: describe un color por sustracción de tintas y no es pertinente en pantalla. OKLCH y LAB son espacios perceptualmente uniformes aparecidos en CSS Color Level 4; permiten un mejor control de la luminosidad percibida. Esta herramienta se centra en las conversiones RGB, HEX y HSL, que cubren la inmensa mayoría de necesidades web.

HEX a RGB consiste en parsear la cadena por pares de caracteres e interpretar cada par como un entero en base 16:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB a HEX es la operación inversa: cada canal se convierte a base 16, se completa con dos caracteres y se concatena.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB a HSL es más algorítmico. Se normalizan los canales entre 0 y 1, se calcula el mínimo y el máximo para deducir la luminosidad, después la saturación y luego el tono según el canal dominante. La fórmula completa está documentada en la especificación CSS Color Module Level 3.

La herramienta funciona en ambos sentidos entre RGB, HEX y HSL. Para realizar una conversión:

1. Elija el formato de entrada: RGB, HEX o HSL.
2. Introduzca el valor (por ejemplo #1400B6, rgb(20, 0, 182) o hsl(247, 100%, 36%)).
3. Inicie la conversión: los equivalentes en los otros dos formatos se muestran inmediatamente.
4. Copie el resultado deseado mediante el botón correspondiente y péguelo en su hoja de estilos o en su maquetado.

El cálculo se efectúa en el lado del navegador, ningún dato se envía a un servidor.

• Diseño web y CSS: recuperar un HEX desde un maquetado y obtener el HSL equivalente para generar un estado hover o active sin alejarse del tono.
• Identidad visual y paleta: declinar un color primario en varias variantes (claro, oscuro, atenuado) jugando con la luminosidad o la saturación HSL.
• Ilustración y diseño gráfico: trasladar un color de pantalla (RGB) a un código hexadecimal que transmitir a un software o a un cliente.
• Accesibilidad: convertir al formato RGB para calcular después una ratio de contraste (WCAG AA exige 4.5:1 para el texto normal) con el color de fondo.
• Variables CSS y preprocesadores: alimentar tokens de diseño en un fichero SASS o un tema Tailwind a partir de un único color de referencia.

Algunas conversiones completas para ilustrar la correspondencia entre los tres formatos:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Con canal alfa:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

¿Cuál es la diferencia entre HEX y HEX8?

HEX clásico codifica tres canales RGB en seis caracteres (#RRGGBB). HEX8 añade dos caracteres para el canal alfa (#RRGGBBAA), lo que permite gestionar la transparencia en una sola cadena. #1400B6FF y #1400B6 dan visualmente el mismo color, opaco.

¿Es preferible HSL o RGB en CSS?

Ambos son equivalentes en renderizado. HSL es más expresivo para generar una paleta coherente o variantes de estado (hover, focus), porque se modifica un único parámetro perceptual. RGB sigue siendo práctico cuando se trabaja con datos procedentes de un canvas o de un sensor.

¿Por qué mi HEX da un tono distinto al esperado?

Tres causas frecuentes: confusión entre #RGB corto y #RRGGBB largo (los caracteres se duplican, no se concatenan), error de copia en un carácter, o visualización en una pantalla no calibrada. Compruebe también que su CSS no superponga una opacidad padre que modifique el resultado final.

¿Para qué sirve el canal alfa de RGBA y HSLA?

El canal alfa controla la opacidad del color, de 0 (totalmente transparente) a 1 (totalmente opaco). Es útil para los overlays, las sombras, los estados deshabilitados o las superposiciones sobre una imagen. A diferencia de la propiedad CSS opacity, RGBA y HSLA solo afectan al color al que se aplican y no a sus hijos.

¿Se puede convertir un color sin pérdida de precisión?

Entre RGB y HEX la conversión es exacta, los dos formatos codifican la misma información en 24 bits. La conversión a HSL implica redondeos sobre el tono, la saturación y la luminosidad; un ida y vuelta RGB > HSL > RGB puede, por tanto, devolver un valor desfasado en una unidad en algunos canales.

¿Por qué usar un convertidor en línea en lugar de una función propia?

Para una prueba puntual, prototipar una paleta o comprobar rápidamente el equivalente HEX de un color HSL extraído de un maquetado, un convertidor en línea es inmediato. Para una necesidad programática recurrente, una biblioteca como color, chroma-js o tinycolor2 sigue siendo más adecuada.