Guide
Hex a RGBA: cómo añadir transparencia
#FF6B35 no tiene ningún concepto de transparencia. rgba(255, 107, 53, 0.5) sí — la conversión es solo separar de vuelta los dígitos hex en canales.
By Buğra SözeriPublished
Un color hex estándar de 6 dígitos como #FF6B35 codifica rojo, verde y azul — nada más. No hay lugar para la transparencia en ese formato. Para hacer un color parcialmente translúcido en CSS, necesitas la función rgba(), que añade un cuarto canal alfa como decimal de 0 a 1, o la sintaxis hex de 8 dígitos más nueva (#RRGGBBAA), que añade dos dígitos hex más con el mismo propósito. Convertir entre hex y RGBA es la misma matemática de división de canales que una conversión simple de hex a RGB, más un número extra.
Dividiendo los dígitos hex en canales RGB
Un color hex de 6 dígitos son tres pares de bytes hex de 2 dígitos seguidos: FF (rojo), 6B (verde), 35 (azul). Cada par es un número en base 16 de 00 a FF, que representa 0-255 en decimal. FF = 255, 6B = 107, 35 = 53 — dando rgb(255, 107, 53). Añade un valor alfa entre 0 y 1 como cuarto argumento y tienes rgba(255, 107, 53, 1) para totalmente opaco, o cualquier fracción menor a 1 para transparencia parcial.
Valores de opacidad comunes, en ambos sentidos
| Opacidad | Alfa de rgba() | Sufijo hex de 8 dígitos |
|---|---|---|
| 100% | 1 | FF |
| 90% | 0,9 | E6 |
| 75% | 0,75 | BF |
| 50% | 0,5 | 80 |
| 25% | 0,25 | 40 |
| 10% | 0,1 | 1A |
| 0% | 0 | 00 |
El sufijo hex viene de multiplicar la fracción de opacidad por 255 y convertir a hex — 50% es 0,5 × 255 = 127,5, que redondea a 128 (decimal) o 80 (hex). Tanto la función rgba() como la sintaxis hex de 8 dígitos son compatibles en todos los navegadores principales desde 2017, según el W3C CSS Color Module, así que la elección entre ambas es puramente estilística.
Por qué esto importa más allá de CSS
La misma matemática se aplica en cualquier lugar donde una herramienta de diseño o una API pida un color consciente de alfa — el fill-opacity de SVG, las cadenas fillStyle de canvas, o un token de sistema de diseño que almacena colores de superposición translúcidos. Si partes de un color hex de marca y necesitas una variante de superposición semitransparente (un patrón común para estados de hover o fondos de modal), convierte el hex base a RGB con un conversor de hex a RGB, y luego reármalo como rgba() con el alfa que pida el diseño — sin necesidad de calcular a mano los pares de bytes cada vez.
Frequently asked questions
- ¿Cómo convierto un color hex a RGBA?
- Divide el hex en sus pares de bytes de rojo, verde y azul y convierte cada uno a decimal (0-255), igual que una conversión simple de hex a RGB, y luego añade un cuarto valor alfa entre 0 (totalmente transparente) y 1 (totalmente opaco): rgba(R, G, B, A). Por ejemplo, #FF6B35 al 50% de opacidad es rgba(255, 107, 53, 0.5).
- ¿Cuál es la diferencia entre rgba() y un color hex de 8 dígitos?
- Representan la misma información de forma distinta. rgba(255, 107, 53, 0.5) y #FF6B3580 significan ambos el mismo naranja al 50% de opacidad — el hex de 8 dígitos simplemente añade dos dígitos hex más (00-FF) para el alfa en lugar de un valor decimal separado. Ambos son compatibles en todos los navegadores principales desde 2017.
- ¿Cómo convierto un porcentaje de alfa a los dos dígitos hex?
- Multiplica el porcentaje (como fracción de 0 a 1) por 255, redondea al entero más cercano, y convierte a un valor hex de dos dígitos. 50% de opacidad es 0,5 × 255 = 127,5, que redondea a 128, que es 0x80 — de ahí #FF6B3580 para naranja al 50% de opacidad.
- ¿Es mejor usar rgba() o el hex de 8 dígitos en CSS?
- Son funcionalmente idénticos — elige el que se ajuste al estilo de tu código. rgba() es más explícito sobre el valor alfa de un vistazo; el hex de 8 dígitos es más compacto y combina de forma natural con herramientas de diseño que ya generan muestras en hex.
Sources & references
Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.
- W3C CSS Color Module Level 4 — La especificación que define rgba(), la sintaxis hex de 8 dígitos #RRGGBBAA, y cómo se compone el alfa(as of )
- MDN — <color> CSS data type — Referencia de MDN para cada sintaxis de color CSS, incluidas las variantes con alfa(as of )
Related
Published September 25, 2026