HEX a RGB: conversor de colores

Convierte códigos de color hexadecimales en valores RGB al instante con nuestro convertidor de HEX a RGB. Una herramienta clara y moderna para diseñadores y desarrolladores.

Última actualización: 23 de septiembre de 2026

Características

• Conversión en tiempo real: escribe un código HEX y obtenga valores RGB inmediatamente

• Vista previa visual del color: vea tu color mostrado en una tarjeta de degradado con sombras dinámicas

• Integración del selector de color - Haga clic para elegir colores visualmente

• 40 colores preestablecidos - Acceso rápido a colores populares

• Copiar al portapapeles: copia con un clic para los valores HEX y RGB

• Individual RGB desglose - Ver los componentes rojo, verde y azul por separado

• Validación de entrada: maneja formatos de 3 dígitos (#RGB) y 6 dígitos (#RRGGBB)

• Diseño responsivo - Funciona perfectamente en celulares y de escritorio

Casos de uso

Perfecto para:

• Desarrolladores web que convierten especificaciones de diseño

• Diseñadores gráficos que trabajan en diferentes formatos de color.

• CSS creación de estilos y temas

• Búsqueda rápida de referencias de colores

• Aprendiendo teoría del color y composición RGB

¿Qué es un convertidor de HEX a RGB?

Un convertidor de HEX a RGB es una pequeña utilidad que toma un código de color hexadecimal y lo convierte en sus valores de canal rojo, verde y azul.

Escribe algo como #3366ff y le devolverá rgb(51, 102, 255) en una fracción de segundo.

La función diferenciadora aquí es velocidad. En lugar de resolver manualmente las matemáticas de base16 a base10, la herramienta lo hace instantáneamente, generalmente con una muestra de color en vivo que se actualiza a medida que escribe.

La mayoría de las versiones de la herramienta comparten algunas características:

• Un campo de texto para el valor hexadecimal, con o sin el signo de almohadilla inicial
• Un área de salida que muestra los números rojos, verdes y azules coincidentes.
• Una muestra de vista previa en vivo que se actualiza a medida que editas el código.
• Un botón de copia para capturar el resultado directamente.

Los desarrolladores recurren constantemente a estas herramientas cuando trasladan colores de archivos de diseño a hojas de estilo.

Hex es el formato predeterminado en la mayoría de las hojas de estilo (EN), pero rgb es a menudo lo que espera un script o una biblioteca de animación.

Si comienza con un nombre en lugar de un código, como "azul aciano", una herramienta separada creada para buscar colores con nombre funciona mejor en esa dirección.

HEX vs RGB: ¿Cuál es la diferencia entre los dos formatos de color?

Hex y rgb describen exactamente el mismo color usando dos sistemas de conteo diferentes.

Hex empaqueta el color en una cadena de seis caracteres escrita en base16. RGB explica tres números base10 separados, uno por canal.

Ambas notaciones describen el mismo punto en el espacio de color sRGB una vez que un navegador las analiza.

Hex aparece constantemente en hojas de estilo y muestras de herramientas de diseño. Los atributos de color más antiguos HTML (EN) también lo aceptaron directamente, mucho antes de que CSS asumiera ese trabajo.

Ir en la otra dirección es igualmente común. Si ya tiene un valor rgb y necesita el equivalente hexadecimal, un convertidor rgb a hexadecimal dedicado maneja ese intercambio.

¿Cómo funciona la conversión de HEX a RGB?

La conversión de hexadecimal a rgb divide un código hexadecimal de seis dígitos en tres pares de dos dígitos y convierte cada par de base16 a base10.

Veamos #3366FF como ejemplo resuelto.

Par rojo: 33 en hexadecimal equivale a 51 en decimal.

Par verde: 66 en hexadecimal es igual a 102 en decimal.

Par azul: FF en hexadecimal equivale a 255 en decimal.

Junte esos tres resultados y obtendrá rgb(51, 102, 255), el mismo color escrito de manera diferente.

Hex existe principalmente porque dos dígitos hexadecimales se asignan exactamente a un byte. Es por eso que del 00 al FF se alinea perfectamente con el 0 al 255, sin perder nada en la conversión.

Cada canal puede contener 256 valores posibles, desde 0 hasta 255 sin espacios ni redondeos.

¿Qué formatos de entrada HEX acepta el convertidor?

Un convertidor de hexadecimal a rgb normalmente acepta dos longitudes de código hexadecimal: una taquigrafía de 3 dígitos y una cadena completa de 6 dígitos.

La especificación CSS Nivel 4 del módulo de color (EN) (W3C) define la sintaxis de color hexadecimal como la aceptación de 3, 4, 6 u 8 dígitos hexadecimales, con los dígitos adicionales reservados para la transparencia alfa. Este conversor toma los dos formatos opacos, 3 y 6 dígitos.

Notación hexadecimal abreviada de 3 dígitos

Notación rápida:

• Cada dígito se duplica para expandirse a la forma completa.
• #f0c se convierte en #ff00cc
• Común escrito a mano CSS, principalmente por velocidad

No todos los colores califican para este atajo. De esta manera sólo se pueden acortar los colores en los que se repiten los dos dígitos de cada canal.

Hexadecimal completo de 6 dígitos

Hexadecimal de seis dígitos proporciona la versión completa e inequívoca de un color, sin duplicaciones ni conjeturas.

Este es el formato que la mayoría de las herramientas de diseño exportan de forma predeterminada y es lo que la mayoría de los convertidores esperan como entrada estándar.

El caso no importa aquí. #FF00CC y #ff00cc apuntan al mismo color.

RGB, RGBA, HSL: ¿Qué puede generar un convertidor de HEX a RGB?

Muchos convertidores no se limitan al simple rgb. También ofrecen RGBA, HSL y, a veces, HSV como opciones de salida. Este se centra en el valor rgb() simple más los números rojo, verde y azul separados.

Salida en RGB y RGBA

La salida rgb estándar se parece a rgb(51, 102, 255), tres números enteros separados por comas.

Agregue un cuarto valor y obtendrá RGBA, que agrega un canal alfa para transparencia: rgba(51, 102, 255, 0.5).

La compatibilidad del navegador con la taquigrafía hexadecimal de 8 dígitos que se asigna al mismo valor alfa llegó a Firefox 49 (2016) y Chrome 62 (2017), según ¿Can I Use la compatibilidad del navegador? datos (EN).

Esta salida es más importante cuando un color necesita ubicarse dentro de un gradiente (EN) y desvanecerse en los bordes en lugar de cortarse bruscamente.

Salida en HSL y HSV

• HSL divide un color en tono, saturación y luminosidad
• HSV, a veces llamado HSB, intercambia luminosidad por brillo
• Ambos son más fáciles de ajustar para el ojo humano que los números rgb sin formato

Los diseñadores suelen preferir HSL cuando quieren aclarar u oscurecer un color sin volver a calcular manualmente tres valores de canales separados.

Si su flujo de trabajo comienza en rgb y necesita avanzar hacia HSL, esa conversión separada se ejecuta con su propia fórmula, no con las matemáticas de hexadecimal a rgb que se tratan aquí.

¿Qué tan precisa es la conversión de HEX a RGB?

La conversión de hexadecimal a rgb es exacta para códigos estándar de 3 y 6 dígitos.

No hay redondeo, ya que cada par hexadecimal de dos dígitos se asigna exactamente a un número entero entre 0 y 255.

El redondeo solo aparece una vez que un convertidor también calcula HSL, HSV o un valor alfa decimal de un código de 8 dígitos, ya que implican una división que no siempre llega a un número entero. CC, por ejemplo, es 204 de 255, o 0.8 como rgba() alfa.

Cifras clave:

• 256 valores posibles por canal de color, lo que da un total de 16,777,216 combinaciones rgb
• La pantalla de referencia de sRGB utiliza una gamma nominal de 2.2, según el estándar IEC 61966-2-1 (1999).
• Los valores alfa van del 0 al 1 como decimal o del 0 % al 100 % como porcentaje
• La notación alfa hexadecimal se asigna directamente al mismo rango de 0 a 255, recién escrito en base16

La corrección gamma cambia la forma en que se representa un color en la pantalla. No toca el número que produce la propia conversión.

Esos son dos pasos separados, y mezclarlos es una fuente común de confusión para cualquiera que sea nuevo en las matemáticas del color.

¿Cuándo debería utilizar HEX frente a RGB en CSS y el trabajo de diseño?

Hex gana para valores cortos y estáticos. RGB y RGBA ganan en el momento en que la transparencia o los valores dinámicos entran en escena.

Una hoja de estilo llena de colores sólidos de marca se lee más limpiamente en hexadecimal, más corta de escribir y más rápida de escanear.

En el momento en que un elemento necesita desvanecerse, mezclarse con un fondo o animar su opacidad a través de JavaScript, RGBA se convierte en la elección más práctica, ya que mantiene el valor alfa separado del color mismo.

Valores predeterminados del sistema de diseño:

• La mayoría de las herramientas de diseño exportan muestras como hexadecimales de forma predeterminada.
• Los marcos de utilidad como Tailwind (EN) envían paletas de colores completas definidas en hexadecimal
• Las bibliotecas de componentes a menudo convierten esos valores hexadecimales en rgba internamente para estados de desplazamiento y superposiciones.

Hex tampoco se limita a las hojas de estilo. Aparece con la misma frecuencia en SVG atributos de relleno y trazo (EN), que siguen exactamente las mismas reglas de seis dígitos que CSS.

Elige hexadecimal para cualquier cosa estática que deba moverse limpiamente entre un diseñador y un desarrollador. Elige rgb o rgba en el momento en que el color necesite desvanecerse, mezclarse o responder a la interacción.

Métodos de conversión de HEX a RGB comparados: herramienta en línea, código y cálculo manual

Existen cuatro formas prácticas de convertir un código hexadecimal en valores rgb, y cada una se adapta a una situación diferente.

Cálculo manual

Realizar la conversión a mano significa que no hay ninguna dependencia del software, solo matemáticas de base16 a base10 hechas en papel o mentalmente.

Ventajas:

• Funciona en cualquier lugar, no necesita herramientas ni conexión
• Desarrolla una comprensión real de cómo funciona el modelo de color.

Contras:

• Lento para cualquier cosa más allá de un solo color.
• Fácil de hacer un deslizamiento aritmético bajo presión de tiempo

Herramientas de desarrollo del navegador

El selector de color en Chrome, Edge y Firefox DevTools se abre desde cualquier muestra de color en el panel Estilos. Al hacer clic con Mayús y hacer clic en la muestra, el valor cambia entre hexadecimal, rgb y hsl, y el cuentagotas incorporado muestra cualquier píxel de la página.

Ventajas:

• Ya instalado, no hay nada extra que descargar.
• Lee colores directamente desde una página en vivo

Contras:

• Solo funciona con colores ya aplicados a un elemento de la página.
• No diseñado para convertir grandes lotes de códigos a la vez

Para muestrear colores dentro de una aplicación web, los navegadores Chromium desde la versión 95 en adelante también exponen una EyeDropper API (EN) que devuelve el color seleccionado como una cadena hexadecimal.

Herramientas de conversión en línea

Qué ofrecen:

• Resultados instantáneos sin paso de instalación
• Una muestra de vista previa en vivo junto con los números.
• Generalmente gratuito, con botones de copia para la salida.

Necesitan una conexión a Internet para cargar y la mayoría se limita a convertir un color a la vez en lugar de una paleta completa.

Conversión basada en código

Escribir la conversión en un guión tiene sentido cuando necesitas procesar más de un puñado de colores.

La biblioteca de imágenes Pillow de Python, por ejemplo, maneja la conversión en una sola llamada: ImageColor.getrgb("#3366ff") devuelve (51, 102, 255).

Ventajas: repetible, programable, funciona dentro de un proceso de compilación más grande.

Contras: requiere conocimientos básicos de codificación y un entorno de trabajo para ejecutarlo.

¿Cómo afecta la conversión de HEX a RGB a la accesibilidad del color?

La conversión de hexadecimal a rgb es importante para la accesibilidad porque la mayoría de las fórmulas de verificación de contraste están escritas en torno a valores de canales decimales, no en cadenas hexadecimales.

WCAG Success Criterion 1.4.3 (EN) establece una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande contra su fondo.

Llegar allí generalmente significa ejecutar los valores rgb tanto del color del texto como del fondo a través de esa fórmula, ya que las matemáticas operan con números entre 0 y 255.

El texto de bajo contraste sigue siendo la falla de accesibilidad más común en la web, y se encuentra en el 81% de las páginas de inicio según el Informe WebAIM Million 2024 (EN).

Algunos hábitos evitan que los valores hexadecimales y rgb se conviertan en un problema de accesibilidad:

• Verifica la relación de contraste de color (EN) antes de bloquear un emparejamiento final, no después, con una herramienta como el verificador de contraste de color (EN)
• Pruebe tanto el código hexadecimal como su forma rgb convertida, ya que los errores tipográficos tienden a ocultarse mejor en hexadecimal.
• Mantén una paleta documentada para que los mismos valores accesibles se reutilicen en lugar de recrearse cada vez.

Los equipos que necesitan combinaciones previamente examinadas desde el principio a menudo se apoyan en un generador de paleta de colores accesible en lugar de probar los colores uno por uno después del hecho.

¿Cuándo no se aplica un convertidor de HEX a RGB?

Un conversor de hexadecimal a rgb no puede hacer nada con un color CSS con nombre como "tomate" o "rebeccapurple", ya que no hay una cadena hexadecimal para dividir y convertir.

La especificación CSS Módulo de color nivel 4 (W3C) define 148 palabras clave de color con nombre, cada una asignada a un valor rgb fijo en la especificación misma en lugar de derivarse mediante conversión.

Rebeccapurple es una de las entradas más recientes en esa lista, agregada en memoria de la hija del defensor de los estándares web Eric Meyer y no mediante ningún cálculo.

Algunas otras situaciones quedan fuera de lo que cubre la conversión:

• Colores de gama amplia o Display P3, que se encuentran fuera del espacio sRGB que asumen tanto hexadecimal como rgb
• CMYK valores destinados a impresión, que utilizan un modelo de cuatro canales completamente diferente
• Cadenas hexadecimales mal formadas con un recuento de dígitos incorrecto o caracteres no válidos, que la mayoría de los convertidores simplemente rechazan
• Archivos de diseño donde el valor ya está almacenado como rgb de forma nativa, lo que hace que un paso de conversión sea redundante

Ninguno de estos son fallos de la herramienta en sí. Son simplemente entradas para las que la herramienta nunca fue diseñada.

¿Cómo se convierte HEX a RGB manualmente, paso a paso?

La conversión manual de un código hexadecimal a rgb sigue los mismos cuatro pasos cada vez, independientemente del color.

1. Quite el símbolo # inicial, dejando seis caracteres hexadecimales (primero expanda un código de 3 dígitos duplicando cada dígito)
2. Divide esos caracteres en tres pares, uno para rojo, verde y azul
3. Convertir cada par de base16 a base10: multiplica el primer dígito por 16 y suma el segundo
4. Organiza los tres resultados como rgb(rojo, verde, azul)

Ejecutar #a94442 a través de esos pasos da a9 para rojo, 44 para verde y 42 para azul.

Convertidos, se convierten en 169 (10 × 16 + 9), 68 (4 × 16 + 4) y 66 (4 × 16 + 2), por lo que el valor final es rgb(169, 68, 66).

El desliz más común ocurre en el paso de conversión, donde la gente olvida que las letras hexadecimales de la a a la f sustituyen a los valores decimales del 10 al 15.

¿Cómo se convierte HEX a RGB en código?

JavaScript

JavaScript (EN) maneja la conversión con una función incorporada en lugar de una fórmula personalizada.

parseInt(hex.substring(1, 3), 16) extrae el par rojo de una cadena hexadecimal y lo convierte directamente a decimal.

Repetir esa llamada para los personajes del 3 al 5 y del 5 al 7 cubre el verde y el azul.

Error común: cortar desde el índice 0 mientras el # todavía está en la cadena. parseInt("#3", 16) devuelve NaN, por lo que elimina el # primero o comienza los cortes en el índice 1 como se muestra arriba.

Python

• int(hex_string[1:3], 16) refleja la misma lógica que la versión JavaScript
• El módulo Colorsys incorporado maneja conversiones entre rgb, hls y hsv una vez que ya tiene valores decimales
• Las bibliotecas de imágenes creadas sobre Pillow aplican esta misma matemática en cada píxel de un archivo.

El enfoque de Python se parece un poco más al inglés simple, ya que dividir una cadena por índice está integrado en el lenguaje mismo.

Propiedades personalizadas de CSS

Las propiedades personalizadas, comúnmente llamadas variables CSS, le permiten definir un color una vez y reutilizarlo en toda una hoja de estilo.

Hacer referencia a esa variable en todos los demás reduce la necesidad de buscar en una hoja de estilo para actualizar el color de una marca a mano.

Patrón típico:

• Defina el valor hexadecimal una vez, por ejemplo --brand-color: #3366ff
• Haz referencia a él cuando sea necesario con var(--brand-color)
• Convierta a rgba() solo cuando realmente se requiera transparencia

Esto mantiene el paso de conversión de hexadecimal a rgb aislado en los pocos lugares que realmente necesitan un formato decimal, en lugar de estar disperso por todo el archivo.

Preguntas frecuentes: HEX a RGB: conversor de colores

¿Qué significa "hex"?

"Hex" es la abreviatura de hexadecimal, un sistema de numeración base16 que utiliza dígitos del 0 al 9 y letras de la a a la f.

En los códigos de color, hexadecimal empaqueta tres valores de canal en una cadena compacta, a diferencia de los números base10 que usa rgb para los mismos datos.

¿Qué herramientas de diseño muestran valores RGB automáticamente desde hexadecimal?

Figma, Adobe Photoshop y Sketch muestran rgb junto con hexadecimal en sus paneles de color en el momento en que eliges una muestra.

Browser DevTools hace lo mismo para el color calculado de cualquier elemento, convirtiendo hexadecimal sobre la marcha sin un paso separado.

¿Qué errores comunes ocurren al convertir hexadecimal a RGB?

Leer una letra hexadecimal como un dígito simple es el desliz más frecuente. El par 7B es 7 × 16 + 11 = 123, no 7 × 16 + 1.

Expandir incorrectamente la taquigrafía de 3 dígitos es el otro error clásico: #f0c se convierte en #ff00cc, no #f0c000. Un código de 8 dígitos también necesita que su último par se trate como alfa, no como parte del canal azul.

¿Cómo se convierte RGB nuevamente a hexadecimal?

Invierta el proceso. Convierta cada uno de los tres valores del canal decimal nuevamente en un par hexadecimal de dos dígitos, rellene con ceros cualquier valor inferior a 16 y luego encadene los tres pares detrás de un signo de almohadilla.

rgb(51, 102, 255) se convierte en #3366ff usando las mismas matemáticas de base10 a base16 a la inversa, o puedes ejecutarlo a través del convertidor RGB a HEX.

¿Por qué algunas plataformas utilizan por defecto el formato hexadecimal mientras que otras utilizan RGB?

Las herramientas de diseño por defecto son hexadecimales porque son compactas y fáciles de copiar entre archivos.

Los navegadores y las API JavaScript como getComputedStyle devuelven colores como rgb, ya que ese formato se asigna directamente a los canales numéricos con los que ya funciona el motor de renderizado.

¿La conversión de Hex a RGB es consistente en todo el software y navegadores?

Sí. Todos los navegadores principales analizan hexadecimal y rgb usando las mismas reglas de CSS Módulo de color Nivel 4, por lo que #3366ff se resuelve en valores de canal idénticos en Chrome, Firefox y Safari por igual, ya que la conversión no deja lugar a la interpretación.

¿Qué debería convertir a continuación después de usar un convertidor de HEX a RGB?

Un conversor de hexadecimal a RGB finaliza su trabajo en el momento en que un código hexadecimal se convierte en tres valores de canal decimal, dejando la traducción del espacio de color, la verificación del contraste y los formatos listos para imprimir como las siguientes tareas en un flujo de trabajo de color típico.

Esos pasos funcionan mejor en un orden fijo, ya que cada uno puede deshacer el resultado del anterior.

• HSL ajuste primero, mientras los colores todavía están cambiando (el RGB a HSL convertidor toma los valores de aquí)
• Verifica el contraste en segundo lugar, una vez que las sombras estén colocadas.
• CMYK última conversión, solo para recursos encuadernados en formato impreso

Ajustar la luminosidad después de la verificación del contraste puede hacer que un par que pasa vuelva a estar por debajo de 4.5:1, así que vuelva a verificar cualquier color que ajuste.

Almacenar colores como hexadecimal y convertirlos a rgb solo cuando un script necesita los números mantiene las hojas de estilo compactas sin costar nada en el momento del renderizado.

Los equipos de impresión suelen llevar las mismas matemáticas un paso más allá, convirtiendo esos mismos números rgb en CMYK valores para impresión offset o digital. El desglose de RGB frente a CMYK (EN) explica por qué los dos rara vez coinciden exactamente.