Docs CSS exécutables : Couleurs CSS

Q: Quels formats de couleur le CSS prend-il en charge ?

Les couleurs nommées (red), l'hexadécimal (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() et color(), plus les mots-clés transparent et currentColor. L'hexadécimal, rgb et hsl couvrent presque tout le travail courant.

Q: Quelle est la différence entre rgb et rgba ?

Il n'y en a plus. rgba() est un ancien alias : le CSS actuel permet à rgb() de prendre une valeur alpha (rgb(37 99 235 / 50%)), et les deux fonctions acceptent les mêmes arguments dans tous les navigateurs actuels.

Q: Comment rendre une couleur transparente en CSS ?

Ajoutez un canal alpha : rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), ou un hexadécimal à 8 chiffres comme #2563eb80. Contrairement à opacity, cela n'estompe que cette couleur, pas tout l'élément.

Q: Que signifie currentColor ?

C'est la valeur de la propriété color de l'élément. L'utiliser pour une bordure ou le remplissage d'un SVG leur fait suivre automatiquement la couleur du texte.

Les façons d'écrire une couleur en CSS

Toute propriété qui accepte une couleur (color, background-color, border-color, les ombres, fill en SVG) accepte les mêmes formats. Les quatre premiers échantillons sont le même bleu écrit de quatre façons, et le cinquième est une couleur nommée qui s'en approche :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Format	Exemple	Idéal pour
Nommée	`tomato`, `rebeccapurple`	Tests rapides et prototypes
Hexadécimal	`#2563eb`, `#25e`	Copier depuis les outils de design
`rgb()`	`rgb(37 99 235)`	Ajouter de la transparence, travailler à partir de valeurs RGB
`hsl()`	`hsl(221 83% 53%)`	Créer des nuances plus claires et plus foncées d'une couleur
`oklch()`	`oklch(55% 0.2 262)`	Des palettes à luminosité perçue homogène
Mots-clés	`transparent`, `currentColor`	Voir les sections ci-dessous

Couleurs hexadécimales

Une couleur hexadécimale est un # suivi du rouge, du vert et du bleu, chacun sur deux chiffres hexadécimaux, de 00 à ff. Trois formes sont des raccourcis ou des extensions :

#rgb : chaque chiffre est doublé, donc #25e vaut #2255ee.
#rrggbbaa : la dernière paire est l'alpha, donc #2563eb80 est opaque à environ 50 %.
#rgba : la forme courte avec alpha.

L'hexadécimal n'est pas sensible à la casse : #2563EB et #2563eb sont la même couleur.

rgb() et rgba()

rgb() prend le rouge, le vert et le bleu de 0 à 255 (ou de 0 % à 100 %). Une quatrième valeur facultative après une barre oblique est l'alpha, de 0 (invisible) à 1, ou de 0 % à 100 %.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() et rgb() sont désormais la même fonction : toutes deux acceptent les deux syntaxes et un alpha facultatif. L'ancien code utilise rgba() quand il a besoin de transparence, et il continue de fonctionner.

hsl() : le format le plus facile à ajuster

hsl() décrit une couleur comme on se la représente : une teinte du cercle chromatique, une saturation et une luminosité. Gardez la teinte et changez la luminosité pour obtenir toute une gamme :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

La première rangée garde la teinte 221 et la saturation 83 % et ne change que la luminosité. La seconde fait le tour du cercle chromatique avec la même saturation et la même luminosité.

Transparence : alpha ou opacity

Un canal alpha rend une seule couleur transparente. opacity rend tout l'élément transparent, texte et enfants compris :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent est un mot-clé pour un noir entièrement transparent, rgb(0 0 0 / 0). C'est le fond par défaut de la plupart des éléments.

currentColor

currentColor vaut la propre valeur color de l'élément. Un bouton dont la bordure, l'icône et le texte l'utilisent change entièrement avec une seule déclaration :

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Les bordures utilisent déjà currentColor par défaut, c'est pourquoi border: 2px solid sans couleur prend celle du texte.

Essayez n'importe quelle couleur

Tapez une couleur dans n'importe quel format. Le navigateur l'analyse et affiche ce qu'il a calculé ; une couleur invalide laisse l'échantillon inchangé.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) et color-mix(in srgb, #2563eb, white 50%).

Les fonctions de couleur plus récentes

oklch(L C H) : luminosité, chroma et teinte dans un espace conçu pour qu'une même luminosité paraisse aussi claire. Les palettes construites avec lui ont moins d'étapes intermédiaires ternes que celles en HSL.
color-mix(in srgb, A, B 30%) : mélange deux couleurs. Avec white ou black, il crée des nuances plus claires et plus foncées à partir d'une seule couleur de marque, et il fonctionne avec les variables CSS : color-mix(in srgb, var(--brand), white 80%).

Les deux fonctionnent dans les versions actuelles de Chrome, Firefox et Safari. Gardez les couleurs de marque dans des variables CSS pour que les formats choisis se trouvent à un seul endroit.

Erreurs courantes

Oublier le # d'une couleur hexadécimale. color: 2563eb est invalide et ignoré.
Utiliser opacity pour rendre un fond transparent. Le texte s'estompe aussi. Utilisez une couleur avec alpha.
Mélanger les séparateurs dans la syntaxe moderne. rgb(37 99, 235) est invalide : utilisez uniquement des espaces ou uniquement des virgules.
Supposer qu'une couleur nommée correspond à votre maquette. royalblue n'est pas #2563eb. Copiez le code exact.
Juger le contraste à l'œil. Vérifiez les couleurs de texte par rapport à leur fond avec un outil de contraste ; 4,5:1 est le minimum pour le texte courant.

Questions fréquentes

Quels formats de couleur le CSS prend-il en charge ?

Les couleurs nommées (red), l'hexadécimal (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() et color(), plus les mots-clés transparent et currentColor. L'hexadécimal, rgb et hsl couvrent presque tout le travail courant.

Quelle est la différence entre rgb et rgba ?

Il n'y en a plus. rgba() est un ancien alias : le CSS actuel permet à rgb() de prendre une valeur alpha (rgb(37 99 235 / 50%)), et les deux fonctions acceptent les mêmes arguments dans tous les navigateurs actuels.

Comment rendre une couleur transparente en CSS ?

Ajoutez un canal alpha : rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), ou un hexadécimal à 8 chiffres comme #2563eb80. Contrairement à opacity, cela n'estompe que cette couleur, pas tout l'élément.

Qu'est-ce que HSL en CSS ?

Teinte (hue), saturation et luminosité (lightness). La teinte est un angle sur le cercle chromatique (0 rouge, 120 vert, 240 bleu), la saturation indique l'intensité, et la luminosité va de 0 % (noir) à 100 % (blanc). Il est facile d'obtenir des nuances plus claires ou plus foncées : on ne change que le dernier nombre.

Que signifie currentColor ?

C'est la valeur de la propriété color de l'élément. L'utiliser pour une bordure ou le remplissage d'un SVG leur fait suivre automatiquement la couleur du texte.

Concepts liés