RGB frente a HEX: notación, casos de uso y conversión de colores
RGB y HEX no son dos clases de color, sino dos escrituras del mismo conjunto de valores sRGB: rgb(66, 135, 245) y #4287F5 describen exactamente el mismo color. Si son intercambiables, ¿por qué conviven en CSS? Porque sirven a acciones distintas: uno está hecho para calcular y otro para leer.
| Dimensión | Colores RGB | Colores HEX |
|---|---|---|
| Notación | Funcional: rgb(66, 135, 245); canales a simple vista, la sintaxis moderna admite espacios y porcentajes | Cadena hex: #4287F5; seis dígitos en pares para R/G/B, compacto y uniforme |
| Esencia y conversión | Decimal 0-255; al pasar cada canal a base 16 se obtiene el HEX (66→42, 135→87, 245→F5) | Cada par hex vuelve a decimal: la conversión es siempre sin pérdida |
| Transparencia alfa | rgba(66,135,245,0.5): el cuarto parámetro decimal entre 0 y 1 resulta intuitivo | #4287F5AA con ocho dígitos, donde AA codifica la opacidad en hex (~67%): más corto pero exige cálculo mental |
| Enfoque de legibilidad | Los números revelan la mezcla: cuánto rojo o azul domina; ideal para explicar y ajustar | Se lee como un código fácil de copiar entre maquetas, variables y documentos, aunque no revela la mezcla |
| Abreviatura | Sin forma abreviada; los dígitos repetidos deben escribirse completos | Admite abreviatura de tres dígitos: #FFF equivale a #FFFFFF, útil en blancos, negros y grises |
| Cálculo programático | Mezclas dinámicas, brillo e interpolaciones operan sobre enteros sin analizar cadenas | Exige parsear los segmentos con parseInt antes de operar: un paso extra propenso a errores |
| Costumbres del ecosistema | La API Canvas, las librerías de gráficas y los tokens de diseño suelen usar arreglos RGB | Photoshop y Figma copian HEX por defecto; las variables CSS y los manuales de marca también lo prefieren |
¿Cuándo elegir Colores RGB?
Usa rgba() cuando el código calcule colores: animaciones de opacidad, escalas temáticas o mezcla de tonos de marca. La forma numérica hace depurable cada paso y encaja con los tokens de diseño.
¿Cuándo elegir Colores HEX?
Para fijar colores estáticos en hojas de estilo prefiere HEX: corto, buscable y estable al pegar entre herramientas. Al tomar color de una maqueta o definir variables CSS, HEX es el denominador común.
Herramientas relacionadas
Conversor de Texto a Hexadecimal en Línea
Convierta cualquier texto (incluido chino y emoji) a secuencias de bytes hexadecimales UTF-8 y viceversa. Bytes de dos dígitos con ceros separados por espacios, análisis tolerante, procesamiento local.
Selector de Color de Imagen — HEX y RGB con un Clic
Abre una imagen y obtén el código de color HEX o RGB de cualquier píxel, con coordenadas y copia en un clic.
Selector y Conversor de Colores
Color converter across HEX, RGB and HSL with a picker — everyday tool for frontend colors and design matching.
Preguntas frecuentes
¿Cómo convierto el AA de #RRGGBBAA a porcentaje?
Lee AA como número hex, pásalo a decimal y divide entre 255. Ejemplo: 80 → 128/255 ≈ 50%; FF es opaco y 00 totalmente transparente.
¿Rinden distinto HEX, RGB y HSL?
El navegador los normaliza internamente; el rendimiento es prácticamente igual. Elige por legibilidad y flujo de trabajo, no por un coste despreciable.
¿Por qué un mismo color se ve distinto en cada pantalla?
RGB/HEX definen números; lo que ves depende del panel, la cobertura de gama (sRGB/P3) y la calibración. La fidelidad exige gestión del color, no otra notación.
Para saber más
Un truco poco conocido pero útil: divide los seis dígitos hex en tres pares y pasa cada uno a decimal para resolver casi toda conversión de memoria. Antes de comparar dos colores, uniforma su formato: es el hábito más seguro. El frontend usa también una tercera notación, HSL, que describe tono, saturación y luminosidad y resulta más intuitiva que RGB para afinar. Nuestro sitio ofrece conversión bidireccional RGB/HEX local, perfecta para procesar paletas al elaborar especificaciones.