Convertir un color entre HEX, RGB y HSL
Publicado el · Actualizado el 3 min de lectura
HEX, RGB y HSL son tres maneras de escribir el mismo color. Se encuentran en un programa de dibujo, una hoja de estilos, una herramienta de maquetas o una guía de marca, y se pasa sin cesar de una a otra. La herramienta muestra las tres a la vez y acepta las notaciones habituales.
Tres notaciones de un mismo color
Explorar colores muestra por defecto las tres formas, con una vista previa del color. El HEX es una serie de seis cifras y letras precedida de una almohadilla. El RGB da las cantidades de rojo, verde y azul, de 0 a 255. El HSL describe el matiz en grados, la saturación y la luminosidad en porcentaje, lo que suele ser más intuitivo para aclarar u oscurecer un color. Para el verde #2F4A3F:
| Forma | Resultado |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Los tres botones HEX, RGB y HSL del panel reducen el resultado a una sola forma, práctica para copiar tal cual.
Las notaciones aceptadas
| Notación | Ejemplo | Resultado en HEX |
|---|---|---|
| HEX corto | #fff | #ffffff |
| HEX con transparencia | #2F4A3F80 | #2f4a3f80 |
| RGB con comas | rgb(47, 74, 63) | #2f4a3f |
| RGB con espacios | rgb(47 74 63) | #2f4a3f |
| RGB en porcentajes | rgb(100%, 0%, 0%) | #ff0000 |
| HSL con espacios | hsl(156 22% 24%) | #304b40 |
Los nombres de colores como «rojo» y los valores fuera de 0 a 255 como rgb(300, 0, 0) se rechazan con un mensaje que enumera las notaciones aceptadas.
La transparencia
Una transparencia se escribe en HEX con ocho cifras, o tras una barra oblicua con espacios. El color rgb(47 74 63 / 50%) da #2f4a3f80 en HEX y rgba(47, 74, 63, 0.5) en RGB. A la inversa, #2F4A3F80 da una opacidad de 0,502, porque 80 en hexadecimal vale 128 sobre 255.
Por qué una ida y vuelta cambia un nivel
El HSL se muestra en números enteros: el matiz en grados, la saturación y la luminosidad en porcentaje. Volver del HSL al HEX cae, por tanto, en un color cercano, no siempre en el de partida.
| Inicio | HSL mostrado | Vuelta a HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
La diferencia es de un nivel en cada canal, invisible a simple vista. Para un token de diseño o una marca, conserve el HEX original como referencia y no pase por el HSL.
Los grises
Un gris tiene saturación nula y un matiz sin efecto: #808080 da rgb(128, 128, 128) y hsl(0, 0%, 50%).
Lo que la herramienta no mide
Una conversión de formato no dice nada de la legibilidad. La herramienta no calcula el contraste entre un texto y su fondo: compruébelo aparte antes de publicar. El caso de un código QR, donde el contraste decide la lectura, se trata en Crear un código QR que se escanee a la primera.
Para qué usos
Un diseñador que pasa un color a un desarrollador, una persona que adapta una hoja de estilos, un docente que prepara un material: el mismo color se escribe de tres maneras según la herramienta.
Comprobar una conversión
- Pegue el color en el campo: la vista previa debe corresponder a lo que espera.
- Copie la forma que pide su sistema.
- Para conservar el color exacto, guarde el HEX o el RGB en lugar del HSL.
Preguntas frecuentes
- ¿Cómo convertir de HEX a RGB?
- Pegue el color en la herramienta, que muestra las tres formas a la vez, por ejemplo #2F4A3F, rgb(47, 74, 63) y hsl(156, 22%, 24%).
- ¿Por qué una ida y vuelta por el HSL cambia el color un nivel?
- El HSL se muestra en números enteros. Conserve el HEX original como referencia.
- ¿Cómo escribir una transparencia?
- En HEX con ocho cifras, o en RGB con una barra oblicua, por ejemplo rgb(47 74 63 / 50%).
- ¿Comprueba la herramienta la legibilidad del texto?
- No, no calcula el contraste entre un texto y su fondo: compruébelo aparte.