Conversor de colores — HEX, RGB y HSL
Convierte colores entre los tres formatos que todo diseñador y desarrollador utiliza: HEX (#3B82F6), RGB (rgb(59, 130, 246)) y HSL (hsl(217, 91%, 60%)). Pega un código hex para ver sus equivalentes en RGB y HSL, o cambia de modo para construir un código hex a partir de valores RGB.
Cómo funciona este cálculo
Un color HEX agrupa tres canales —rojo, verde, azul— en una cadena hexadecimal (base 16) de 6 dígitos, dos dígitos por canal, cada uno entre 00 y FF (0–255 en decimal). Una forma abreviada de 3 dígitos como #FFF duplica cada dígito, así que #FFF equivale a #FFFFFF.
El RGB escribe los mismos tres canales como números decimales sencillos de 0 a 255, por lo que rgb(59, 130, 246) y #3B82F6 describen exactamente el mismo color: 59 = 0x3B, 130 = 0x82, 246 = 0xF6.
El HSL describe el mismo color de otra manera: el Tono (Hue) es la posición en una rueda de color de 0–360° (0 = rojo, 120 = verde, 240 = azul), la Saturación indica cuán vivo es el color (0 % = gris, 100 % = totalmente saturado) y la Luminosidad indica cuán cerca está del negro o del blanco (0 % = negro, 100 % = blanco). Se calcula a partir de los valores RGB hallando el canal máximo y mínimo y su diferencia.
Ejemplo resuelto
HEX vs RGB vs HSL — cuándo usar cada uno
| Formato | Ejemplo | Ideal para |
|---|---|---|
| HEX | #3B82F6 | Herramientas de diseño, guías de color de marca, copiar y pegar rápido en CSS |
| RGB | rgb(59, 130, 246) | Cuando necesitas valores de canal explícitos u opacidad con rgba() |
| HSL | hsl(217, 91%, 60%) | Crear paletas de color — ajustar luminosidad/saturación manteniendo el tono |
Cómo se corresponden los dígitos hex con los canales
- #RRGGBB — RR es el rojo (00–FF), GG es el verde (00–FF), BB es el azul (00–FF)
- Cada par es un número en base 16: FF = 15×16 + 15 = 255, 80 = 8×16 + 0 = 128, 00 = 0
- #000000 es negro, #FFFFFF es blanco, #FF0000 es rojo puro
- La forma abreviada de 3 dígitos duplica cada dígito: #ABC → #AABBCC
Leer un valor HSL de un vistazo
hsl(217, 91%, 60%) revela tres cosas al instante: 217° es un tono azul (los azules se sitúan entre 210–250°), una saturación del 91 % indica que es vivo en lugar de apagado, y una luminosidad del 60 % indica que está cómodamente entre el negro y el blanco — un azul brillante y claro.
Esto hace que HSL sea práctico para generar paletas coherentes: mantén el tono fijo en 217 y varía la luminosidad del 20 % (un azul marino casi negro) al 90 % (un azul cielo pálido) para obtener una gama de tonos a juego dentro de la misma familia de color.
Colores de referencia habituales
| Nombre | HEX | RGB |
|---|---|---|
| Negro | #000000 | rgb(0, 0, 0) |
| Blanco | #FFFFFF | rgb(255, 255, 255) |
| Rojo | #FF0000 | rgb(255, 0, 0) |
| Verde | #00FF00 | rgb(0, 255, 0) |
| Azul | #0000FF | rgb(0, 0, 255) |