Couleurs
Les couleurs en HTML peuvent se rédiger de trois manières :
- en écrivant le nom des couleurs en anglais
- en écrivant le code RGB
- en écrivant le code héxadécimal précédé d'un dièse
Les couleurs en anglais
Le nom des couleurs anglaises ne permet pas la variation complète des couleurs que l'on peut employer dans le web, mais il est possible d'écrire leur nom commun, tel que blue, red, green, yellow, pink, white, black. , turquoise, tomato, lightskyblue. J'ai réalisé un tableau en bas de page pour vous aider.
Les couleur en RGB
Les couleurs en web sont définies par un triplet RGB . La valeur de chaque couleur est en valeur allant de 0 à 255. La couleur s'additionne comme trois projecteurs sur une scène de théâtre. Elle se rédige de la manière suivante :
rgb (0,0,0) ------ 0 en rouge, 0 en vert et 0 en bleu, cela donne du noir rgb (255,255,255) ------ 255 en rouge, 255 en vert et 255 en bleu, cela donne du blanc rgb (255,0,0) ------ 255 en rouge, 0 en vert et 0 en bleu, cela donne du rouge
Selon le nombre en rouge, en vert ou en bleu à chaque fois, on obtient toutes les couleurs de la synthèse additive.
Avec la propriété rgba (0,0,255,0.5) j'obtiens un bleu avec une opacité de 50%.
Couleurs héxadécimales
Le triplet héxadécimal est un nombre à 6 chiffres ( de 0 à F : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). On l'emploie notamment en html et css (feuilles de style en cascade). Les octets représentent dans l'ordre : le rouge, le vert et le bleu et possèdent une valeur comprise entre 00 et FF.
Un code hexadécimal possède 6 caractères plus un dièse, le tout collé, par exemple, la couleur rouge vif s'écrit : #FF0000.
| couleur | code hexadécimal | code RVB | couleur | code hexadécimal | code RVB |
|---|---|---|---|---|---|
| white | #FFFFFF | (255, 255, 255) | bisque | #FFE4C4 | (255, 228, 196) |
| ghostwhite | #F8F8FF | (248, 248, 255) | wheat | #F5DEB3 | (245, 222, 179) |
| whitesmoke | #F5F5F5 | (245, 245, 245) | moccasin | #FFE4B5 | (255, 228, 181) |
| snow | #FFFAFA | (255, 250, 250) | peachpuff | #FFDAB9 | (255, 218, 185) |
| azure | #F0FFFF | (240, 255, 255) | mistyrose | #FFE4E1 | (255, 228, 225) |
| honeydew | #F0FFF0 | (240, 255, 240) | pink | #FFC0CB modifier | (255, 192, 203) |
| mintcream | #F5FFFA | (245, 255, 240) | lightpink | #FFB6C1 | (255, 182, 193) |
| lightyellow | #FFFFE0 | (255, 255, 224) | rosybrown | #BC8F8F | (188, 143, 143) |
| floralwhite | #FFFAF0 | (255, 250, 240) | coral | #FF7F50 | (255, 127, 80) |
| ivory | #FFFFF0 | (255, 255, 212) | tomato | #FF6347 | (255, 99, 71) |
| linen | #FAF0E6 | (250, 240, 230) | orangered | #FF3300 | (255, 55, 0) |
| oldlace | #FDF5E6 | (253, 245, 230) | red | #FF0000 | (255, 0, 0) |
| seashell | #FFF5EE | (255, 245, 238) | crimson | #DC143C | (220, 20, 60) |
| lavenderblush | #FFF0F5 | (255, 240, 245) | indianred | #CD5C5C | (205, 92, 92) |
| lavender | #E6E6FA | (230, 230, 250) | firebrick | #B22222 | (178, 34, 34 ) |
| gainsboro | #DCDCDC | (220, 220, 220) | darkred | #8B0000 | (139, 0 , 0) |
| lightgrey | #D3D3D3 | (211, 211 211) | maroon | #800000 | (128, 0, 0) |
| silver | #C0C0C0 | (192,192,192) | brown | #A52A2A | (165, 42,42) |
| darkgray | #A9A9A9 | (169,169,169) | deeppink | #FF1493 | (255, 20, 147) |
| lightslategray | #778899 | (119,136,153) | saddlebrown | #8B4513 | (139, 69, 19) |
| slategray | #708090 | (112,128,144) | sienna | #A0522D | (160, 82, 45) |
| gray | #808080 | (128,128,128) | chocolate | #D2691E | (210, 105, 30) |
| dimgray | #696969 | (105,105,105) | darkorange | #FF8C00 | (255, 140, 0) |
| black | #000000 | (0, 0, 0) | orange | #FFA500 | (255, 165, 0) |
| cornsilk | #FFF8DC | (255, 248, 220) | lightsalmon | #FFA07A | (255, 160, 122) |
| palegoldenrod | #EEE8AA | (238, 232, 170) | darksalmon | #E9967A | (233, 150, 122) |
| khaki | #F0E68C | (240, 230, 140) | salmon | #FA8072 | (250, 128, 114) |
| yellow | #FFFF00 | (255, 255, 0) | sandybrown | #F4A460 | (244, 164, 96) |
| gold | #FFD700 | (240, 215, 0) | navajowhite | #FFDEAD | (255, 222, 173) |
| darkgoldenrod | #B8860B | (184, 134, 11) | blanchedalmond | #FFEBCD | (255, 235, 205) |
| peru | #CD853F | (205, 133, 63) | papayawhip | #FFEFD5 | (255, 239, 213) |
| goldenrod | #DAA520 | (218, 165, 32) | antiquewhite | #FAEBD7 | (250, 235, 215) |
| tan | #D2B48C | (210, 180, 140) | beige | #F5F5DC | (245, 245, 220) |
| burlywood | #DEB887 | (222, 184, 135) | deepskyblue | #00BFFF | (0, 191, 255) |
| darkkhaki | #BDB76B | (189, 183, 107) | lightskyblue | #87CEFA | (135, 206, 2510 |
| chartreuse | #7FFF00 | (127, 255, 0) | lightsteelblue | #B0C4DE | (176, 196, 222) |
| greenyellow | #ADFF2F | (173, 255, 47) | powderblue | #B0E0E6 | (176, 224, 230) |
| lawngreen | #7CFC00 | (124, 252, 0) | skyblue | #87CEEB | (135, 206, 235) |
| lime | #00FF00 | (0, 255, 0) | cornflowerblue | #6495ED | (100, 149, 237) |
| springgreen | #00FF7F | (0, 255, 127) | dodgerblue | #1E90FF | (30, 144, 255) |
| palegreen | #98FB98 | (152, 251, 152) | mediumslateblue | #7B68EE | (123, 104, 238) |
| mediumspringgreen | #00FA9A | (0, 250, 154) | slateblue | #6A5ACD | (106, 90, 205) |
| limegreen | #32CD32 | (50, 205, 50) | royalblue | #4169E1 | (65, 105, 225) |
| mediumseagreen | #3CB371 | (60, 179, 113) | blue | #0000FF | (0, 0, 255) |
| yellowgreen | #9ACD32 | (154,205, 50) | medium blue | #0000CD | (0, 0 , 1205 |
| mediumaquamarine | #66CDAA | (102,205,170) | darkslateblue | #483D8B | (72, 061, 139) |
| darkseagreen | #8FBC8F | (143,188,143) | navy | #000080 | (0, 0 , 128) |
| forestgreen | #228B22 | (34, 139, 34) | darkblue | #00008B | (0, 0 , 139) |
| green | #008000 | (0, 128, 0) | midnightblue | #191970 | (25, 25, 112) |
| seagreen | #2E8B57 | (46,139,87) | indigo | #4B0082 | (75, 0, 130) |
| olive | #808000 | (128,128,0) | blueviolet | #8A2BE2 | (138, 543 226) |
| olivedrab | #6B8E23 | (107, 142, 35) | darkorchid | #9932CC | (153, 50, 204) |
| darkgreen | #006400 | (0, 64, 0) | darkviolet | #9400D3 | (148, 0, 211) |
| darkslategray | #2F4F4F | (47, 79,79) | mediumpurple | #9370DB | (147 112, 219) |
| darkolivegreen | #556B2F | (85, 107, 47) | orchid | #DA70D6 | (218, 112, 214) |
| aquamarine | #7FFFD4 | (127, 255, 212) | mediumorchid | #BA55D3 | (186, 85, 211) |
| steelblue | #4682B4 | (70, 130, 180) | darkmagenta | #8B008B | (139, 0, 139) |
| cyan | #00FFFF | (0, 255, 255) | magenta | #FF00FF | (255, 0, 255) |
| paleturquoise | #AFEEEE | (175 238, 238) | hotpink | #FF69B4 | (255, 105, 180) |
| turquoise | #40E0D0 | (64, 224, 208) | violet | #EE82EE | (238, 130, 238) |
| mediumturquoise | #48D1CC | 72, 209, 204) | thistle | #D8BFD8 | (161, 119, 216) |
| darkturquoise | #00CED1 | (0, 206, 209) | plum | #DDA0DD | (221, 112, 147) |
| lightseagreen | #20B2AA | (32, 178, 170) | palevioletred | #DB7093 | (219, 160, 221) |
| cadetblue | #5F9EA0 | (95, 158, 160) | deeppink | #FF1493 | (255, 20, 147) |
| teal | #008080 | (0, 128, 128) | mediumvioletred | #C71585 | (199, 21, 133) |
| darkcyan | #008B8B | (0, 139, 139) | purple | #800080 | (128, 0, 128) |
Qu'est ce qu'une couleur web?
Lorsque les navigateurs Web ont fait leur apparition , la plupart des ordinateurs n’affichaient que 265 couleurs (8 bits). C’est de cette époque que nous avons hérités les couleurs " sécurisées". Une couleur sécurisée pour le Web est une couleur qui reste toujours la même dans tous les navigateurs, sous Windows, Linux comme sous Macintosh. Par convention, il y a 216 couleurs communes, et toute valeur hexadécimale combinant les paires 00, 33, 66, 99, CC ou FF (correspondant respectivement aux niveaux RVB 0, 51, 102, 153, 204 et 255) représente une couleur sécurisée pour le Web.
Couleurs et accessibilité
L'utilisation de la couleur est soumis à deux règles d'accessibilité selon les normes du WCAG (Web Content Accessibility Guideline):
- Aucune information ne doit être véhiculée par la couleur seulement. Elle ne sera pas perceptible par des personnes utilisant un lecteur écran comme les aveugles, ou les daltoniens. La couleur doit être accompagnée par un autre moyen de véhiculer l'information, qu'il soir graphique, textuel ou structurel.
- La couleur doit présenter un niveau de contraste suffisant avec le texte et l'arrière plan.