HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
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.
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.
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.
La couleur utilisée pour dessiner le texte et ses décorations de texte (soulignement, surlignement, barré,
etc.).
La couleur d'arrière-plan du texte.
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.
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.
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.
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.
Chaque élément est une boîte avec un contenu, un arrière-plan et une bordure.
Voir la section Bordures pour la liste des propriétés CSS permettant de définir les couleurs des bordures d'une boîte.
La couleur d'arrière-plan des zones de l'élément sans contenu au premier plan.
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).
La couleur de la ligne séparant des colonnes de texte en mise en page multicolonne CSS.
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 la sélection.
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.).
Définie une couleur unique pour chaque côté de la bordure de l'élément.
Permettent de définir la couleur du côté correspondant de la bordure de l'élément.
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).
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.
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 feuille de style. 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 :
Le HTML responsable du résultat ci-dessus :
Ici, nous avons un conteneur englobant <div> avec deux <div> enfants, chacun contenant un paragraphe (<p>). Chaque <div> reçoit une apparence différente.
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.
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ô