Les couleurs CSS

(Dernière mise à jour: 10 février 2020)

Les différentes couleurs en CSS peuvent être définies en hexadécimal.

L’hexadécimal utilise les trois composantes : rouge, vert et bleu.

Vous pouvez définir des couleurs en hexadécimal abrégé : par exemple #DC2, correspond à #DDCC22. Il faut savoir que certaines couleurs ne peuvent pas être abrégées. Le but est d’abréger vos couleurs hexadécimales quand vous le pouvez.

Plus votre fichier CSS est petit en taille, plus votre site Internet va s’afficher rapidement sur l’ordinateur de votre visiteur.

Exemple :

background-color : #FF9900;

Vous pouvez définir des couleurs en décimal, avec les couleurs RGB ou RVB. C’est encodé par un nombre entier compris entre 0 et 255. Ce n’est pas très utilisé mais vous pouvez le faire, ça ne pose aucun problème.

Vous pouvez utiliser également des pourcentages pour définir votre couleur RGB. Zéro pour absence de la composante tandis que 100 %, elle est à son maximum. C’est toujours les couleurs rouge, vert, et bleu que vous définissez, un mélange des trois couleurs primaires.

Exemples :

background-color: rgb(255,153,0);
background-color: rgb(100%,67%,0%);

Et vous pouvez également définir des couleurs CSS grâce à des mots-clés en anglais, qui représentent les couleurs basiques comme green pour vert, yellow pour jaune, blue pour bleu, orange pour orange, white pour blanc, black pour noir, red pour rouge, etc.

Exemple :

color: orange;

Après, libre à vous de choisir ce que vous préférez utiliser. Le but, c’est que cela vous soit parlant.

Comme on vient de dire, les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

La spécification CSS de niveau 1 n’acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
La spécification CSS de niveau 2 a ajouté le mot-clé orange.
Depuis le début des couleurs CSS, les navigateurs ont pris en charge d’autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
La spécification CSS de niveau a ajouté la couleur rebeccapurple en l’honneur d’Eric Meyer.

Voici quelques inconvénients liés aux mots-clés :

En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d’autres couleurs à l’arrivée. Ces mots-clés ne doivent être utilisés qu’avec SVG ou CSS.
Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
Certains mots-clés désignent la même couleur :
- aqua / cyan
- fuchsia / magenta
- darkgray / darkgrey
- darkslategray / darkslategrey
- dimgray / dimgrey
- lightgray / lightgrey
- lightslategray / lightslategrey
- gray / grey
- slategray / slategrey
Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.

Spécification	Couleur	Mot-clé	Valeurs exprimées en hexadécimal RGB
CSS Level 1		`black`	`#000000`
	`silver`	`#c0c0c0`
	`gray`	`#808080`
	`white`	`#ffffff`
	`maroon`	`#800000`
	`red`	`#ff0000`
	`purple`	`#800080`
	`fuchsia`	`#ff00ff`
	`green`	`#008000`
	`lime`	`#00ff00`
	`olive`	`#808000`
	`yellow`	`#ffff00`
	`navy`	`#000080`
	`blue`	`#0000ff`
	`teal`	`#008080`
	`aqua`	`#00ffff`
CSS Level 2 (Revision 1)		`orange`	`#ffa500`
CSS Color Module Level 3		`aliceblue`	`#f0f8ff`
	`antiquewhite`	`#faebd7`
	`aquamarine`	`#7fffd4`
	`azure`	`#f0ffff`
	`beige`	`#f5f5dc`
	`bisque`	`#ffe4c4`
	`blanchedalmond`	`#ffebcd`
	`blueviolet`	`#8a2be2`
	`brown`	`#a52a2a`
	`burlywood`	`#deb887`
	`cadetblue`	`#5f9ea0`
	`chartreuse`	`#7fff00`
	`chocolate`	`#d2691e`
	`coral`	`#ff7f50`
	`cornflowerblue`	`#6495ed`
	`cornsilk`	`#fff8dc`
	`crimson`	`#dc143c`
	`cyan` (synonyme de `aqua`)	`#00ffff`
	`darkblue`	`#00008b`
	`darkcyan`	`#008b8b`
	`darkgoldenrod`	`#b8860b`
	`darkgray`	`#a9a9a9`
	`darkgreen`	`#006400`
	`darkgrey`	`#a9a9a9`
	`darkkhaki`	`#bdb76b`
	`darkmagenta`	`#8b008b`
	`darkolivegreen`	`#556b2f`
	`darkorange`	`#ff8c00`
	`darkorchid`	`#9932cc`
	`darkred`	`#8b0000`
	`darksalmon`	`#e9967a`
	`darkseagreen`	`#8fbc8f`
	`darkslateblue`	`#483d8b`
	`darkslategray`	`#2f4f4f`
	`darkslategrey`	`#2f4f4f`
	`darkturquoise`	`#00ced1`
	`darkviolet`	`#9400d3`
	`deeppink`	`#ff1493`
	`deepskyblue`	`#00bfff`
	`dimgray`	`#696969`
	`dimgrey`	`#696969`
	`dodgerblue`	`#1e90ff`
	`firebrick`	`#b22222`
	`floralwhite`	`#fffaf0`
	`forestgreen`	`#228b22`
	`gainsboro`	`#dcdcdc`
	`ghostwhite`	`#f8f8ff`
	`gold`	`#ffd700`
	`goldenrod`	`#daa520`
	`greenyellow`	`#adff2f`
	`grey`	`#808080`
	`honeydew`	`#f0fff0`
	`hotpink`	`#ff69b4`
	`indianred`	`#cd5c5c`
	`indigo`	`#4b0082`
	`ivory`	`#fffff0`
	`khaki`	`#f0e68c`
	`lavender`	`#e6e6fa`
	`lavenderblush`	`#fff0f5`
	`lawngreen`	`#7cfc00`
	`lemonchiffon`	`#fffacd`
	`lightblue`	`#add8e6`
	`lightcoral`	`#f08080`
	`lightcyan`	`#e0ffff`
	`lightgoldenrodyellow`	`#fafad2`
	`lightgray`	`#d3d3d3`
	`lightgreen`	`#90ee90`
	`lightgrey`	`#d3d3d3`
	`lightpink`	`#ffb6c1`
	`lightsalmon`	`#ffa07a`
	`lightseagreen`	`#20b2aa`
	`lightskyblue`	`#87cefa`
	`lightslategray`	`#778899`
	`lightslategrey`	`#778899`
	`lightsteelblue`	`#b0c4de`
	`lightyellow`	`#ffffe0`
	`limegreen`	`#32cd32`
	`linen`	`#faf0e6`
	`magenta` (synonyme de `fuchsia`)	`#ff00ff`
	`mediumaquamarine`	`#66cdaa`
	`mediumblue`	`#0000cd`
	`mediumorchid`	`#ba55d3`
	`mediumpurple`	`#9370db`
	`mediumseagreen`	`#3cb371`
	`mediumslateblue`	`#7b68ee`
	`mediumspringgreen`	`#00fa9a`
	`mediumturquoise`	`#48d1cc`
	`mediumvioletred`	`#c71585`
	`midnightblue`	`#191970`
	`mintcream`	`#f5fffa`
	`mistyrose`	`#ffe4e1`
	`moccasin`	`#ffe4b5`
	`navajowhite`	`#ffdead`
	`oldlace`	`#fdf5e6`
	`olivedrab`	`#6b8e23`
	`orangered`	`#ff4500`
	`orchid`	`#da70d6`
	`palegoldenrod`	`#eee8aa`
	`palegreen`	`#98fb98`
	`paleturquoise`	`#afeeee`
	`palevioletred`	`#db7093`
	`papayawhip`	`#ffefd5`
	`peachpuff`	`#ffdab9`
	`peru`	`#cd853f`
	`pink`	`#ffc0cb`
	`plum`	`#dda0dd`
	`powderblue`	`#b0e0e6`
	`rosybrown`	`#bc8f8f`
	`royalblue`	`#4169e1`
	`saddlebrown`	`#8b4513`
	`salmon`	`#fa8072`
	`sandybrown`	`#f4a460`
	`seagreen`	`#2e8b57`
	`seashell`	`#fff5ee`
	`sienna`	`#a0522d`
	`skyblue`	`#87ceeb`
	`slateblue`	`#6a5acd`
	`slategray`	`#708090`
	`slategrey`	`#708090`
	`snow`	`#fffafa`
	`springgreen`	`#00ff7f`
	`steelblue`	`#4682b4`
	`tan`	`#d2b48c`
	`thistle`	`#d8bfd8`
	`tomato`	`#ff6347`
	`turquoise`	`#40e0d0`
	`violet`	`#ee82ee`
	`wheat`	`#f5deb3`
	`whitesmoke`	`#f5f5f5`
	`yellowgreen`	`#9acd32`
CSS Color Module Level 4		`rebeccapurple`	`#663399`

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

10 février 2020

0 réponses sur "Les couleurs CSS"

Laisser un message Annuler la réponse

Articles récents

Les couleurs CSS

0 réponses sur "Les couleurs CSS"

Laisser un message Annuler la réponse

Articles récents

Étiquettes