Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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écolor définit la couleur de premier plan d'un élément texte et de ses éventuellesdécorations. Elle définit également la valeur decurrentColor qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pourborder-color).
Exemple interactif
color: rebeccapurple;color: #00a400;color: rgb(214, 122, 127);color: hsl(30deg 82% 43%);color: hsla(237deg 74% 33% / 61%);color: hwb(152deg 0% 58% / 70%);<section> <div> <p> London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. </p> </div></section>#example-element { font-size: 1.5em;}.example-container { background-color: white; padding: 10px;}La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé (<gradient>) car en CSS un dégradé est considéré comme une image (type<image>) et pas comme une couleur.
Syntaxe
/* Valeurs avec un mot-clé */color: currentcolor;/* Valeurs avec un mot-clé pour une couleur nommée */color: red;color: orange;color: tan;color: rebeccapurple;/* Valeurs hexadécimales <hex-color> */color: #090;color: #009900;color: #090a;color: #009900aa;/* Valeurs utilisant la fonction <rgb()> */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.3);color: rgb(34 12 64 / 60%);color: rgba(34.6 12 64 / 30%);/* Valeurs <hsl()> */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 100% 50% / 60%);color: hsla(30.2 100% 50% / 60%);/* Valeurs globales */color: inherit;color: initial;color: unset;La propriétécolor est définie grâce à une valeur de type<color>.
Valeurs
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
CSS
.exemple { color: rgb(0, 0, 255); /* équivalent à color: blue; color: #0000ff; color: #00f; color: hsl(0, 100%, 50%); */}.confiture { color: orange; /* on pourrait aussi utiliser color: rgb(255, 128, 0); */}HTML
<p> En passant elle prit sur un rayon un pot de confiture portant cette étiquette, <span> « MARMELADE D’ORANGES. » </span> Mais, à son grand regret, le pot était vide : elle n’osait le laisser tomber dans la crainte de tuer quelqu’un ; aussi s’arrangea-t-elle de manière à le déposer en passant dans une des armoires.</p>Résultat
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 respecterles règles d'accessibilité (WCAG), 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.66 px ou bien si une lettre mesure plus de 24 pixels).
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 - Appliquer des couleurs aux éléments HTML grâce à CSS