AvecCSS, il existe de nombreuses façons d'ajouter de la couleur à vosélémentsHTML 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 inclutdes listes des propriétés CSS qui définissent une couleur dans leurs valeurs et explique comment utiliser les couleursdans les feuilles de style etd'autres façons.

Pour en savoir plus sur les couleurs CSS en tant que type de donnée, voir la référence dutype de donnée CSS<color> et leguide 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 sesdé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). VoirOmbres portées sur le texte pour en savoir plus.

text-decoration-color

Par défaut, les décorations de texte (soulignement, barré, etc.) utilisentcurrentColor, qui représente la valeur actuelle decolor. Vous pouvez remplacer cette valeur avectext-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 ducaret (curseur de saisie). Utile dans les éléments éditables comme<input> et<textarea> ou ceux dont l'attributcontenteditable vauttrue.

Boîtes

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

Bordures

Voir la sectionBordures 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 enmise 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 aumodè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. VoirLe modèle de boîtes pour comprendre la relation entre les éléments et leurs bordures, et l'articleMettre en forme les bordures avec CSS pour en savoir plus sur la mise en forme des bordures.

Vous pouvez utiliser la propriété raccourcieborder, qui permet de configurer toute la bordure en une fois (y compris lalargeur, lestyle — 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 etborder-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 etborder-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 dewriting-mode,direction ettext-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 quellespropriétés CSS permettent d'appliquer des couleurs, vous pouvez commencer à en ajouter à vos sites. Observons des exemples d'utilisation de la couleur dans unestylesheet. 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 :

<div>  <div>    <p>Je suis une boîte.</p>  </div>  <div>    <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.

.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 avecheight. La largeur du bloc par défaut vaut 100% de son parent. En définissantdisplay àflex et ungap de10px, on crée un conteneur flex qui aligne les enfants côte à côte avec un espacement. On utiliseflex 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 encouleur nomméemediumturquoise.

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

.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 viabackground-color àrgb(245 130 130) avec la notation fonctionnellergb().
• 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 pleinedarkred 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.

.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;}

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

• background-color viahwb() —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 aveccolor viahsl() —hsl(0deg 95% 95%) (rose très clair).
• Soulignement ondulé vert viatext-decoration et ses composantes longues, avec la couleur hexadécimale 3 chiffres#8f8 (équivalent#88ff88).
• Une ombre portée au texte viatext-shadow avec la couleur nomméeblack.

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 letutoriel 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 letutoriel WebGL. Voir aussiWebGPU, successeur moderne de WebGL.

Voir aussi

• Type de donnée<color>
• Valeurs de couleur CSS
• Bien utiliser les couleurs
• Le moduleCouleurs CSS
• Dessiner des graphiques