rgba() et hsla() en CSS : la transparence qui ne touche qu'un seul canal

opacity a un défaut qui surprend régulièrement les débutants : elle rend transparent l'élément entier, texte et enfants compris. Impossible avec elle de garder un texte parfaitement lisible sur un fond légèrement translucide.

rgba() et hsla() résolvent exactement ce problème en ajoutant un quatrième réglage aux fonctions rgb() et hsl() : un canal alpha qui ne rend transparente que cette couleur précise, sans toucher à rien d'autre dans l'élément.

Définition

rgba(r, g, b, a) et hsla(h, s%, l%, a) reprennent exactement la syntaxe de rgb() et hsl(), avec une quatrième valeur en plus : le canal alpha, un nombre entre 0 (totalement transparent) et 1 (totalement opaque). Ce sont des variantes de Couleur CSS, pas des propriétés à part entière : elles s'utilisent partout où une couleur est attendue.

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
}

.bouton-accent {
  background-color: hsla(24, 100%, 50%, 0.85);
}

Le canal alpha, une transparence localisée

La différence avec opacity tient en une phrase : opacity agit après coup sur tout ce que l'élément affiche, alors que le canal alpha ne concerne que la couleur à laquelle il est attaché. Un fond en rgba() semi-transparent laisse un texte blanc parfaitement opaque au-dessus, ce qu'opacity ne permet jamais de reproduire sans séparer le texte dans un autre élément.

.carte-opacity {
  background-color: #1e293b;
  opacity: 0.6; /* le texte devient transparent lui aussi */
}

.carte-alpha {
  background-color: rgba(30, 41, 59, 0.6); /* le texte reste net */
}

hsla() pour ajuster une teinte sans y penser

Sur une valeur en rgba(), assombrir légèrement une couleur oblige à recalculer trois composantes à la fois. Sur une valeur en hsla(), il suffit de descendre le troisième nombre, la luminosité, la teinte et la saturation restant fixes. C'est ce qui rend hsla() particulièrement pratique pour dériver un état survolé ou désactivé à partir d'une couleur existante, sans dupliquer une palette entière.

Cas d'usage courants

Un voile sombre semi-transparent posé sur une image pour garantir la lisibilité d'un texte par-dessus, une background-color de carte légèrement teintée qui laisse deviner le fond de la page, ou une bordure discrète en noir à faible alpha plutôt qu'un gris calculé à la main : ce sont les trois usages les plus fréquents de ces deux fonctions dans une interface réelle.

Attention au contraste

Un texte blanc posé sur un fond en rgba() à faible alpha peut sembler parfaitement net sur l'écran d'un designer, puis devenir difficile à lire une fois le canal alpha encore réduit, ou une fois la carte déplacée sur une image plus claire que prévu. Contrairement à une couleur opaque, le contraste réel d'une valeur avec canal alpha dépend directement de ce qu'il y a en dessous, ce qui la rend plus délicate à vérifier avec un outil de contraste classique. Il vaut mieux toujours tester la combinaison finale, fond compris, plutôt que juger la couleur seule sur un aplat blanc.

Questions fréquentes

Plus vraiment. Les navigateurs récents acceptent un quatrième paramètre directement dans rgb() et hsl(), séparé par une barre oblique : rgb(0 0 0 / 0.5). Les fonctions historiques rgba() et hsla() restent parfaitement valides et très répandues dans le code existant, ce qui les rend utiles à reconnaître même si elles ne sont plus strictement nécessaires.

Oui, rgba(0, 0, 0, 50%) est équivalent à rgba(0, 0, 0, 0.5). Les deux notations sont acceptées, mais mélanger les deux styles dans un même projet nuit à la lisibilité : mieux vaut en choisir une et s'y tenir sur toute la feuille de style.

Parce que c'est précisément le principe de la transparence : le navigateur mélange la couleur déclarée avec ce qu'il y a en dessous. La même valeur rgba() rendra plus claire sur un fond sombre et plus sombre sur un fond clair, ce qui est normal et non un bogue à corriger.