La propriété color
permet de paramétrer la couleur de premier plan d'un élément texte et de ses éventuelles décorations. Elle définit également la valeur de currentcolor
qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour border-color
).
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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.0 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.0 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
<color>
- Une valeur de type
<color>
qui fournit la couleur pour les éléments textuels de l'élément.
Formal syntax
<color>où
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )où
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Exemples
CSS
.exemple { color: rgb(0, 0, 255); /* équivalent à color: blue; color: #0000ff; color: hsl(0, 100%, 50%); */ } .confiture { color: orange; /* on pourrait aussi utiliser color: rgb(255, 128, 0); */ }
HTML
<p class="exemple"> En passant elle prit sur un rayon un pot de confiture portant cette étiquette, <span class="confiture"> « 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 respecter les 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).
- Contrôleur de contraste WebAIM
- Comprendre les règles WCAG 1.4
- Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0 (en anglais)
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Color Module Level 4 La définition de 'color' dans cette spécification. |
Version de travail | Ajout de la syntaxe sans virgule pour les fonctions rgb() , rgba() , hsl() et hsla() Une valeur alpha peut être utilisée dans rgb() et hsl() , rgba() et hsla() sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur rebeccapurple .Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha. Ajout des fonctions hwb() , device-cmyk() et color() . |
CSS Transitions La définition de 'color' dans cette spécification. |
Version de travail | color peut désormais être animée. |
CSS Color Module Level 3 La définition de 'color' dans cette spécification. |
Recommendation | Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba() , hsl() et hsla() . |
CSS Level 2 (Revision 1) La définition de 'color' dans cette spécification. |
Recommendation | Ajout de la couleur orange et des couleurs système. |
CSS Level 1 La définition de 'color' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | Varie d'un navigateur à l'autre |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line . |
Héritée | oui |
Média | visuel |
Valeur calculée | si la valeur est translucide, la valeur calculée est la fonction rgba() correspondante. Sinon, la fonction rgb() correspondante. Le mot-clé transparent devient rgb(0,0,0) . |
Type d'animation | une couleur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 1 | 12 | 1 | Oui | Oui | Oui |
Keyword color values | 1 | 12 | 1 | 31 | 3.5 | 1 |
RGB hexadecimal notation (#RRGGBB , #RGB ) | 1 | 12 | 1 | 3 | 3.5 | 1 |
RGB functional notation (rgb() ) | 1 | 12 | 1 | 4 | 3.5 | 1 |
HSL color values (hsl() ) | 1 | 12 | 1 | 9 | 9.5 | 3.1 |
Alpha color values (rgba() , hsla() ) | 1 | 12 | 3 | 9 | 10 | 3.1 |
currentcolor | 1 | ? | 1.5 | 9 | 9.5 | 4 |
transparent | 1 | ? | 3 | 9 | 10 | 3.1 |
rebeccapurple | 38 | ? | 33 | 11 | 25 | Oui |
RGBA hexadecimal notation (#RRGGBBAA , #RGBA ) | 63 522 | Non | 49 | ? | 393 | 9.1 |
Space-separated functional color notations | 65 | ? | 52 | ? | 52 | ? |
Allow floats in rgb() and rgba() | 67 | ? | 52 | ? | ? | ? |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | 1 | 1 | 12 | 4 | Oui | Oui | Oui |
Keyword color values | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
RGB hexadecimal notation (#RRGGBB , #RGB ) | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
RGB functional notation (rgb() ) | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
HSL color values (hsl() ) | Oui | Oui | Oui | Oui | Oui | Oui | Oui |
Alpha color values (rgba() , hsla() ) | Oui | Oui | Oui | 4 | Oui | Oui | Oui |
currentcolor | ? | ? | ? | ? | ? | ? | ? |
transparent | ? | ? | ? | ? | ? | ? | ? |
rebeccapurple | Oui | ? | ? | 33 | ? | 8 | ? |
RGBA hexadecimal notation (#RRGGBBAA , #RGBA ) | ? | ? | Non | ? | Non | ? | ? |
Space-separated functional color notations | ? | ? | ? | 52 | ? | ? | ? |
Allow floats in rgb() and rgba() | 67 | 67 | ? | 52 | ? | ? | ? |
1. Internet Explorer 8 and later support gray color keywords spelled with an e (grey
, darkgrey
, darkslategrey
, dimgrey
, lightgrey
, and lightslategrey
). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray
, darkgray
, darkslategray
, dimgray
, lightgray
, and lightslategray
).
2. From version 52: this feature is behind the Enable experimental Web Platform features
preference. To change preferences in Chrome, visit chrome://flags.
3. From version 39: this feature is behind the Enable experimental Web Platform features
preference.
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
etcolumn-rule-color
- Appliquer des couleurs aux éléments HTML grâce à CSS