Convertidor HEX / RGB / HSL
Convierte códigos de color al instante entre todos los formatos que diseñadores y desarrolladores usan de verdad.
#6366F1
rgb(99, 102, 241)
Formatos de Color
Color Complementario
Hex y RGB son el mismo color con ropa distinta. `#FF5733` y `rgb(255, 87, 51)` describen un píxel idéntico: uno escrito en base 16 por compacidad, el otro en decimal por legibilidad. Entender que son notaciones y no formatos es lo que hace que el color en CSS encaje. Este conversor pasa entre hex, RGB y HSL al instante, y el tercero es donde se vuelve genuinamente útil: HSL separa un color en tono, saturación y luminosidad, lo que significa que puedes construir una paleta coherente ajustando un número en vez de adivinar códigos hex hasta que algo quede bien.
Cómo funciona el conversor
Introduce un color en cualquier notación admitida —hex con o sin almohadilla, valores RGB o HSL— y el conversor produce los demás de inmediato junto con una vista previa en vivo. De hex a RGB es una conversión de base: cada pareja de dígitos hexadecimales se convierte en un valor decimal de 0 a 255. HSL requiere más trabajo, ya que sitúa el color en un espacio cilíndrico donde el tono es un ángulo en una rueda, razón por la que resulta mucho más intuitivo de ajustar a mano.
Las conversiones
Hex → RGB
R = parseInt(hex.slice(0,2), 16)
G = parseInt(hex.slice(2,4), 16)
B = parseInt(hex.slice(4,6), 16)
RGB → Hex
hex = '#' + cada valor.toString(16).padStart(2,'0')
Ejemplo:
#FF5733 → FF = 255, 57 = 87, 33 = 51
→ rgb(255, 87, 51)Cada pareja hex cubre de 00 a FF, es decir de 0 a 255 en decimal: 256 valores posibles por canal, y 256³ ≈ 16,7 millones de colores en total. De ahí sale lo de «16,7 millones de colores» en las especificaciones de pantallas. El atajo de tres dígitos `#F53` se expande duplicando cada dígito hasta `#FF5533`, por lo que solo puede expresar 4.096 colores y por lo que falla con la mayoría de los valores reales de paleta. El hex en mayúsculas y minúsculas es idéntico; la elección es puramente estilística.
Lo que conviene saber sobre notación de color
- 1HSL es la notación a la que recurrir cuando diseñas en lugar de copiar. El tono es un ángulo de 0 a 360 en la rueda de color, así que un color complementario es simplemente el tono más 180. Construir una paleta en HSL significa cambiar un número; construirla en hex significa adivinar. Los navegadores aceptan HSL directamente en CSS, así que no hace falta ningún paso de conversión.
- 2Usa hex de 8 dígitos para transparencia. `#FF5733CC` añade un canal alfa donde CC es aproximadamente un 80% de opacidad. Está soportado en todos los navegadores modernos y suele ser más limpio que cambiar a notación `rgba()` a mitad de una hoja de estilos.
- 3El hex no es perceptualmente uniforme, y por eso las paletas construidas empujando valores hex quedan inconsistentes. `#808080` no es perceptualmente la mitad de brillante que `#FFFFFF`: la visión humana responde a la luz de forma no lineal. Por eso dos colores con la misma «distancia» hex pueden verse radicalmente distintos en contraste.
- 4Comprueba siempre el contraste, no solo la estética. WCAG exige una ratio de 4,5:1 entre texto y fondo para texto normal. El gris claro sobre blanco es un fallo de accesibilidad recurrente que pasa la inspección visual y falla con usuarios reales, sobre todo en pantallas de menor calidad o a plena luz.
- 5El CSS moderno admite espacios de color más allá de RGB. `oklch()` es perceptualmente uniforme, es decir, cambios numéricos iguales producen cambios percibidos iguales, lo que hace posible por primera vez generar un conjunto de tonos que de verdad parezcan equiespaciados. El soporte de navegadores ya es lo bastante amplio para usarlo en producción.
Preguntas frecuentes
¿Cuál es la diferencia entre hex y RGB?
Ninguna en cuanto al color producido: son dos notaciones para los mismos valores. Hex escribe cada canal como dos dígitos en base 16, RGB los escribe como números decimales de 0 a 255. `#FF5733` y `rgb(255, 87, 51)` se renderizan igual. Hex es más compacto y domina las herramientas de diseño; RGB es más fácil de manipular por código, ya que los valores son números desde el principio.
¿Qué significa el atajo hex de tres dígitos?
Se expande duplicando cada dígito: `#F53` pasa a `#FF5533`. Eso lo hace un atajo cómodo para un pequeño conjunto de colores, pero solo puede expresar 4.096 combinaciones en lugar de 16,7 millones, así que la mayoría de los colores reales de paleta no tienen forma de tres dígitos. Va bien para prototipos rápidos y no sirve para una paleta diseñada.
¿Cómo añado transparencia a un color hex?
Añade dos dígitos más para el canal alfa: `#FF5733CC`, donde CC es cerca de un 80% de opacidad. El alfa va de 00 (totalmente transparente) a FF (totalmente opaco). Todos los navegadores modernos lo admiten. La alternativa es `rgba(255, 87, 51, 0.8)`, más legible pero exige cambiar de notación a mitad de la hoja de estilos.
¿Por qué debería usar HSL en lugar de hex?
Porque HSL está diseñado para que lo ajusten personas. El tono es una posición en la rueda de color, la saturación es intensidad y la luminosidad es brillo, así que oscurecer un color significa bajar un número en lugar de recalcular tres. Generar una paleta coherente, encontrar complementarios o producir un conjunto de matices pasan a ser operaciones directas en lugar de prueba y error.
¿Por qué mis colores se ven distintos en otras pantallas?
Porque el mismo valor hex se interpreta de forma distinta en cada pantalla. Los monitores varían en gama de color, calibración y perfil por defecto, así que `#FF5733` en un portátil sin calibrar genuinamente no es el color que es en un monitor calibrado. Por eso el trabajo de imprenta usa CMYK con perfiles de color, y por eso las guías de marca especifican colores en varios sistemas en lugar de fiarse de un solo código hex.