¿Cómo puedo usar la transparencia en colores CSS utilizando RGBA o HSLA?

Para usar transparencia en los colores CSS, tienes los formatos RGBA y HSLA, que son extensiones de RGB y HSL respectivamente, añadiendo un cuarto valor conocido como canal alfa. Este canal alfa controla la opacidad del color.

El valor del canal alfa va desde:

• 0.0: Completamente transparente (el color es invisible).
• 1.0: Completamente opaco (el color se muestra sin transparencia).
• Valores intermedios como 0.5 indican un 50% de opacidad (semitransparente).

1. RGBA (Rojo, Verde, Azul, Alfa):

La sintaxis es rgba(rojo, verde, azul, alfa). Los primeros tres valores (de 0 a 255) definen el color base, y el cuarto es el canal alfa.

.mi-elemento-rgba {
  /* Fondo rojo con 70% de opacidad */
  background-color: rgba(255, 0, 0, 0.7);
  /* Texto blanco completamente opaco (para contraste) */
  color: rgb(255, 255, 255);
  padding: 15px;
}
Lenguaje del código: PHP (php)

2. HSLA (Tono, Saturación, Luminosidad, Alfa):

La sintaxis es hsla(tono, saturación%, luminosidad%, alfa). El tono (0-360), la saturación (0-100%) y la luminosidad (0-100%) definen el color base, y el cuarto valor es el canal alfa, que funciona igual que en RGBA.

.mi-elemento-hsla {
  /* Fondo azul con 40% de opacidad */
  background-color: hsla(240, 100%, 50%, 0.4);
  /* Texto negro casi opaco */
  color: hsla(0, 0%, 0%, 0.9); /* 90% opacidad */
  padding: 15px;
  border: 1px solid hsla(0, 0%, 0%, 0.2); /* Borde negro con 20% opacidad */
}
Lenguaje del código: PHP (php)

Importante: Cuando aplicas transparencia con RGBA o HSLA a propiedades como background-color o color, solo se ve afectado el color de esa propiedad específica (el fondo, el texto, el borde, etc.). El contenido del elemento (como otros elementos hijos o el texto si solo se aplica al fondo) no hereda esta transparencia, a diferencia de lo que ocurre con la propiedad opacity, que afecta a todo el elemento y a sus hijos.

Estos formatos son muy útiles para superponer elementos, crear efectos visuales sutiles o mejorar la legibilidad del texto sobre fondos complejos.