Convertir color RGB a RGBA
Añade transparencia a un color RGB y copia el rgba() listo para CSS.
Tus datos no se envían a ningún servidor.
El conversor de RGB a RGBA añade transparencia a un color RGB. Eliges la
opacidad con un deslizador y copias el resultado en el formato que use tu CSS:
rgba(), hex de 8 dígitos o la sintaxis moderna rgb(r g b / %). Si tu color
está en hexadecimal, usa el conversor de hex a RGBA.
rgba() frente a opacity
Las dos formas vuelven algo transparente, pero no hacen lo mismo:
| Color con rgba() | Propiedad opacity | |
|---|---|---|
| Qué se vuelve transparente | Solo esa propiedad, por ejemplo el fondo | El elemento entero |
| Texto e hijos | Se ven opacos | También se vuelven transparentes |
| Uso típico | Fondos, bordes, sombras y capas | Fundidos y elementos desactivados |
Para una tarjeta con fondo semitransparente y texto legible, lo correcto es
background: rgba(...). Con opacity: 0.5 el texto también perdería intensidad.
Para qué sirve
- Capas sobre imágenes: un fondo negro al 40 % encima de una foto hace que el texto blanco se lea bien.
- Estados de interfaz: versiones suaves de tu color de marca para fondos de avisos, filas seleccionadas o botones al pasar el ratón.
- Sombras y bordes sutiles: un negro con poca opacidad se adapta a cualquier fondo mejor que un gris fijo.
Cómo usar RGB a RGBA
- 1
Introduce el color RGB
Escribe los canales R, G y B, cada uno de 0 a 255. Si vienes de otra herramienta de color, los valores se rellenan solos.
- 2
Elige la opacidad
Mueve el deslizador entre 0 % (invisible) y 100 % (opaco). La muestra de color se actualiza al momento.
- 3
Copia el formato que uses
Copia el rgba() clásico, el hex de 8 dígitos o la sintaxis moderna rgb(r g b / %). Los tres dan el mismo color.
Preguntas frecuentes
¿Qué diferencia hay entre RGB y RGBA?
RGBA es RGB con un cuarto valor, el alfa, que indica la opacidad. Va de 0 (transparente) a 1 (opaco). rgb(255, 0, 0) es un rojo sólido y rgba(255, 0, 0, 0.5) es el mismo rojo al 50 %.
¿Es mejor usar rgba() o la propiedad opacity?
Depende de qué quieras volver transparente. opacity afecta al elemento entero, incluidos su texto y sus hijos. Un color rgba() en el fondo solo vuelve transparente ese fondo, y el texto se sigue leyendo con normalidad.
¿Sigue haciendo falta escribir rgba()?
No en navegadores actuales. Hoy rgb() también admite alfa con la sintaxis rgb(255 0 0 / 50%), y rgba() se mantiene por compatibilidad. Si tu proyecto debe funcionar en navegadores antiguos, usa rgba().
¿El alfa se escribe como decimal o como porcentaje?
Las dos formas son válidas en CSS moderno. rgba() usa normalmente un decimal entre 0 y 1, y la sintaxis rgb(r g b / a) acepta tanto 0.5 como 50%.
¿Un elemento con alfa 0 desaparece?
Se vuelve invisible, pero sigue ocupando su espacio y puede recibir clics. Si quieres quitarlo del todo, usa display: none o visibility: hidden.