Cómo convertir HEX a RGB (y al revés)
HEX y RGB son dos formas de escribir el mismo color: #FF5733 y rgb(255, 87, 51) son idénticos, solo cambia la notación. El HEX domina en CSS y diseño web; el RGB es el estándar en software de diseño, presentaciones y programación de gráficos.
Saber convertir entre ambos te evita depender de herramientas cada vez que copias un color de un sitio a otro, y entender la matemática te ayuda a manipular colores con criterio (aclarar, oscurecer, crear variantes). En esta guía aprenderás el cálculo en ambas direcciones con ejemplos resueltos. Y para las conversiones del día a día, la herramienta gratuita de paletas de Tótem (usatotem.com/herramientas-diseno/paleta-colores/) te ayuda además a construir combinaciones armoniosas con tus colores.
Qué significan HEX y RGB
RGB describe un color por sus componentes de rojo (Red), verde (Green) y azul (Blue), cada uno de 0 a 255. rgb(255, 87, 51) significa rojo al máximo, verde al 34 % y azul al 20 %: un naranja rojizo.
HEX es la misma información en hexadecimal: 6 dígitos (o 3 en forma abreviada) donde cada par representa un canal. #FF5733 se lee como FF (rojo) + 57 (verde) + 33 (azul).
El hexadecimal usa 16 símbolos: 0-9 y A-F (A=10, B=11, C=12, D=13, E=14, F=15). Cada par de dígitos puede representar de 00 (0) a FF (255): exactamente el mismo rango que RGB.
La forma abreviada de 3 dígitos duplica cada uno: #F53 equivale a #FF5533. Solo funciona cuando los pares tienen dígitos repetidos; #FF5733 no tiene abreviatura.
Paso 1: Convertir HEX a RGB (con ejemplo)
Paso 1: separa el HEX en tres pares. #FF5733 → FF | 57 | 33.
Paso 2: convierte cada par de hexadecimal a decimal. La fórmula: primer dígito × 16 + segundo dígito (con A=10 ... F=15).
Paso 3: calcula. FF = 15×16 + 15 = 240 + 15 = 255. 57 = 5×16 + 7 = 80 + 7 = 87. 33 = 3×16 + 3 = 48 + 3 = 51.
Paso 4: escribe el resultado: #FF5733 = rgb(255, 87, 51).
Ejemplo 2: #1B4DFF → 1B | 4D | FF. 1B = 1×16 + 11 = 27. 4D = 4×16 + 13 = 77. FF = 255. Resultado: rgb(27, 77, 255), un azul intenso.
Con la práctica, los valores comunes salen de memoria: 00=0, 33=51, 66=102, 80=128 (la mitad), 99=153, CC=204, FF=255.
Paso 2: Convertir RGB a HEX (con ejemplo)
Paso 1: toma cada canal (0-255) y divídelo entre 16. El cociente entero es el primer dígito hexadecimal; el resto, el segundo (convirtiendo 10-15 a A-F).
Paso 2: ejemplo con rgb(255, 87, 51). Rojo 255: 255 ÷ 16 = 15 resto 15 → F y F → «FF». Verde 87: 87 ÷ 16 = 5 resto 7 → «57». Azul 51: 51 ÷ 16 = 3 resto 3 → «33».
Paso 3: une los pares con # delante: #FF5733. Hemos vuelto al punto de partida, lo que confirma el cálculo.
Ejemplo 2: rgb(27, 77, 255) → 27 ÷ 16 = 1 resto 11 → «1B»; 77 ÷ 16 = 4 resto 13 → «4D»; 255 → «FF». Resultado: #1B4DFF.
Truco: en CSS moderno puedes escribir rgb() directamente sin convertir, pero el HEX sigue siendo más compacto y es el formato que esperan la mayoría de herramientas de diseño.
Paso 3: El canal alfa (transparencia)
Tanto HEX como RGB admiten transparencia. En RGB se añade un cuarto valor de 0 a 1: rgba(255, 87, 51, 0,5) es el naranja al 50 % de opacidad.
En HEX se añaden dos dígitos al final: #FF573380, donde 80 hexadecimal = 128 decimal ≈ 50 % de 255. La escala va de 00 (transparente) a FF (opaco).
Valores de alfa comunes en HEX: 25 % = 40, 50 % = 80, 75 % = BF. Memorizar estos tres cubre la mayoría de los casos.
En CSS, la sintaxis moderna permite escribir rgb(255 87 51 / 50 %) con espacios y porcentaje, más legible que el formato clásico con comas.
Ojo: la transparencia se combina con el fondo que haya detrás. Un #FF573380 sobre blanco se ve más claro que sobre negro: si necesitas un color sólido exacto, calcula el resultado o evita el alfa.
Manipular colores con las conversiones
Aclarar un color: aumenta los tres canales RGB en la misma cantidad. rgb(255, 87, 51) aclarado +40 → rgb(255, 127, 91) (topando en 255). En HEX es más difícil de calcular mentalmente: convierte, ajusta y vuelve a convertir.
Oscurecer: reduce los tres canales. rgb(27, 77, 255) oscurecido −20 → rgb(7, 57, 235): un azul más profundo para estados hover de botones.
Crear variantes de una paleta: a partir de tu color principal, genera una versión clara (+60 en cada canal) para fondos y una oscura (−40) para texto o bordes. Así tu paleta crece de forma coherente en lugar de añadir colores arbitrarios.
Mezclar dos colores: promedia cada canal. La mezcla al 50 % de rgb(255, 0, 0) y rgb(0, 0, 255) es rgb(127, 0, 127): un morado. Es la base de los degradados suaves.
Para el trabajo diario, la herramienta gratuita de paletas de Tótem genera estas variantes y armonías automáticamente a partir de tu color base, sin cálculos manuales.
Herramientas gratuitas mencionadas
Generador de paletas
Elige un color base y genera paletas armónicas: análoga, complementaria, triádica y más.
Usar gratisHEX a RGB
Convierte cualquier color hexadecimal a sus valores RGB al instante.
Usar gratisRGB a HEX
Convierte valores RGB (0–255) a código hexadecimal listo para tu CSS.
Usar gratisPreguntas frecuentes
¿#FF5733 y rgb(255, 87, 51) son el mismo color?
Sí, exactamente el mismo. HEX y RGB son dos notaciones del mismo valor: cada par hexadecimal equivale a un canal decimal (FF=255, 57=87, 33=51). Puedes usar uno u otro según lo que pida cada herramienta.
¿Qué significa la versión corta de 3 dígitos en HEX?
Que cada dígito se duplica: #F53 equivale a #FF5533. Solo existe cuando los pares tienen dígitos repetidos. Es una abreviatura de escritura, no un color distinto.
¿Cómo se escribe transparencia en HEX?
Añadiendo dos dígitos al final: #RRGGBBAA, de 00 (transparente) a FF (opaco). Por ejemplo, #FF573380 es el naranja al 50 % de opacidad (80 en hexadecimal = 128, la mitad de 255).
¿Cuándo uso HEX y cuándo RGB?
HEX en CSS y herramientas web por ser compacto; RGB (o RGBA) cuando necesitas transparencia legible o manipular canales por separado en código. En diseño, usa el formato que pida tu programa: el color resultante es idéntico.
En resumen
Convertir entre HEX y RGB es una habilidad de 5 minutos que usarás durante años: separar en pares, multiplicar por 16 en una dirección y dividir entre 16 en la otra. Con eso y los valores memorizados (00, 80, FF) resuelves el 90 % de las conversiones mentalmente.
Para el 10 % restante y para construir paletas completas a partir de tus colores, la herramienta gratuita de paletas de Tótem hace el trabajo pesado. Lo importante es que ahora entiendes qué hay detrás de cada código de color que copias.