Appliquer des couleurs aux éléments HTML avec CSS

Avec CSS, il existe de nombreuses façons d'ajouter de la couleur à vos éléments HTML afin d'obtenir l'apparence souhaitée. Ce guide est une introduction à l'utilisation de CSS pour appliquer des couleurs aux éléments HTML. Il inclut des listes des propriétés CSS qui définissent une couleur dans leurs valeurs et explique comment utiliser les couleurs dans les feuilles de style et d'autres façons.

Note : Il est important de bien utiliser les couleurs. Choisissez toujours des couleurs appropriées, assurez-vous que le contraste entre le texte et l'arrière-plan est suffisant pour la lisibilité, et gardez à l'esprit les besoins des personnes ayant des capacités visuelles différentes.

Pour en savoir plus sur les couleurs CSS en tant que type de donnée, voir la référence du type de donnée CSS <color> et le guide des valeurs de couleur CSS.

Propriétés qui peuvent avoir une couleur

Au niveau des éléments, tout dans HTML peut recevoir une couleur. Examinons les différents éléments rendus sur la page — texte, bordures, etc. — avec des listes des propriétés CSS qui appliquent une couleur à chacun.

De manière fondamentale, la propriété color définit la couleur de premier plan du contenu d'un élément HTML et la propriété background-color définit la couleur d'arrière-plan de l'élément. Elles peuvent être utilisées sur quasiment tout élément.

Texte

Lorsqu'un élément est rendu, ces propriétés déterminent la couleur du texte, de son arrière-plan, et des décorations appliquées au texte.

color: La couleur utilisée pour dessiner le texte et ses décorations de texte (soulignement, surlignement, barré, etc.).
background-color: La couleur d'arrière-plan du texte.
text-shadow: Configure un effet d'ombre appliqué au texte. Parmi les options figure la couleur de base de l'ombre (ensuite estompée et mélangée à l'arrière-plan selon les autres paramètres). Voir Ombres portées sur le texte pour en savoir plus.
text-decoration-color: Par défaut, les décorations de texte (soulignement, barré, etc.) utilisent currentColor, qui représente la valeur actuelle de color. Vous pouvez remplacer cette valeur avec text-decoration-color pour choisir une autre couleur.
text-emphasis-color: La couleur pour le rendu des symboles d'emphase adjacents à chaque caractère du texte. Principalement utilisée pour les langues d'Asie de l'Est.
caret-color: La couleur du caret (curseur de saisie). Utile dans les éléments éditables comme <input> et <textarea> ou ceux dont l'attribut contenteditable vaut true.

Boîtes

Chaque élément est une boîte avec un contenu, un arrière-plan et une bordure.

Bordures: Voir la section Bordures pour la liste des propriétés CSS permettant de définir les couleurs des bordures d'une boîte.
background-color: La couleur d'arrière-plan des zones de l'élément sans contenu au premier plan.
box-shadow: Configure des ombres internes et externes sur la boîte. Chaque ombre possède notamment une couleur de base (puis estompée et mélangée selon les autres paramètres).
column-rule-color: La couleur de la ligne séparant des colonnes de texte en mise en page multicolonne CSS.
outline-color: La couleur du contour tracé autour de l'extérieur de l'élément. À la différence de la bordure, aucun espace ne lui est réservé dans le document. Les contours ne participent pas au modèle de boîtes et peuvent chevaucher d'autres contenus. Les contours servent souvent d'indicateurs de focus.

Bordures

Tout élément peut avoir une bordure autour de lui. Une bordure de base est une ligne tracée autour des bords du contenu de l'élément. Voir Le modèle de boîtes pour comprendre la relation entre les éléments et leurs bordures, et l'article Mettre en forme les bordures avec CSS pour en savoir plus sur la mise en forme des bordures.

Vous pouvez utiliser la propriété raccourcie border, qui permet de configurer toute la bordure en une fois (y compris la largeur, le style — plein, pointillé, etc.).

border-color (version courte): Spécifie une couleur unique pour chaque côté de la bordure de l'élément.
border-left-color, border-right-color, border-top-color, border-bottom-color: Permettent de définir la couleur du côté correspondant de la bordure de l'élément.
border-block-start-color et border-block-end-color: Définissent les couleurs des bordures au début et à la fin du bloc entouré par la bordure. En écriture de gauche à droite, le début de bloc correspond au bord supérieur et la fin de bloc au bord inférieur. Cela diffère du début et de la fin en ligne, qui correspondent aux bords gauche et droit (là où commencent et se terminent les lignes de texte du bloc).
border-inline-start-color et border-inline-end-color: Définissent la couleur des bords de la bordure proches du début et de la fin des lignes de texte. Le côté concerné dépend de writing-mode, direction et text-orientation, souvent utilisés pour l'orientation selon la langue. Par exemple, pour un texte rendu de droite à gauche, border-inline-start-color s'applique au côté droit de la bordure.

Spécification des couleurs dans les feuilles de style

Maintenant que vous savez quelles propriétés CSS permettent d'appliquer des couleurs, vous pouvez commencer à en ajouter à vos sites. Observons des exemples d'utilisation de la couleur dans une stylesheet. Ici nous utilisons plusieurs propriétés mentionnées plus haut, le principe restant identique quelle que soit la propriété.

Regardons d'abord le résultat, puis le code à écrire pour l'obtenir :

HTML

Le HTML responsable du résultat ci-dessus :

html

<div class="conteneur">
  <div class="boiteGauche">
    <p>Je suis une boîte.</p>
  </div>
  <div class="boiteDroite">
    <p>Je suis la autre boîte.</p>
  </div>
</div>

Ici, nous avons un <div> conteneur avec deux <div> enfants, chacun contenant un paragraphe (<p>). Chaque <div> reçoit une apparence différente.

CSS

Regardons le CSS qui produit le résultat, étape par étape.

Note : Nous utilisons plusieurs types de valeurs de couleurs CSS afin d'en démontrer l'usage. Ce n'est pas recommandé en production. Choisissez une notation de couleur unique au sein de l'équipe.

css

.conteneur {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

La classe .conteneur applique des styles au <div> englobant le contenu. Elle fixe la hauteur avec height. La largeur du bloc par défaut vaut 100% de son parent. En définissant display à flex et un gap de 10px, on crée un conteneur flex qui aligne les enfants côte à côte avec un espacement. On utilise flex pour permettre aux enfants de grandir et remplir le conteneur ; cela n'affecte pas le conteneur lui-même.

Point central ici : la propriété border définit une bordure autour de l'élément, ligne pleine de 6 pixels en couleur nommée mediumturquoise.

Dans le conteneur, on a une boîte gauche et une boîte droite.

css

.boiteGauche {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

La classe .boiteGauche, appliquée à la boîte de gauche, définit l'arrière-plan et le contour :

L'arrière-plan est défini via background-color à rgb(245 130 130) avec la notation fonctionnelle rgb().
Un contour est défini. Contrairement à border, outline n'affecte pas la mise en page : il se dessine par-dessus ce qui se trouve à l'extérieur de la boîte au lieu de réserver de l'espace. Ici, ligne pleine darkred de 2 pixels.
Remarquez que la couleur du texte n'est pas fixée : color est héritée du conteneur le plus proche qui la définit. Par défaut, c'est noir.

css

.boiteDroite {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 95% 95%);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

Note : Les propriétés text-decoration-* sont incluses séparément car Safari ne prend pas en charge text-decoration en tant que raccourci.

Enfin, .boiteDroite définit plusieurs styles sur la boîte de droite. Les couleurs suivantes sont établies (avec cinq notations différentes) :

background-color via hwb() — hwb(270deg 63% 13%) (violet moyen).
outline en ligne pointillée de 4 pixels avec la couleur hexadécimale <hex-color> #6e1478.
Couleur de texte avec color via hsl() — hsl(0deg 95% 95%) (rose très clair).
Soulignement ondulé vert via text-decoration et ses composantes longues, avec la couleur hexadécimale 3 chiffres #8f8 (équivalent #88ff88).
Une ombre portée au texte via text-shadow avec la couleur nommée black.

Nous avons volontairement utilisé cinq syntaxes de couleur pour illustrer ce qui est possible. En pratique, choisissez une notation de couleur cohérente au sein de votre équipe.

Autres façons d'utiliser la couleur

CSS n'est pas la seule technologie Web à gérer la couleur. Par exemple :

API Canvas: Permet de dessiner des graphismes 2D bitmap dans un élément <canvas>. Voir le tutoriel Canvas.
SVG (Scalable Vector Graphics): Permet de créer des images en décrivant des formes, motifs et lignes. Les commandes SVG sont en XML et peuvent être intégrées directement dans une page ou utilisées via <img>.
WebGL: Bibliothèque graphique Web basée sur OpenGL ES pour des graphismes 2D/3D performants. Voir le tutoriel WebGL. Voir aussi WebGPU, successeur moderne de WebGL.

Note : Quelques attributs HTML désormais obsolètes acceptaient des couleurs comme valeurs, tels que bgcolor et vlink. Ces attributs n'acceptaient que les <named-color> et les <hex-color> sur 3 ou 6 chiffres.

Voir aussi

Help improve MDN

Learn how to contribute

This page was last modified on ⁨17 sept. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content