color
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété CSS color permet de définir la valeur de couleur du texte d'un élément et de ses décorations de texte, et définit la valeur currentColor. currentColor peut être utilisée comme valeur indirecte pour d'autres propriétés et constitue la valeur par défaut pour d'autres propriétés de couleur, telles que border-color.
Pour avoir un aperçu de l'utilisation de la couleur dans HTML, veuillez consulter Appliquer des couleurs aux éléments HTML grâce à CSS.
Exemple interactif
color: rebeccapurple;
color: #00a400;
color: rgb(214 122 127);
color: hsl(30deg 82% 43%);
color: hsl(237deg 74% 33% / 61%);
color: hwb(152deg 0% 58% / 70%);
<section id="default-example">
<div class="example-container">
<p id="example-element">
Londres. Le trimestre de la Saint-Michel vient de se terminer, et le Lord
Chancelier siège dans la salle de Lincoln's Inn. Un temps de novembre
implacable.
</p>
</div>
</section>
#example-element {
font-size: 1.5em;
}
.example-container {
background-color: white;
padding: 10px;
}
Syntaxe
/* Valeurs avec un mot-clé */
color: currentcolor;
/* Valeurs de type <named-color> */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* Valeurs de type <hex-color> */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* Valeurs de fonction <rgb()> et anciennes valeurs <rgba()> */
color: rgb(34, 12, 64);
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);
/* Valeurs de fonction <hsl()> et anciennes valeurs <hsla()> */
color: hsl(30, 100%, 50%);
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* Valeurs de fonction <hwb()> */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);
/* Valeurs globales */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;
La propriété color est définie grâce à une valeur de type <color>.
Valeurs
<color>-
Définit la couleur des parties textuelles et décoratives de l'élément.
currentColor-
Définit la couleur à la valeur de la propriété
colorde l'élément. Cependant, si elle est définie comme valeur decolor,currentColorest traité commeinherit.
Accessibilité
Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.
Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter les règles d'accessibilité (WCAG) (angl.), on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66px ou bien si une lettre mesure plus de 24 pixels).
Définition formelle
| Valeur initiale | canvastext |
|---|---|
| Applicabilité | all elements and text. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | oui |
| Valeur calculée | couleur calculée |
| Type d'animation | by computed value type |
Syntaxe formelle
color =
<color>
Exemples
Mettre le texte en rouge
Voici toutes les façons de mettre le texte d'un paragraphe en rouge :
p {
color: red;
}
p {
color: #f00;
}
p {
color: #ff0000;
}
p {
color: rgb(255 0 0);
}
p {
color: rgb(100% 0% 0%);
}
p {
color: hsl(0 100% 50%);
}
/* 50% transparent */
p {
color: #ff000080;
}
p {
color: rgb(255 0 0 / 50%);
}
p {
color: hsl(0 100% 50% / 50%);
}
Spécifications
| Specification |
|---|
| CSS Color Module Level 4 # the-color-property |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |
Compatibilité des navigateurs
Voir aussi
- Le type de donnée
<color> - Les autres propriétés relatives aux couleurs :
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color,column-rule-coloretcolor-adjust - L'attribut SVG
color - La fonction
color() - Appliquer des couleurs aux éléments HTML grâce à CSS
- WCAG : contraste des couleurs