Cómo convertir códigos de color HEX a RGB

HEX y RGB son dos formas de escribir exactamente los mismos colores. Diseñadores y desarrolladores cambian entre ellos constantemente: HEX en hojas de estilo CSS, RGB en animaciones JavaScript, HSL en herramientas de diseño. Entender cómo se relacionan hace que trabajar con colores sea mucho más fácil. Un convertidor maneja la aritmética mental para que puedas concentrarte en obtener el color correcto, no en la división en base 16.

Cómo funcionan los colores HEX

Un código de color HEX como #FF5733 es un número hexadecimal de 6 dígitos que representa los canales rojo, verde y azul:

Cada canal varía de 00 (0, sin color) a FF (255, intensidad completa). Entonces #FF5733 significa rojo completo, algo de verde, un poco de azul, lo que te da un naranja-rojo cálido.

Cómo convertir HEX a RGB

1. Introduce tu código HEX: escribe o pega un código de color como #FF5733 o usa el selector de color.
2. Ver los valores RGB: ve los valores equivalentes de rojo, verde y azul (0-255 cada uno).
3. Copia en cualquier formato: toma los valores como rgb(255, 87, 51), canales individuales u otros formatos como HSL.

Una breve historia de los códigos de color en la Web

El color en los primeros navegadores web (Mosaic 1993, Netscape 1994) usaba solo colores nombrados: red, blue, green. La especificación HTML 3.2 (1997) introdujo códigos de color hexadecimales a través del atributo BGCOLOR, y CSS 1 (1996) los hizo universales. La elección de HEX sobre decimal era práctica: un código HEX de 6 caracteres es más corto que rgb(255, 87, 51) y más fácil de copiar y pegar desde un selector de color.

El modelo de color RGB en sí es mucho más antiguo. James Clerk Maxwell demostró en 1861 que cualquier color visible al ojo humano se puede crear mezclando luz roja, verde y azul. La televisión (década de 1930) y los monitores de computadora (década de 1970) usaron este principio directamente: cada píxel son tres subpíxeles (uno rojo, uno verde, uno azul) en diferentes brillos.

El CSS moderno (a partir de 2010) agregó muchos más formatos de color: hsl() (tono, saturación, luminosidad), hwb() (tono, blancura, negrura), lab() (perceptualmente uniforme), lch(), oklab(), oklch(), y color() para espacios de color arbitrarios. Todos representan los mismos colores que HEX/RGB pero con diferentes modelos mentales. HEX persiste porque es denso, copiable y fácil de compartir.

Conversión manual: cómo hacerlo en tu cabeza

No necesitas una herramienta para convertir valores HEX simples. El truco es conocer las potencias de 16:

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10 (hex) = 16
• FF (hex) = 255

Para un par HEX como 5A: el primer dígito por 16 más el segundo dígito. 5A = 5 × 16 + 10 = 90.

Para atajos:

• 00 = 0
• 33 = 51 (un paso de gris común del 20%)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

Los pares 33, 66, 99, CC (en cualquier combinación) producen la clásica paleta «segura para web» de 216 colores de la década de 1990. Aparecen constantemente en los moodboards de diseñadores incluso hoy.

Códigos de color comunes

HEX con alfa (HEX de 8 dígitos)

CSS 4 (2017) introdujo HEX de 8 dígitos con un canal alfa. #FF5733CC es rgb(255, 87, 51) con 80% de opacidad (CC en hex = 204, dividido por 255 = 0.80).

El soporte del navegador es universal en los navegadores modernos (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+). Para proyectos nuevos, HEX de 8 dígitos es una alternativa limpia a rgba(). Para proyectos más antiguos, quédate con rgba() para compatibilidad hacia atrás.

También existe un HEX corto de 4 dígitos: #F80C es lo mismo que #FF8800CC. Mismas reglas de atajo que el HEX de 3 dígitos.

Casos de uso para cada formato

Usa HEX cuando:

• Escribir valores de color CSS en hojas de estilo
• Compartir un solo color con diseñadores o en documentación
• Almacenar colores compactamente en archivos JSON o de datos
• Trabajar con paletas de marca (las empresas suelen especificar los colores de marca como HEX)

Usa RGB cuando:

• Animar colores en JavaScript (analizar los canales como números, interpolar, volver a formatear)
• Calcular ratios de contraste de color (las fórmulas WCAG operan en RGB)
• Necesitar transparencia parcial con rgba() para navegadores más antiguos
• Leer color de canvas o datos de imagen (la API de Canvas devuelve RGB)

Usa HSL cuando:

• Generar una paleta de tonos (mantener saturación y luminosidad, variar el tono)
• Crear variantes de modo oscuro (mantener el tono, aumentar la luminosidad)
• Hacer trabajo de teoría del color (los colores complementarios están a 180° de distancia en tono)

Usa OKLCH cuando:

• Te importa la uniformidad perceptual (interpolar en OKLCH evita el «medio fangoso» que obtienes en RGB)
• Construir un sistema de colores desde cero en proyectos de 2024+

Errores comunes

• Olvidar el prefijo #: CSS requiere el hash. color: FF5733 es inválido; color: #FF5733 es correcto.
• Mezclar mayúsculas y minúsculas: #FF5733 y #ff5733 son el mismo color pero inconsistentes estilísticamente. Elige uno (la mayoría del código prefiere minúsculas para HEX) y atente a él.
• Confundir HEX con hexadecimal en general: los códigos de color hex son siempre de 3, 4, 6 u 8 dígitos. Otras longitudes (5, 7) son inválidas. Los programas pueden truncar o rellenar silenciosamente.
• Orden de bytes incorrecto en HEX de 8 dígitos: algunas bibliotecas usan ARGB (#CCFF5733, alfa primero) en lugar de RGBA (#FF5733CC, alfa al final). CSS usa RGBA. Adobe y algunas APIs de Android usan ARGB.
• Asumir que RGB es sRGB: la mayoría de los colores HEX/RGB están en el espacio de color sRGB. Las pantallas P3 (dispositivos Apple desde 2016) pueden mostrar colores más amplios, pero el HEX estándar no puede describirlos. Usa color(display-p3 ...) para esos.
• Redondeo de color al convertir ida y vuelta: HEX a RGB a HEX es sin pérdida. HEX a HSL a HEX puede perder 1-2 niveles de precisión debido a matemáticas de punto flotante.

Consejos

• Usa HEX en CSS: color: #FF5733 es más limpio y más común que color: rgb(255, 87, 51) en hojas de estilo.
• Usa RGB para transparencia: cuando necesites colores semitransparentes, usa rgba(255, 87, 51, 0.5). No hay forma de agregar alfa en HEX estándar (aunque HEX de 8 dígitos existe, el soporte del navegador varía).
• Atajo de 3 dígitos: #F00 es lo mismo que #FF0000. Úsalo cuando cada par tenga dígitos idénticos para ahorrar espacio.
• El selector de color es más rápido: si estás tratando de encontrar el color correcto, usa el selector de color visual en lugar de adivinar valores HEX. Copia el código una vez que estés satisfecho con el resultado.
• Guarda los colores de marca como propiedades personalizadas CSS: --brand-primary: #FF5733 te permite cambiar el valor una vez y actualizar en todas partes. Más fácil que buscar y reemplazar códigos HEX en los archivos.
• Verifica el contraste después de elegir: un color hermoso es inútil si el texto sobre él es ilegible. Combina este convertidor con un verificador de contraste para verificar ratios WCAG AA (4.5:1) o AAA (7:1).

Privacidad

El convertidor HEX a RGB se ejecuta completamente en tu navegador. Los colores que introduces, tus paletas personalizadas y cualquier valor guardado permanecen en tu dispositivo. Esto importa menos que para las herramientas de conversión de archivos (un código de color no es personalmente sensible), pero importa por razones de confidencialidad de diseño: los colores con los que estás experimentando pueden revelar direcciones de marca no anunciadas, trabajo de cliente bajo NDA o temática de producto en desarrollo. La computación solo en navegador tiene cero exposición.