Les couleurs en CSS3 rgba(), hsl(), hsla() et opecity

Couleurs en CSS : bases, transparence et formats modernes

Cette page réorganise et enrichit le cours : nous partons des couleurs de base, avançons vers la transparence, puis vers les formats modernes (variables CSS, color(), lab()/lch(), oklab()/oklch(), etc.). Enfin, vous trouverez un récapitulatif comparatif, des bonnes pratiques et une section Accessibilité (contraste, daltonisme).

1) Couleurs de base

1.1 Couleurs nommées CSS

CSS fournit une liste de mots-clés prêts à l’emploi (named colors) : red, green, blue, black, white, transparent (complètement transparent), ou encore rebeccapurple, etc. Ces mots-clés sont pratiques pour des exemples rapides.

Exemple :     📋 Copier le code

<div style="display:flex;gap:.5rem" class="checkerboard">
  <div style="background:red;color:white;padding:.5rem">red</div>
  <div style="background:rebeccapurple;color:white;padding:.5rem">rebeccapurple</div>
  <div style="background:transparent;padding:.5rem">transparent</div>
</div>

Explication : Les « named colors » sont interprétées directement par le navigateur. transparent signifie « entièrement transparent » (valeur alpha = 0) ; la couleur sous-jacente (ou le motif de fond) restera visible.

1.2 Hexadécimal : #RRGGBB et #RRGGBBAA

La notation hexadécimale encode Rouge/Vert/Bleu en base 16 : #FF0000 (rouge), #00FF00 (vert), #0000FF (bleu). Les raccourcis #RGB existent (#F00 ⇒ #FF0000). Depuis CSS Color Level 4, on peut ajouter un canal alpha : #RRGGBBAA (ou #RGBA). Exemple : #FF000080 pour un rouge à 50% d’opacité.

Exemple :     📋 Copier le code

<style>
  .box{width:120px;padding:.5rem;border:1px solid #ddd;text-align:center;margin:.25rem}
</style>
<div style="display:flex;gap:.5rem" class="checkerboard">
  <div class="box" style="background:#FF0000">#FF0000</div>
  <div class="box" style="background:#FF000080">#FF000080</div> <!-- 50% alpha -->
  <div class="box" style="background:#0F08">#0F08</div> <!-- #RGBA => #00FF0088 -->
</div>

Explication : #RRGGBBAA ajoute deux chiffres hexadécimaux pour l’alpha (00 = transparent, FF = opaque). C’est équivalent à rgba()/hsla() mais reste une écriture compacte.

1.3 Couleurs RGBA

Les valeurs de couleur RGBA étendent RGB avec un canal alpha (opacité de la « couleur »). Le paramètre alpha va de 0 (transparent) à 1 (opaque).

Exemple :     📋 Copier le code

<style>
  p{width:200px}
  .p1{background-color: rgba(255, 0, 0, 0.3)}
  .p2{background-color: rgba(0, 255, 0, 0.3)}
  .p3{background-color: rgba(0, 0, 255, 0.3)}
</style>
<p class="p1">rgba(255, 0, 0, 0.3)</p>
<p class="p2">rgba(0, 255, 0, 0.3)</p>
<p class="p3">rgba(0, 0, 255, 0.3)</p>

Explication : Ici, seul l’arrière-plan est semi-transparent ; le texte reste opaque si vous ne lui appliquez pas d’alpha.

1.4 Valeurs de couleur HSL/HSLA

Le modèle HSL (Hue-Saturation-Lightness) est souvent plus intuitif pour créer des palettes : la teinte est un angle (0–360), la saturation et la luminosité sont des pourcentages.

• 0 (ou 360) : rouge
• 120 : vert
• 240 : bleu

Exemple :     📋 Copier le code

<style>
  .sw{width:220px;margin:0;padding:.25rem .5rem}
  .g{margin:.75rem 0}
</style>
<div class="g">
  <div class="sw" style="background:hsl(120 100% 30%)">HSL(120 100% 30%)</div>
  <div class="sw" style="background:hsl(120 100% 50%)">HSL(120 100% 50%)</div>
  <div class="sw" style="background:hsl(120 100% 70%)">HSL(120 100% 70%)</div>
  <div class="sw" style="background:hsl(120 100% 90%)">HSL(120 100% 90%)</div>
</div>
<div class="g">
  <div class="sw" style="background:hsl(240 10% 50%)">HSL(240 10% 50%)</div>
  <div class="sw" style="background:hsl(240 40% 50%)">HSL(240 40% 50%)</div>
  <div class="sw" style="background:hsl(240 70% 50%)">HSL(240 70% 50%)</div>
  <div class="sw" style="background:hsl(240 100% 50%)">HSL(240 100% 50%)</div>
</div>

Explication : Avec HSL, vous ajustez facilement des variantes (clair/foncé, saturé/désaturé) en gardant la même teinte (cohérence graphique).

2) Transparence : opacity vs alpha

Il faut distinguer :

• Alpha dans rgba()/hsla()/#RRGGBBAA : la couleur est semi-transparente (n’affecte pas les enfants).
• opacity : la boîte complète (élément + contenu + enfants) devient semi-transparente.

Exemple :     📋 Copier le code

<style>
  .wrap{display:flex;gap:1rem}
  .card{width:220px;padding:.5rem;border:1px solid #ddd}
  .bg-alpha{background: rgba(0,150,50,.5)}   /* couleur semi-transparente */
  .op-50{background: rgb(0,150,50); opacity:.5} /* tout l'élément est à 50% */
</style>
<div class="checkerboard wrap">
  <div class="card bg-alpha"><b>Alpha (rgba)</b><br>Texte 100% opaque</div>
  <div class="card op-50"><b>opacity</b><br>Texte aussi à 50%</div>
</div>

Explication : Utilisez l’alpha si vous voulez que seul l’arrière-plan soit translucide et que le texte reste net. Réservez opacity aux effets où tout doit s’estomper (survol, désactivation, etc.).

3) Formats avancés et modernes

3.1 Fonctions perceptuelles : lab(), lch(), oklab(), oklch()

Ces espaces sont plus réguliers perceptuellement : une variation numérique produit une variation visuelle plus prévisible qu’avec RGB/HSL. LCH et OKLCH sont très pratiques pour générer des gammes (modifier la clarté L ou la chroma C à teinte constante).

Exemple :     📋 Copier le code

<style>
  .row{display:flex;gap:.5rem}
  .sw2{min-width:130px;border:1px solid #ddd;padding:.5rem;text-align:center}
</style>
<div class="row">
  <div class="sw2" style="background:lch(70% 60 40)">lch(70% 60 40)</div>
  <div class="sw2" style="background:lch(60% 60 40)">lch(60% 60 40)</div>
  <div class="sw2" style="background:lch(50% 60 40)">lch(50% 60 40)</div>
</div>
<div class="row" style="margin-top:.5rem">
  <div class="sw2" style="background:oklch(0.75 0.12 40)">oklch(0.75 0.12 40)</div>
  <div class="sw2" style="background:oklch(0.65 0.12 40)">oklch(0.65 0.12 40)</div>
  <div class="sw2" style="background:oklch(0.55 0.12 40)">oklch(0.55 0.12 40)</div>
</div>

Explication : À hue constant, on fait varier la clarté (L) pour décliner la même couleur du clair au foncé. C’est idéal pour des palettes cohérentes et accessibles.

3.2 Espace élargi & color()

La fonction color() permet de cibler des espaces (par ex. display-p3) : color(display-p3 1 0 0) produit un rouge P3 (plus saturé que sRGB). Utilisez-la avec repli pour les navigateurs plus anciens.

Exemple :     📋 Copier le code

<style>
  .p3{background: color(display-p3 1 0 0)} /* Rouge en gamut P3 */
  .srgb{background: rgb(255 0 0)}
  .cell{min-width:130px;border:1px solid #ddd;padding:.5rem;text-align:center}
</style>
<div style="display:flex;gap:.5rem">
  <div class="cell srgb">sRGB</div>
  <div class="cell p3">display-p3</div>
</div>

Explication : Sur un écran compatible P3, le rouge P3 apparaît plus vif. Prévoyez un fallback sRGB si nécessaire.

3.3 Variables CSS (Custom Properties)

Définissez vos couleurs dans :root puis réutilisez-les partout. Pratique pour thématiser et assurer la cohérence.

Exemple :     📋 Copier le code

<style>
  :root{
    --primary-color: oklch(0.65 0.12 240);
    --on-primary: white;
    --surface: white;
    --text: #1f2937;
  }
  [data-theme="dark"]{
    --surface: #0b1220;
    --text: #e5e7eb;
  }
  .btn{background: var(--primary-color); color: var(--on-primary); padding:.5rem .75rem; border-radius:.25rem}
  .panel{background: var(--surface); color: var(--text); padding:.75rem; border:1px solid #e5e7eb}
</style>

\<div class="panel">
\<button class="btn">Action primaire\</button>
\</div>

\<!-- Simuler un thème sombre -->
\<div class="panel" data-theme="dark" style="margin-top:.5rem">
\<button class="btn">Action primaire (dark)\</button>
\</div> 

Explication : Les variables CSS (préfixées par --) peuvent être surchargées selon le thème, la section, le composant… Elles se combinent parfaitement avec HSL/LCH/OKLCH.

3.4 color-scheme & couleurs système

La propriété color-scheme indique au navigateur que votre page gère light / dark (et adapte alors scrollbars, formulaires…). Les couleurs système comme Canvas et CanvasText s’alignent automatiquement sur le thème de l’OS/navigateur.

Exemple :     📋 Copier le code

<style>
  :root{ color-scheme: light dark } /* déclare la prise en charge des deux schémas */
  .sys{ background: Canvas; color: CanvasText; padding:.75rem; border:1px solid #ddd }
</style>
<div class="sys">
  Cette carte utilise des couleurs système (Canvas/CanvasText) et s'adapte au thème.
</div>

Explication : color-scheme améliore l’intégration native (scrollbars, champs…). Les noms Canvas/CanvasText évitent de « forcer » des couleurs qui casseraient l’accessibilité.

4) Accessibilité des couleurs

• Contraste : viser au moins 4.5:1 pour du texte normal, 3:1 pour du texte large (≈ ≥ 18 px, ou ≥ 14 px gras).
• Daltonisme : ne jamais coder l’information par la couleur seule ; ajouter texte, icônes, motifs, soulignement.
• État au clavier : conserver focus/hover visibles.

Exemple :     📋 Copier le code

<style>
  .bad{background:#8ecae6;color:#bde0fe;padding:.5rem} /* contraste faible */
  .good{background:#0b132b;color:#ffffff;padding:.5rem} /* contraste élevé */
  a.safe{color:#1d4ed8;text-decoration:underline}
  .legend::before{content:"● ";font-weight:bold}
</style>
<div class="bad legend">Contraste insuffisant</div>
<div class="good legend" style="margin-top:.5rem">Contraste recommandé</div>
<p>Ne vous fiez pas à la couleur seule : <a href="#" class="safe">lien souligné</a> + icône/texte d’état.</p>

Explication : Le premier bloc est difficile à lire (contraste faible). Le second utilise un fond sombre et texte blanc (contraste fort). Le lien est souligné pour rester identifiable même pour les personnes daltoniennes.

5) Récapitulatif comparatif

6) Bonnes pratiques & recommandations

• Centralisez vos couleurs avec des variables CSS et nommez-les sémantiquement : --primary, --surface, --text-weak…
• Préférez HSL/OKLCH pour générer des gammes cohérentes (clair → foncé) à teinte constante.
• Utilisez alpha dans la couleur (RGBA/HSLA/#A) plutôt que opacity si le texte/enfant doit rester net.
• Exposez color-scheme: light dark et, si possible, offrez un bouton de thème qui bascule vos variables.
• Testez le contraste et fournissez des indices non colorés (soulignement, icône, motif).

Compatibilité navigateurs (historique/indicatif)

Les nombres dans le tableau spécifient la première version de navigateur ayant pris en charge la propriété/valeur indiquée (à titre historique). Pour les projets actuels, vérifiez toujours la compatibilité la plus récente.

Propriété | Navigateur
RGBA, HSL et HSLA	4.0	9.0	3.0	3.1	10.1
opacity	4.0	9.0	2.0	3.1	10.1

Exemples originaux

Couleurs RGBA

Les valeurs de couleur RGBA sont une extension des valeurs RGB avec un canal alpha – qui spécifie l'opacité de la couleur. Le paramètre alpha est compris entre 0 (transparent) et 1 (opaque).

Exemple :     📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple couleur RGBA</title>
  <style>
    p{width:200px}
    .p1{background-color: rgba(255, 0, 0, 0.3)}
    .p2{background-color: rgba(0, 255, 0, 0.3)}
    .p3{background-color: rgba(0, 0, 255, 0.3)}
  </style>
</head>
<body>
  <p class="p1">rgba(255, 0, 0, 0.3)</p>
  <p class="p2">rgba(0, 255, 0, 0.3)</p>
  <p class="p3">rgba(0, 0, 255, 0.3)</p>
</body>
</html>

Valeurs de couleur HSL

Les couleurs peuvent aussi être définies en HSL (teinte-saturation-luminosité) via la notation fonctionnelle hsl(). La saturation et la luminosité sont des pourcentages ; 100 % de saturation = couleur vive, 0 % = gris. 100 % de luminosité = blanc, 0 % = noir, 50 % ≈ « ton moyen ».

Exemple :     📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple couleur HSL</title>
  <style>
    p{width:200px;margin:0;padding:0}
    div{margin:15px}
    .p1{background-color:hsl(120 100% 30%)}
    .p2{background-color:hsl(120 100% 50%)}
    .p3{background-color:hsl(120 100% 70%)}
    .p4{background-color:hsl(120 100% 90%)}
    .p11{background-color:hsl(240 10% 50%)}
    .p12{background-color:hsl(240 40% 50%)}
    .p13{background-color:hsl(240 70% 50%)}
    .p14{background-color:hsl(240 100% 50%)}
  </style>
</head>
<body>
  <div>
    <p class="p1">HSL(120 100% 30%)</p>
    <p class="p2">HSL(120 100% 50%)</p>
    <p class="p3">HSL(120 100% 70%)</p>
    <p class="p4">HSL(120 100% 90%)</p>
  </div>
  <div>
    <p class="p11">HSL(240 10% 50%)</p>
    <p class="p12">HSL(240 40% 50%)</p>
    <p class="p13">HSL(240 70% 50%)</p>
    <p class="p14">HSL(240 100% 50%)</p>
  </div>
</body>
</html>

Couleurs HSLA

HSLA ajoute l’alpha à HSL : hsla(teinte, saturation, luminosité, alpha).

Exemple :     📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple couleur HSLA</title>
  <style>
    p{width:250px;margin:0;padding:0}
    div{margin:15px}
    .p1{background-color:hsla(0 100% 50% / .3)}
    .p2{background-color:hsla(0 100% 50% / .5)}
    .p3{background-color:hsla(0 100% 50% / .7)}
    .p4{background-color:hsla(0 100% 50% / .9)}
  </style>
</head>
<body>
  <div>
    <p class="p1">hsla(0 100% 50% / 0.3)</p>
    <p class="p2">hsla(0 100% 50% / 0.5)</p>
    <p class="p3">hsla(0 100% 50% / 0.7)</p>
    <p class="p4">hsla(0 100% 50% / 0.9)</p>
  </div>
</body>
</html>

Propriété opacity

opacity rend translucide l’ensemble de l’élément (y compris enfants/texte).

Exemple :     📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple opacity</title>
  <style>
    p{width:250px;margin:0;padding:0}
    div{margin:15px}
    .p1{background-color:rgb(0 150 50); opacity:.3}
    .p2{background-color:rgb(0 150 50); opacity:.5}
    .p3{background-color:rgb(0 150 50); opacity:.7}
    .p4{background-color:rgb(0 150 50); opacity:.9}
  </style>
</head>
<body>
  <div>
    <p class="p1">rgb(0 150 50); opacity:.3</p>
    <p class="p2">rgb(0 150 50); opacity:.5</p>
    <p class="p3">rgb(0 150 50); opacity:.7</p>
    <p class="p4">rgb(0 150 50); opacity:.9</p>
  </div>
</body>
</html>

chapitre précédent     chapitre suivant