HEX a RGB: La Guía Completa de Conversión

Cada color que ves en una pantalla es en última instancia tres números: rojo, verde y azul. La pregunta es solo cómo se escriben esos números. La notación HEX los empaqueta en una cadena de seis caracteres familiar para diseñadores y desarrolladores. La notación RGB los desempaqueta en tres valores explícitos usados en funciones CSS, tokens de diseño y pipelines de datos.

Esta guía cubre el panorama completo: la matemática detrás de la codificación hexadecimal, el modelo RGB, una conversión manual paso a paso y las reglas prácticas para elegir entre HEX y RGB en flujos de trabajo reales de CSS y diseño.

Cómo funciona la codificación hexadecimal

El hexadecimal es un sistema numérico en base 16 que usa dígitos 0–9 y letras A–F, donde A=10, B=11, C=12, D=13, E=14, F=15. Un par de dos caracteres hex puede representar valores del 00 (0 en decimal) al FF (255 en decimal). Este es exactamente el rango necesario para un solo canal de color. Un código HEX de seis caracteres como #3A7BD5 son tres pares: 3A (rojo), 7B (verde), D5 (azul). El prefijo # es una convención CSS. Los códigos abreviados como #FFF se expanden a #FFFFFF — cada dígito se duplica.

El modelo de color RGB

RGB significa Rojo, Verde, Azul — los tres canales primarios de mezcla de color aditivo que usa cada pantalla digital. Cada canal va de 0 (ninguno) a 255 (máximo). rgb(0, 0, 0) es negro puro; rgb(255, 255, 255) es blanco puro. El modelo es aditivo: mezclar rojo y verde máximos produce amarillo (rgb(255, 255, 0)). Esto es opuesto a la mezcla sustractiva usada en pintura o impresión. CSS también acepta la sintaxis moderna sin comas: color: rgb(58 123 213).

Conversión manual paso a paso

Para convertir #3A7BD5 a RGB: divide en pares 3A, 7B, D5. Convierte cada par de hex a decimal. Para 3A: 3 × 16 + 10 = 58. Para 7B: 7 × 16 + 11 = 123. Para D5: 13 × 16 + 5 = 213. Resultado: rgb(58, 123, 213). Para la operación inversa, divide cada valor decimal entre 16, toma el cociente como primer dígito hex y el resto como segundo.

#3A7BD5

R = 3A → 3×16 + 10 = 58
G = 7B → 7×16 + 11 = 123
B = D5 → 13×16 + 5 = 213

Resultado: rgb(58, 123, 213)

HEX vs RGB en CSS: cuándo usar cada uno

HEX es compacto y universalmente compatible. Úsalo para valores de color estáticos en CSS, sistemas de diseño y donde importa la brevedad. RGB es preferible cuando necesitas manipular el color en JavaScript o con calc() en CSS. Las propiedades personalizadas de CSS funcionan igualmente bien con ambos: --brand: #3A7BD5 o --brand: rgb(58 123 213).

Canal alfa: HEX8 vs rgba()

La transparencia se añade de manera diferente en cada formato. En HEX, agrega dos dígitos hex más para el alfa: #3A7BD5FF es completamente opaco, #3A7BD580 es 50% transparente. En CSS, rgba() ha sido el enfoque tradicional: rgba(58, 123, 213, 0.5). El CSS moderno también permite que rgb() acepte un alfa opcional: rgb(58 123 213 / 0.5). HEX8 es compatible con todos los navegadores modernos pero puede ser menos legible.

Casos de uso prácticos

Los tokens de diseño típicamente almacenan colores en HEX para portabilidad entre herramientas (Figma, Storybook, Style Dictionary). Las variables CSS pueden contener cualquier formato. Cuando se pasan colores a la Canvas API o shaders WebGL, se necesitan valores RGB — la cadena HEX debe analizarse primero con parseInt("3A", 16). Para animaciones CSS con color-mix() o transiciones @property, el formato rgb() o hsl() da a los navegadores mayor flexibilidad de interpolación.

Preguntas Frecuentes