La définition d'une couleur pour tout élément d'un document HTML comme le texte ou les fonds, peut s'effectuer de deux manières différentes, soit par l'intermédiaire d'un code alphanumérique comme : "#3300CC", soit par une dénomination de la couleur en anglais, par exemple : "blue".
Dans les feuilles de style, outre les deux méthodes précitées, il est possible d'affecter des couleurs par la formule suivante : "rgb(Valeur rouge, Valeur verte, Valeur bleue)", où chacune des valeurs se situe dans une plage de 0 à 255.
La première solution semble plus absconse voire même impossible si l'on ne dispose pas d'un logiciel disposant d'une sélecteur de couleurs où le choix et l'insertion du code alphanumérique dans le document se fait par un simple clic de souris.
La palette de couleurs contient 16 millions de teintes différentes résultant de la combinaison RVB (Rouge Vert Bleu). Ainsi la sélection d'une couleur peut se faire précisément parmi un vaste choix pratiquement illimité par rapport aux capacités de l'oeil humain dans la distinction des teintes.
D'autre part cette méthode assure au développeur un strict respect de l'exactitude du rendu d'une couleur dans n'importe quel navigateur existant.
La seconde solution consiste à affecter une couleur prédéfinie par son nom en anglais. Toutes les couleurs possédant un nom ne sont pas reconnues systématiquement par l'ensemble des navigateurs et si elles le sont, des erreurs d'interprétations peuvent apparaître faussant leur rendu dans un document HTML.
Les seize couleurs de base suivantes sont prises en charge, en principe, correctement par chacun des navigateurs.
Couleur | Nom | Code alphanumérique |
Formule CSS | Rendu |
---|---|---|---|---|
Blanc | white | #FFFFFF | ||
Noir | black | #000000 | rgb(0, 0, 0) | |
Gris | Gray | #808080 | rgb(128, 128, 128) | |
Argent | silver | #C0C0C0 | rgb(192, 192, 192) | |
Bleu | blue | #0000FF | rgb(0, 0, 255) | |
Bleu marine | navy | #000080 | rgb(0, 0, 128) | |
Cyan | cyan | #00FFFF | rgb(0, 255, 255) | |
Cyan foncée | teal | #008080 | rgb(0, 128, 128) | |
Vert | green | #008000 | rgb(0, 128, 0) | |
Vert olive | olive | #808000 | rgb(128, 128, 0) | |
Vert clair | lime | #00FF00 | rgb(0, 255, 0) | |
Lilas | fuschia | #FF00FF | rgb(255, 0, 255) | |
Pourpre | purple | #800080 | rgb(128, 0, 128) | |
Rouge | red | #FF0000 | rgb(255, 0, 0) | |
Marron | maroon | #800000 | rgb(128, 0, 0) | |
Jaune | yellow | #FFFF00 | rgb(255, 255, 0) |
Plus d'une centaine de couleurs prédéfinies permettent en théorie de se passer des codes alphanumériques, mais leur utilisation se révèle totalement aléatoire selon les navigateurs.
La meilleur solution est incontestablement le codage alphanumérique des couleurs pouvant être récupéré par l'intermédiaire d'un sélecteur.
Liste des couleurs personnaliséesIdentifiant | Code | Rendu |
---|---|---|
aliceblue | #F0F8FF | |
antiquewhite | #FAEBD7 | |
aqua | #00FFFF | |
aquamarine | #7FFFD4 | |
azure | #F0FFFF | |
beige | #F5F5DC | |
bisque | #FFE4C4 | |
black | #000000 | |
blanchedalmond | #FFEBCD | |
blue | #0000FF | |
blueviolet | #8A2BE2 | |
brown | #A52A2A | |
burlywood | #DEB887 | |
cadetblue | #5F9EA0 | |
chartreuse | #7FFF00 | |
chocolate | #D2691E | |
coral | #FF7F50 | |
cornflowerblue | #6495ED | |
cornsilk | #FFF8DC | |
crimson | #DC143C | |
cyan | #00FFFF | |
darkblue | #00008B | |
darkcyan | #008B8B | |
darkgoldenrod | #B8860B | |
darkgray | #A9A9A9 | |
darkgreen | #006400 | |
darkkhaki | #BDB76B | |
darkmagenta | #8B008B | |
darkolivegreen | #556B2F | |
darkorange | #FF8C00 | |
darkorchid | #9932CC | |
darkred | #8B0000 | |
darksalmon | #E9967A | |
darkseagreen | #8FBC8F | |
darkslateblue | #483D8B | |
darkslategray | #2F4F4F | |
darkturquoise | #00CED1 | |
darkviolet | #9400D3 | |
deeppink | #FF1493 | |
deepskyblue | #00BFFF | |
dimgray | #696969 | |
dodgerblue | #1E90FF | |
firebrick | #B22222 | |
floralwhite | #FFFAF0 | |
forestgreen | #228B22 | |
gainsboro | #DCDCDC | |
ghostwhite | #F8F8FF | |
gold | #FFD700 | |
goldenrod | #DAA520 | |
gray | #808080 | |
green | #008000 | |
greenyellow | #ADFF2F | |
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 | |
lightpink | #FFB6C1 | |
lightsalmon | #FFA07A | |
lightseagreen | #20B2AA | |
lightskyblue | #87CEFA | |
lightslateblue | #8470FF | |
lightslategray | #778899 | |
lightsteelblue | #B0C4DE | |
lightyellow | #FFFFE0 | |
lime | #00FF00 | |
limegreen | #32CD32 | |
linen | #FAF0E6 | |
magenta | #FF00FF | |
maroon | #800000 | |
mediumaquamarine | #66CDAA | |
mediumblue | #0000CD | |
mediumorchid | #BA55D3 | |
mediumpurple | #9370D8 | |
mediumseagreen | #3CB371 | |
mediumslateblue | #7B68EE | |
mediumspringgreen | #00FA9A | |
mediumturquoise | #48D1CC | |
mediumvioletred | #C71585 | |
midnightblue | #191970 | |
mintcream | #F5FFFA | |
mistyrose | #FFE4E1 | |
moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | |
navy | #000080 | |
oldlace | #FDF5E6 | |
olive | #808000 | |
olivedrab | #6B8E23 | |
orange | #FFA500 | |
orangered | #FF4500 | |
orchid | #DA70D6 | |
palegoldenrod | #EEE8AA | |
palegreen | #98FB98 | |
paleturquoise | #AFEEEE | |
palevioletred | #D87093 | |
papayawhip | #FFEFD5 | |
peachpuff | #FFDAB9 | |
peru | #CD853F | |
pink | #FFC0CB | |
plum | #DDA0DD | |
powderblue | #B0E0E6 | |
purple | #800080 | |
red | #FF0000 | |
rosybrown | #BC8F8F | |
royalblue | #4169E1 | |
saddlebrown | #8B4513 | |
salmon | #FA8072 | |
sandybrown | #F4A460 | |
seagreen | #2E8B57 | |
seashell | #FFF5EE | |
sienna | #A0522D | |
silver | #C0C0C0 | |
skyblue | #87CEEB | |
slateblue | #6A5ACD | |
slategray | #708090 | |
snow | #FFFAFA | |
springgreen | #00FF7F | |
steelblue | #4682B4 | |
tan | #D2B48C | |
teal | #008080 | |
thistle | #D8BFD8 | |
tomato | #FF6347 | |
turquoise | #40E0D0 | |
violet | #EE82EE | |
violetred | #D02090 | |
wheat | #F5DEB3 | |
white | #FFFFFF | |
whitesmoke | #F5F5F5 | |
yellow | #FFFF00 | |
yellowgreen | #9ACD32 |