Couleurs Web
Les couleurs Web sont les couleurs utilisées pour afficher les pages Web sur le World Wide Web , ainsi que les méthodes de description et de spécification de ces couleurs. Les couleurs peuvent être spécifiées sous la forme d’un triplet RVB ou au format hexadécimal (un triplet hexadécimal ) ou selon leurs noms anglais courants dans certains cas. Un Outil de couleur ou un autre logiciel graphique est souvent utilisé pour générer des valeurs de couleur. Dans certaines utilisations, les codes de couleur hexadécimaux sont spécifiés avec une notation utilisant un signe dièse (#). [1] [2]Une couleur est spécifiée en fonction de l’intensité de ses composantes rouge, verte et bleue, chacune représentée par huit bits . Ainsi, 24 bits sont utilisés pour spécifier une couleur Web dans la gamme sRGB et 16 777 216 couleurs peuvent être ainsi spécifiées.
Les couleurs en dehors de la gamme sRGB peuvent être spécifiées dans les Feuilles de style en cascade en rendant une ou plusieurs des composantes rouge, verte et bleue négatives ou supérieures à 100 %, de sorte que l’espace colorimétrique est théoriquement une extrapolation illimitée de sRGB similaire à scRGB . [3] Spécifier une couleur non sRGB de cette manière nécessite l’appel de la fonction RGB(). C’est impossible avec la syntaxe hexadécimale (et donc impossible dans les anciens documents HTML qui n’utilisent pas CSS).
Les premières versions de Mosaic et Netscape Navigator utilisaient les noms de couleurs X11 comme base pour leurs listes de couleurs, car les deux ont commencé comme des applications X Window System . Les couleurs Web ont une définition colorimétrique sans ambiguïté, sRGB , qui relie les chromaticités d’un ensemble de luminophores particulier , une courbe de transfert donnée, un point blanc adaptatif et des conditions de visualisation. [4] Celles-ci ont été choisies pour être similaires à de nombreux moniteurs et conditions de visualisation du monde réel, afin de permettre au rendu d’être assez proche des valeurs spécifiées même sans gestion des couleurs . Agents utilisateursvarient dans la fidélité avec laquelle ils représentent les couleurs spécifiées. Les agents utilisateurs plus avancés utilisent la gestion des couleurs pour fournir une meilleure fidélité des couleurs ; ceci est particulièrement important pour les applications Web-to-print .
Triplet hexadécimal
Un triplet hexadécimal est un nombre hexadécimal à six chiffres et trois octets utilisé dans HTML , CSS , SVG et d’autres applications informatiques pour représenter les couleurs. Les octets représentent les composants rouge, vert et bleu de la couleur. Un octet représente un nombre compris entre 00 et FF (en notation hexadécimale) ou entre 0 et 255 en notation décimale. Cela représente la plus petite (0) à la plus grande (255) intensité de chacune des composantes de couleur. Ainsi, les couleurs Web spécifient les couleurs dans le jeu de couleurs RVB 24 bits . Le triplet hexadécimal est formé en concaténant trois octets en notation hexadécimale, dans l’ordre suivant :
- Octet 1 : valeur rouge (type de couleur rouge)
- Octet 2 : valeur verte (type de couleur vert)
- Octet 3 : valeur bleu (type de couleur bleu)
Par exemple, considérez la couleur où les valeurs rouge/vert/bleu sont des nombres décimaux : rouge=36, vert=104, bleu=160 (une couleur Gris-bleu). Les nombres décimaux 36, 104 et 160 sont équivalents aux nombres hexadécimaux 24, 68 et A0 respectivement. Le triplet hexadécimal est obtenu en concaténant les six chiffres hexadécimaux ensemble, 2468A0 dans cet exemple.
Si l’une des trois valeurs de couleur est inférieure à 10 hexadécimal (16 décimal), elle doit être représentée par un zéro non significatif afin que le triplet ait toujours exactement six chiffres. Par exemple, le triplet décimal 4, 8, 16 serait représenté par les chiffres hexadécimaux 04, 08, 10, formant le triplet hexadécimal 040810.
Le nombre de couleurs pouvant être représentées par ce système est 16 6 ou 256 3 ou 2 24 = 16 777 216.
Forme hexadécimale abrégée
Une forme abrégée à trois chiffres (hexadécimaux) est utilisée. [5] Étendre ce formulaire au formulaire à six chiffres est aussi simple que de doubler chaque chiffre : 09C devient 0099CC comme présenté dans l’ exemple CSS suivant :
. trois chiffres { couleur : #09C ; } . six chiffres { couleur : #0099CC ; } /* même couleur que ci-dessus */
Cette forme abrégée réduit la palette à 4 096 couleurs, soit l’équivalent d’une couleur 12 bits par opposition à une couleur 24 bits en utilisant l’ensemble de la forme à six chiffres (16 777 216 couleurs). Cette limitation est suffisante pour de nombreux documents textuels.
Conversion RVB en hexadécimal
Les valeurs RVB sont généralement comprises entre 0 et 255 ; si elles sont comprises entre 0 et 1, les valeurs sont multipliées par 255 avant la conversion. Ce nombre divisé par seize (division entière ; en ignorant tout reste) donne le premier chiffre hexadécimal (entre 0 et F, où les lettres A à F représentent les nombres 10 à 15. Voir hexadécimal pour plus de détails). Le reste donne le deuxième chiffre hexadécimal. Par exemple, la valeur RVB 201 se divise en 12 groupes de 16, donc le premier chiffre est C. Un reste de neuf donne le nombre hexadécimal C9. Ce processus est répété pour chacune des trois valeurs de couleur.
La conversion entre les bases numériques est une caractéristique commune des calculatrices, y compris les modèles portables et les calculatrices logicielles fournies avec la plupart des systèmes d’exploitation modernes . Des outils Web spécialement conçus pour convertir les valeurs de couleur sont également disponibles.
Noms de couleurs HTML
Les spécifications récentes du W3C sur les noms de couleurs font la distinction entre les couleurs de base et les couleurs étendues . [6] En HTML et XHTML, les couleurs peuvent être utilisées pour le texte, la couleur d’arrière-plan, les bordures de cadre, les tableaux et les cellules de tableau individuelles. [7]
Couleurs de base
Les couleurs de base sont 16 couleurs définies dans la spécification HTML 4.01, ratifiée en 1999, [8] comme suit (les noms sont définis dans ce contexte pour être insensibles à la casse) :
| Nom | Hex (RVB) |
Rouge (RVB) |
Vert (RVB) |
Bleu (RVB) |
Teinte (HSL/HSV) |
samedi. (HSL) |
Léger (HSL) |
samedi. (HSV) |
Valeur (HSV) |
Numéro CGA (nom) ; alias |
|---|---|---|---|---|---|---|---|---|---|---|
| Blanc | #FFFFFF | 100% | 100% | 100% | 0 ° | 0% | 100% | 0% | 100% | 15 (blanc) |
| Argent | #C0C0C0 | 75% | 75% | 75% | 0 ° | 0% | 75% | 0% | 75% | 07 (Gris clair) |
| Gris | #808080 | 50% | 50% | 50% | 0 ° | 0% | 50% | 0% | 50% | 08 (Gris foncé) |
| Le noir | #000000 | 0% | 0% | 0% | 0 ° | 0% | 0% | 0% | 0% | 00 (noir) |
| Rouge | #FF0000 | 100% | 0% | 0% | 0 ° | 100% | 50% | 100% | 100% | 12 (haut rouge) |
| Bordeaux | #800000 | 50% | 0% | 0% | 0 ° | 100% | 25% | 100% | 50% | 04 (rouge bas) |
| Jaune | #FFFF00 | 100% | 100% | 0% | 60 ° | 100% | 50% | 100% | 100% | 14 (jaune) |
| olive | #808000 | 50% | 50% | 0% | 60 ° | 100% | 25% | 100% | 50% | 06 (marron) |
| Chaux | #00FF00 | 0% | 100% | 0% | 120 ° | 100% | 50% | 100% | 100% | 10 (vert haut); vert |
| Vert | #008000 | 0% | 50% | 0% | 120 ° | 100% | 25% | 100% | 50% | 02 (vert bas) |
| Aqua | #00FFFF | 0% | 100% | 100% | 180 ° | 100% | 50% | 100% | 100% | 11 (cyan élevé); cyan |
| Sarcelle | #008080 | 0% | 50% | 50% | 180 ° | 100% | 25% | 100% | 50% | 03 (faible cyan) |
| Bleu | #0000FF | 0% | 0% | 100% | 240 ° | 100% | 50% | 100% | 100% | 09 (haut bleu) |
| Marine | #000080 | 0% | 0% | 50% | 240 ° | 100% | 25% | 100% | 50% | 01 (bleu faible) |
| Fuchsia | #FF00FF | 100% | 0% | 100% | 300 ° | 100% | 50% | 100% | 100% | 13 (fort magenta); magenta |
| Violet | #800080 | 50% | 0% | 50% | 300 ° | 100% | 25% | 100% | 50% | 05 (magenta bas) |
Ces 16 couleurs ont été étiquetées sRGB et incluses dans la spécification HTML 3.0, qui indiquait qu’elles étaient “les 16 couleurs standard prises en charge avec la palette Windows VGA “. [9]
Couleurs étendues
Version SVG des noms de couleurs X11 
Couleurs nommées SVG1.1 avec codes hexa/déc et HSL sRGB, à une résolution UHD (4K)
Les couleurs étendues sont le résultat de la fusion des spécifications des interfaces utilisateur HTML 4.01, CSS 2.0, SVG 1.0 et CSS3 (CSS3 UI). [6]
Plusieurs couleurs sont définies par les navigateurs web . Un navigateur particulier peut ne pas reconnaître toutes ces couleurs, mais depuis 2005, tous les navigateurs graphiques modernes à usage général prennent en charge la liste complète des couleurs. La plupart de ces couleurs proviennent de la liste des noms de couleurs X11 distribuée avec le système X Window . Ces couleurs ont été standardisées par SVG 1.0 et sont acceptées par les agents utilisateurs SVG Full . Ils ne font pas partie de SVG Tiny .
La Liste des couleurs fournies avec le produit X11 varie selon les implémentations et entre en conflit avec certains des noms HTML tels que le vert. Les couleurs X11 sont définies comme RVB simples (donc, pas d’espace colorimétrique particulier), plutôt que sRGB . Cela signifie que la Liste des couleurs trouvée dans X11 (par exemple, dans /usr/lib/X11/rgb.txt) ne doit pas être directement utilisée pour choisir des couleurs pour le Web. [dix]
La liste des “couleurs X11” Web de la spécification CSS3, ainsi que leurs équivalents hexadécimaux et décimaux, est présentée ci-dessous. Comparez les listes alphabétiques des normes W3C. Cela inclut les synonymes courants : aqua (nom standard HTML4/CSS 1.0) et cyan (nom sRVB commun), magenta (nom sRVB commun) et fuchsia (nom standard HTML4/CSS 1.0), Gris (nom standard HTML4/CSS 1.0) et Gris. [11] [12]
| Nom HTML | RVB | |
|---|---|---|
| Hexagone | Décimal | |
| Couleurs roses | ||
| MoyenVioletRouge | C7 15 85 | 199 21 133 |
| Rose profond | FF 14 93 | 255 20 147 |
| PâleVioletRouge | DB 70 93 | 219 112 147 |
| Rose vif | FF 69 B4 | 255 105 180 |
| Rose clair | FF B6 C1 | 255 182 193 |
| Rose | FF C0 CB | 255 192 203 |
| Couleurs rouges | ||
| Rouge foncé | 8B 00 00 | 139 0 0 |
| Rouge | FF 00 00 | 255 0 0 |
| Brique réfractaire | B2 22 22 | 178 34 34 |
| cramoisi | CC 14 3C | 220 20 60 |
| IndienRouge | CD 5C 5C | 205 92 92 |
| Corail clair | F0 80 80 | 240 128 128 |
| Saumon | FA 80 72 | 250 128 114 |
| Saumon foncé | E9 96 7A | 233 150 122 |
| saumon clair | FF A0 7A | 255 160 122 |
| Couleurs oranges | ||
| Rouge-orange | 45 00 FF | 255 69 0 |
| Tomate | FF 63 47 | 255 99 71 |
| Orange sombre | FF 8C 00 | 255 140 0 |
| corail | FF 7F 50 | 255 127 80 |
| Orange | FF A5 00 | 255 165 0 |
| Couleurs jaunes | ||
| Kaki foncé | BD B7 6B | 189 183 107 |
| Or | FF D7 00 | 255 215 0 |
| Kaki | F0 E6 8C | 240 230 140 |
| PeachPuff | FF DA B9 | 255 218 185 |
| Jaune | FF FF 00 | 255 255 0 |
| Verge d’or pâle | EE E8 AA | 238 232 170 |
| Mocassin | FF E4 B5 | 255 228 181 |
| Papaye Fouet | FF EF D5 | 255 239 213 |
| LumièreGoldenrodJaune | FA FA D2 | 250 250 210 |
| CitronChiffon | FF FA CD | 255 250 205 |
| Jaune clair | FF FF E0 | 255 255 224 |
| Couleurs marron | ||
| Bordeaux | 80 00 00 | 128 0 0 |
| Brun | A5 2A 2A | 165 42 42 |
| SelleMarron | 8B 45 13 | 139 69 19 |
| Terre de sienne | A0 52 2D | 160 82 45 |
| Chocolat | D2 69 1E | 210 105 30 |
| SombreGoldenrod | B8 86 0B | 184 134 11 |
| Pérou | CD 85 3F | 205 133 63 |
| RosyBrown | BC 8F 8F | 188 143 143 |
| Verge d’or | DA A5 20 | 218 165 32 |
| SandyBrown | F4 A4 60 | 244 164 96 |
| bronzer | D2 B4 8C | 210 180 140 |
| Bois bohu | DE B8 87 | 222 184 135 |
| Du blé | F5 DE B3 | 245 222 179 |
| NavajoBlanc | FF DE ANNONCE | 255 222 173 |
| Bisque | FF E4 C4 | 255 228 196 |
| BlanchiAmande | FF EB CD | 255 235 205 |
| Soie de maïs | FF F8 CC | 255 248 220 |
| Nom HTML | RVB | |
| Hexagone | Décimal | |
| Couleurs vertes | ||
| Vert foncé | 00 64 00 | 0 100 0 |
| Vert | 00 80 00 | 0 128 0 |
| SombreOliveVert | 55 6B 2F | 85 107 47 |
| Forêt verte | 22 8B 22 | 34 139 34 |
| SeaGreen | 2E 8B 57 | 46 139 87 |
| olive | 80 80 00 | 128 128 0 |
| OliveDrab | 6B 8E 23 | 107 142 35 |
| MediumSeaGreen | 3C B3 71 | 60 179 113 |
| Vert citron | 32 CD 32 | 50 205 50 |
| Chaux | 00 FF 00 | 0 255 0 |
| Vert printanier | 00 FF 7F | 0 255 127 |
| MediumSpringGreen | 00 FA 9A | 0 250 154 |
| DarkSeaGreen | 8F BC 8F | 143 188 143 |
| Aigue-marine moyenne | 66 CD AA | 102 205 170 |
| Vert jaunâtre | 9A CD 32 | 154 205 50 |
| PelouseVert | 7C FC 00 | 124 252 0 |
| Chartreuse | 7F FF 00 | 127 255 0 |
| Vert clair | 90 EE 90 | 144 238 144 |
| Vert jaune | AD FF 2F | 173 255 47 |
| Vert pâle | 98 FB 98 | 152 251 152 |
| Couleurs cyan | ||
| Sarcelle | 00 80 80 | 0 128 128 |
| DarkCyan | 00 8B 8B | 0 139 139 |
| LumièreMerVert | 20 B2 AA | 32 178 170 |
| CadetBleu | 5F 9E A0 | 95 158 160 |
| DarkTurquoise | 00 CE D1 | 0 206 209 |
| Moyen Turquoise | 48 D1 CC | 72 209 204 |
| Turquoise | 40 E0 D0 | 64 224 208 |
| Aqua | 00 FF FF | 0 255 255 |
| cyan | 00 FF FF | 0 255 255 |
| Bleu vert | 7F FF D4 | 127 255 212 |
| Turquoise pâle | AF EE EE | 175 238 238 |
| Cyan clair | E0 FF FF | 224 255 255 |
| Couleurs bleues | ||
| Marine | 00 00 80 | 0 0 128 |
| Bleu foncé | 00 00 8B | 0 0 139 |
| Bleu moyen | 00 00 CD | 0 0 205 |
| Bleu | 00 00 FF | 0 0 255 |
| Bleu nuit | 19 19 70 | 25 25 112 |
| Bleu royal | 41 69 E1 | 65 105 225 |
| AcierBleu | 46 82 B4 | 70 130 180 |
| DodgerBleu | 1E 90 FF | 30 144 255 |
| DeepSkyBlue | 00 BF FF | 0 191 255 |
| Bleuet | 64 95 ÉD | 100 149 237 |
| Bleu ciel | 87 EC BE | 135 206 235 |
| LumièreCielBleu | 87 CE FA | 135 206 250 |
| LumièreAcierBleu | B0 C4 DE | 176 196 222 |
| Bleu clair | AD D8 E6 | 173 216 230 |
| Poudre bleue | B0 E0 E6 | 176 224 230 |
| Nom HTML | RVB | |
| Hexagone | Décimal | |
| Couleurs violet, violet et magenta | ||
| Indigo | 4B 00 82 | 75 0 130 |
| Violet | 80 00 80 | 128 0 128 |
| DarkMagenta | 8B 00 8B | 139 0 139 |
| DarkViolet | 94 00 D3 | 148 0 211 |
| SombreArdoiseBleu | 48 3D 8B | 72 61 139 |
| BleuViolet | 8A 2B E2 | 138 43 226 |
| SombreOrchidée | 99 32 CC | 153 50 204 |
| Fuchsia | FF 00 FF | 255 0 255 |
| Magenta | FF 00 FF | 255 0 255 |
| ArdoiseBleu | 6A 5A CD | 106 90 205 |
| MediumArdoiseBleu | 7B 68 EE | 123 104 238 |
| Orchidée Moyenne | BA 55 D3 | 186 85 211 |
| Violet moyen | 93 70 DB | 147 112 219 |
| Orchidée | DA 70 D6 | 218 112 214 |
| Violet | EE 82 EE | 238 130 238 |
| Prune | JJ A0 JJ | 221 160 221 |
| Chardon | D8 BF D8 | 216 191 216 |
| Lavande | E6 E6 FA | 230 230 250 |
| Couleurs blanches | ||
| MistyRose | FF E4 E1 | 255 228 225 |
| Blanc antique | FA EB D7 | 250 235 215 |
| Lin | FA F0 E6 | 250 240 230 |
| Beige | F5 F5 CC | 245 245 220 |
| Fumée blanche | F5 F5 F5 | 245 245 245 |
| LavandeBlush | FF F0 F5 | 255 240 245 |
| VieuxDentelle | FD F5 E6 | 253 245 230 |
| AliceBleu | F0 F8 FF | 240 248 255 |
| Coquillage | FF F5 EE | 255 245 238 |
| FantômeBlanc | F8 F8 FF | 248 248 255 |
| Miellat | F0 FF F0 | 240 255 240 |
| FloralBlanc | FF FA F0 | 255 250 240 |
| Azur | F0 FF FF | 240 255 255 |
| MentheCrème | F5 FF FA | 245 255 250 |
| Neiger | FA FA FA | 255 250 250 |
| Ivoire | FF FF F0 | 255 255 240 |
| Blanc | FF FF FF | 255 255 255 |
| Coloris Gris et noir | ||
| Le noir | 00 00 00 | 0 0 0 |
| DarkSlateGray | 2F 4F 4F | 47 79 79 |
| DimGray | 69 69 69 | 105 105 105 |
| Gris ardoise | 70 80 90 | 112 128 144 |
| Gris | 80 80 80 | 128 128 128 |
| GrisArdoise Clair | 77 88 99 | 119 136 153 |
| Gris foncé | A9 A9 A9 | 169 169 169 |
| Argent | C0 C0 C0 | 192 192 192 |
| Gris clair | D3 D3 D3 | 211 211 211 |
| Gainsboro | CC CC CC | 220 220 220 |
Couleurs CSS
La spécification Cascading Style Sheets définit le même nombre de couleurs nommées que la spécification HTML 4, à savoir les 16 couleurs html et 124 couleurs de la liste de couleurs Netscape X11 pour un total de 140 noms qui ont été reconnus par Internet Explorer (IE) 3.0 et Navigateur Netscape 3.0. [13] Blooberry.com note qu’Opera 2.1 et Safari 1 incluaient également la liste étendue de Netscape de 140 noms de couleurs, mais ont découvert plus tard 14 noms non inclus avec Opera 3.5 sur Windows 98. [14]
Dans CSS 2.1, la couleur ‘orange’ (l’une des 140) a été ajoutée à la section avec les 16 couleurs HTML4 comme 17ème couleur. [15] La spécification CSS3.0 n’incluait pas l’ orange dans la section “Mots-clés de couleur HTML4”, qui a été renommée “Mots-clés de couleur de base”. [16] Dans la même référence, la section « Mots-clés de couleur SVG » a été renommée « Mots-clés de couleur étendus », après avoir commencé en tant que « Mots-clés de couleur X11 » dans un brouillon de travail antérieur. [17] L’ébauche de travail pour le module de couleur de niveau 4 combine les sections de base et étendues ensemble dans une simple section “Couleurs nommées”. [18]
| Nom | Hex (RVB) |
Rouge (RVB) |
Vert (RVB) |
Bleu (RVB) |
Teinte (HSL/HSV) |
samedi. (HSL) |
Léger (HSL) |
samedi. (HSV) |
Valeur (HSV) |
Alias |
|---|---|---|---|---|---|---|---|---|---|---|
| Orange | #FFA500 | 100% | 65% | 0% | 39 ° | 100% | 50% | 100% | 100% |
CSS 2, SVG et CSS 2.1 permettent aux auteurs Web d’utiliser les couleurs système , qui sont des noms de couleurs dont les valeurs sont extraites du système d’exploitation , en choisissant la couleur du texte en surbrillance du système d’exploitation ou la couleur d’arrière-plan des contrôles d’info-bulle. Cela permet aux auteurs Web de personnaliser leur contenu en fonction du système d’exploitation de l’agent utilisateur. [19] Le module de couleur CSS3 a déprécié l’utilisation des couleurs du système en faveur de la propriété CSS3 UI System Appearance, [20] [21] qui elle-même a ensuite été supprimée de CSS3. [22]
La spécification CSS3 introduit également les valeurs d’ Espace colorimétrique HSL dans les feuilles de style : [23]
/* Modèle RVB */ p { couleur : #F00 } /* #rgb */ p { couleur : #FF0000 } /* #rrggbb */ p { couleur : rgb ( 255 , 0 , 0 ) } /* nombre entier 0 – 255 */ p { couleur : RVB ( 100 % , 0 % , 0 % ) } /* plage flottante 0,0 % – 100,0 % */ /* RVB avec canal alpha, ajouté à CSS3 */ p { color : rgba ( 255 , 0 , 0 , 0.5 ) } /* 0.5 opacity, semi-transparent */ /* Modèle HSL, ajouté à CSS3 */ p { color : hsl ( 0 , 100 % , 50 % ) } /* red */ p { color : hsl ( 120 , 100 % , 50 % ) } /* green */ p { couleur : hsl ( 120 , 100 % , 25 % ) } /* vert foncé */ p { couleur : hsl( 120 , 100 % , 75 % ) } /* vert clair */ p { couleur : hsl ( 120 , 50 % , 50 % ) } /* vert pastel */ /* Modèle HSL avec canal alpha */ p { color : hsla ( 120 , 100 % , 50 % , 1 ) } /* green */ p { color : hsla ( 120 , 100 % , 50 % , 0.5 ) } /* vert semi-transparent */ p { couleur : hsla ( 120 , 100 % , 50 % , 0.1 ) } /* vert très transparent */
CSS prend également en charge la couleur spéciale transparent, qui représente une valeur alpha de zéro ; par défaut, transparentest rendu en noir nominal invisible : rgba(0, 0, 0, 0). Il a été introduit dans CSS1 mais son champ d’utilisation s’est élargi au fil des versions. [23]
CSS Couleur 4
Le niveau 4 de la spécification CSS Color a introduit plusieurs nouveaux formats de couleur CSS. [24]
Outre de nouvelles façons d’écrire les couleurs, il introduit également le concept de mélange des couleurs dans un espace colorimétrique non sRGB, une première étape vers la résolution d’un problème bien connu dans les dégradés de couleurs . Certaines sections expliquant la théorie des couleurs et les opérations courantes telles que le mappage de gamme sont également ajoutées pour faciliter la mise en œuvre. [24]
Couleur indépendante de l’appareil
CSS Color 4 introduit plusieurs formats différents pour la couleur indépendante de l’appareil qui peuvent afficher l’intégralité de la couleur visible (dans un écran capable), notamment : [25]
- Laboratoire et LCH
- OKLab et OKLCH (préférés à Lab/LCH) [24] : §§9.2–3
- XYZ (D50 ou D65 [par défaut])
Espaces colorimétriques prédéfinis
Un certain nombre d’ espaces RVB avec des gammes plus larges que sRGB sont également introduits via la nouvelle color()fonction : [25]
- Affichage P3
- Prophoto
- REC.2020
- Adobe 1998 RVB
Une variante linéarisée de sRGB est également définie pour le mélange des couleurs. [24]
Autres formats
Le 21 juin 2014, le CSS WG a ajouté la couleur RebeccaPurple au niveau 4 du module Editor’s Draft of the Colors, pour commémorer la fille d’ Eric Meyer , Rebecca, décédée le 7 juin 2014, son sixième anniversaire. [26]
| Nom | Hex (RVB) |
Rouge (RVB) |
Vert (RVB) |
Bleu (RVB) |
Teinte (HSL/HSV) |
samedi. (HSL) |
Léger (HSL) |
samedi. (HSV) |
Valeur (HSV) |
Alias |
|---|---|---|---|---|---|---|---|---|---|---|
| RebeccaPurple | #663399 | 40% | 20% | 60% | 270 ° | 50% | 40% | 67% | 60% |
CSS4 introduit également le modèle de couleur HWB comme alternative à HSL/HSV. [18]
CSS Couleur 5
Le projet de spécification CSS Color 5 [27] introduit une syntaxe pour mélanger et manipuler les couleurs existantes, notamment :
- Une color-mix()fonction pour mélanger les couleurs
- Syntaxe de couleur relative pour manipuler les composants d’une couleur existante
Les espaces colorimétriques personnalisés sont également pris en charge via les profils ICC . Cela permet l’utilisation de CMJN sur les pages Web. [27]
Couleurs sécurisées pour le Web
Au milieu des années 1990, de nombreux écrans ne pouvaient afficher que 256 couleurs. [28] Ceux-ci peuvent être dictés par le matériel ou modifiables par une “table de couleurs”. Lorsqu’une couleur est trouvée (par exemple, dans une image) qui n’est pas disponible, une autre doit être utilisée. Cela peut être fait soit en utilisant la couleur la plus proche, soit en utilisant le tramage .
Il y a eu plusieurs tentatives pour créer une palette de couleurs “standard”. Un ensemble de couleurs était nécessaire qui pouvait être affiché sans tramage sur des écrans 256 couleurs; le nombre 216 a été choisi en partie parce que les systèmes d’exploitation informatiques réservaient habituellement seize à vingt couleurs pour leur propre usage ; il a également été sélectionné car il autorise exactement six nuances équidistantes de rouge, vert et bleu (6 × 6 × 6 = 216), chacune de 00 à FF (y compris les deux limites).
La Liste des couleurs est présentée comme si elle avait des propriétés spéciales qui les rendent insensibles au tramage, mais sur les écrans 256 couleurs, les applications peuvent en fait définir une palette de n’importe quelle sélection de couleurs qu’elles choisissent, tramant le reste. Ces couleurs ont été choisies spécifiquement parce qu’elles correspondaient aux palettes sélectionnées par diverses applications de navigateur. Il n’y avait pas de palettes très différentes utilisées dans différents navigateurs. [ citation nécessaire ]
Les couleurs « Web-safe » avaient un défaut en ce sens que, sur des systèmes tels que X11 où la palette est partagée entre les applications, des cubes de couleurs plus petits (5 × 5 × 5 ou 4 × 4 × 4) étaient alloués par les navigateurs – le « web- les couleurs “sûres” hésiteraient sur de tels systèmes. Différents résultats ont été obtenus en fournissant une image avec une plus grande gamme de couleurs et en permettant au navigateur de quantifier l’espace colorimétrique si nécessaire, plutôt que de subir la perte de qualité d’une double quantification.
Au cours des années 2000, l’utilisation d’écrans 256 couleurs dans les ordinateurs personnels a fortement chuté au profit des écrans 24 bits ( TrueColor ), [29] et l’utilisation de couleurs “sécurisées pour le Web” est tombée en désuétude pratique.
Les couleurs “web-safe” n’ont pas toutes des noms standards, mais chacune peut être spécifiée par un triplet RVB : chaque composante (rouge, vert et bleu) prend l’une des six valeurs du tableau suivant (sur les 256 possibles valeurs disponibles pour chaque composant en couleur 24 bits).
| Clé | Hexagone | Décimal | Fraction |
|---|---|---|---|
| 0 | 00 | 0 | 0 |
| 3 | 33 | 51 | 0,2 |
| 6 | 66 | 102 | 0,4 |
| 9 | 99 | 153 | 0,6 |
| C (12) | CC | 204 | 0,8 |
| F (15) | FF | 255 | 1 |
Le tableau suivant montre toutes les couleurs “sûres pour le Web”. L’un des défauts de la palette sécurisée pour le Web est sa petite gamme de couleurs claires pour les arrière-plans de pages Web, alors que les intensités au bas de la gamme, telles que les deux plus sombres, sont similaires les unes aux autres, ce qui les rend difficiles à distinguer. Les valeurs flanquées de “*” (astérisque) font partie de la “palette vraiment sûre” ; voir Couleurs Web les plus sûres , ci-dessous.
Tableau des couleurs
| *000* | 300 | 600 | 900 | C00 | *F00* |
| *003* | 303 | 603 | 903 | C03 | *F03* |
| 006 | 306 | 606 | 906 | C06 | F06 |
| 009 | 309 | 609 | 909 | C09 | F09 |
| 00C | 30C | 60C | 90C | C0C | F0C |
| *00F* | 30F | 60F | 90F | C0F | *F0F* |
| 030 | 330 | 630 | 930 | C30 | F30 |
| 033 | 333 | 633 | 933 | C33 | F33 |
| 036 | 336 | 636 | 936 | C36 | F36 |
| 039 | 339 | 639 | 939 | C39 | F39 |
| 03C | 33C | 63C | 93C | C3C | F3C |
| 03F | 33F | 63F | 93F | C3F | F3F |
| 060 | 360 | 660 | 960 | C60 | F60 |
| 063 | 363 | 663 | 963 | C63 | F63 |
| 066 | 366 | 666 | 966 | C66 | F66 |
| 069 | 369 | 669 | 969 | C69 | F69 |
| 06C | 36C | 66C | 96C | C6C | F6C |
| 06F | 36F | 66F | 96F | C6F | F6F |
| 090 | 390 | 690 | 990 | C90 | F90 |
| 093 | 393 | 693 | 993 | C93 | F93 |
| 096 | 396 | 696 | 996 | C96 | F96 |
| 099 | 399 | 699 | 999 | C99 | F99 |
| 09C | 39C | 69C | 99C | C9C | F9C |
| 09F | 39F | 69F | 99F | C9F | F9F |
| 0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
| 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
| 0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
| 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
| 0CC | 3CC | 6CC | 9CC | CCC | FAC |
| 0CF | 3CF | 6CF | 9CF | FCC | FCF |
| *0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* |
| 0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* |
| *0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* |
| 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
| *0FC* | *3FC* | 6FC | 9FC | CFC | FFC |
| *0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
Chaque code de couleur répertorié est un raccourci pour la valeur RVB. Par exemple, le code 609 équivaut au code RVB 102-0-153 ou au code HEX #660099 .
Couleurs Web les plus sûres
Les concepteurs ont été encouragés à s’en tenir à ces 216 couleurs “sécurisées pour le Web” dans leurs sites Web, car il y avait beaucoup d’affichages couleur 8 bits lorsque la palette de 216 couleurs a été développée. David Lehn et Hadley Stern ont découvert que seules 22 des 216 couleurs de la palette Web sécurisée sont affichées de manière fiable sans remappage incohérent sur les écrans d’ordinateur 16 bits . Ils ont appelé ces 22 couleurs « la palette vraiment sûre » ; il se compose en grande partie de nuances de vert, de jaune et de bleu. [30] [31]
| R– -GB | 0 | 3 | 6 | 9 | C | F |
|---|---|---|---|---|---|---|
| 00 | *000* | *F00* | ||||
| 03 | *003* | *F03* | ||||
| 06 | ||||||
| 09 | ||||||
| 0C | ||||||
| 0F | *00F* | *F0F* | ||||
| ⋮ | ⋮ | |||||
| F0 | *0F0* | *6F0* | *FF0* | |||
| F3 | *3F3* | *6F3* | *FF3* | |||
| F6 | *0F6* | *3F6* | *CF6* | *FF6* | ||
| F9 | ||||||
| CF | *0FC* | *3FC* | ||||
| FF | *0FF* | *3FF* | *6FF* | *FFF* |
Accessibilité
Sélection de couleur
Certains navigateurs et appareils ne prennent pas en charge les couleurs. Pour ces afficheurs ou utilisateurs aveugles et daltoniens, le contenu Web dépendant des couleurs peut être inutilisable ou difficile à utiliser.
Soit aucune couleur ne doit être spécifiée (pour invoquer les couleurs par défaut du navigateur), soit l’arrière-plan et toutes les couleurs de premier plan (telles que les couleurs du texte brut, des liens non visités, des liens survolés, des liens actifs et des liens visités) doivent être spécifiés pour éviter effets noir sur noir ou blanc sur blanc . [32]
Contraste des couleurs
Les Web Content Accessibility Guidelines recommandent un rapport de contraste d’au moins 4,5:1 entre la luminance relative du texte et sa couleur d’arrière-plan [33] ou d’au moins 3:1 pour un texte de grande taille. Une meilleure accessibilité nécessite des rapports de contraste supérieurs à 7:1.
Cependant, résoudre les problèmes d’accessibilité ne consiste pas simplement à augmenter le rapport de contraste. Comme l’indique un rapport de la Web Accessibility Initiative [34] , les lecteurs dyslexiques sont mieux servis par des rapports de contraste inférieurs au maximum. Les recommandations auxquelles ils se réfèrent de noir cassé (#0A0A0A) sur blanc cassé (#FFFFE5) et noir (#000000) sur crème (#FAFAC8) ont des rapports de contraste de 11,7:1 et 20,3:1 respectivement. Parmi leurs autres paires de couleurs, le marron (#282800) sur vert foncé (#A0A000) a un rapport de contraste de 3,24:1, ce qui est inférieur au WCAGrecommandation, marron foncé (#1E1E00) sur vert clair (#B9B900) a un rapport de contraste de 4,54:1 et bleu (#00007D) sur jaune (#FFFF00) a un rapport de contraste de 11,4:1. Notez que les couleurs nommées dans le rapport utilisent des valeurs de couleur différentes de celles des couleurs Web du même nom.
Voir également
- Espace colorimétrique Adobe RVB
- Espace colorimétrique CIE 1931 XYZ
- Espace colorimétrique CIE L*a*b*
- Outil de couleur
- Liste des palettes de couleurs
- Liste des couleurs
- Liste des couleurs par teinte
- ProPhoto RVB
- Espace colorimétrique RVB
- scRVB
- Espace colorimétrique RVB à large gamme
Références
- ^ Niederst Robbins, Jennifer (février 2006). “Annexe D : Spécification de la couleur”. La conception Web en quelques mots . O’Reilly. p. 830.ISBN _ 978-0-596-00987-8.
- ^ York, Richard. Début CSS , pp. 71–72.
- ^ Pemberton, Steven; Pettit, Brad (7 juin 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (éd.). “Module de couleur CSS niveau 3” . W3C. rubrique 4.2.1. Valeurs de couleur RVB.
- ^ Manuel d’imagerie couleur numérique par Gaurav Sharma. ISBN 0-8493-0900-X
- ^ Pemberton, Steven; Pettit, Brad (7 juin 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (éd.). “4.2.1. Valeurs de couleur RVB” . Module Couleur CSS Niveau 3 . W3C . Récupéré le 19 mars 2013 .
- ^ un b “Le niveau de module de couleur CSS 3” . W3C . Récupéré le 19 juillet 2020 .
- ^ Powell, Thomas A. (2010). HTML & CSS : la référence complète, cinquième édition . New York : McGraw Hill. p. 765.ISBN _ 9780071741705.
- ^ “Section de spécification HTML 4.01 6.5″ Couleurs ” ” . W3.org . Récupéré le 8 juillet 2013 .
- ^ “Spécification HTML 3.2 “L’élément BODY” ” . W3.org . Récupéré le 8 juillet 2013 .
- ^ “Discussion publique sur la liste de diffusion SVG Re : les noms de couleur dans SVG-1.0 sont en conflit avec /usr/lib/X11/rgb.txt ” . Lists.w3.org . Récupéré le 8 juillet 2013 .
- ^ Pemberton, Steven; Pettit, Brad (7 juin 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (éd.). “4.3. Mots clés de couleur étendus” . Module Couleur CSS Niveau 3 . W3C . Récupéré le 19 mars 2013 .
- ^ “W3C TR SVG 1.0, noms de mots-clés de couleur reconnus” . W3.org. 16 août 2011 . Récupéré le 1er février 2019 .
- ^ “Le jeu de couleurs X11” . Récupéré le 6 juillet 2014 .
- ^ Brian Wilson. “Les couleurs en HTML et CSS” . Récupéré le 6 juillet 2014 .
- ^ “Spécification CSS 2.1 : Syntaxe et types de données de base : Couleurs” . 8 septembre 2009 . Récupéré le 21 décembre 2009 .
- ^ “CSS Color Module Level 3 – Proposition de recommandation – 11. Modifications” . 28 octobre 2010 . Récupéré le 6 juillet 2014 .
- ^ “Module de couleur CSS niveau 3 – Brouillon de travail” . 18 avril 2002 . Récupéré le 6 juillet 2014 .
- ^ a b CSS Color Module Level 4 – Brouillon de l’éditeur, 26 juin 2014
- ^ “Interface utilisateur – Couleurs système” . W3.org . Récupéré le 8 juillet 2013 .
- ^ Pemberton, Steven; Pettit, Brad (7 juin 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (éd.). “4.5.1. Couleurs du système CSS2” . Module Couleur CSS Niveau 3 . W3C . Récupéré le 19 mars 2013 .
- ^ “Module d’interface utilisateur de base CSS3, recommandation du candidat W3C 11 mai 2004 : apparence du système” . W3.org . Récupéré le 8 juillet 2013 .
- ^ Çelik, Tantek, éd. (17 janvier 2012). “Liste des changements substantiels” . Module d’interface utilisateur de base CSS niveau 3 . W3C . Récupéré le 19 mars 2013 . L’apparence du système a été supprimée, y compris les valeurs et les propriétés d’apparence, ainsi que les polices système / l’extension du raccourci de la propriété ‘font’.
- ^ un b Pemberton, Steven; Pettit, Brad (7 juin 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (éd.). “4.2.4. Valeurs de couleur HSL” . Module Couleur CSS Niveau 3 . W3C . Récupéré le 19 mars 2013 .
- ^ un bcd ” CSS Color Module Level 4″ . W3.org . Récupéré le 14 mars 2022 .
- ^ un b “Niveau de module de couleur CSS 4 : vue d’ensemble” . www.w3.org . Récupéré le 11 janvier 2022 .
- ^ Glazman, Daniel (21 juin 2014). “Re : [CfC] ajout de ‘rebeccapurple’ au CSS Color Level 4” . Publiez sur une liste de diffusion de style www . W3C . Récupéré le 24 juin 2014 .
- ^ a b Module de couleur CSS niveau 5
- ^ Jenkins, Sue (27 décembre 2012). Webdesign tout-en-un pour les nuls . John Wiley et fils. ISBN 9781118404119.
- ^ “Statistiques d’affichage du navigateur” . W3schools.com . Récupéré le 8 juillet 2013 .
- ^ “Mort de la palette de couleurs Websafe?” . asc.ohio-state.edu . Récupéré le 3 mars 2021 .
- ^ “Référence de couleur Web – HTML avec style | 4 | WebReference” . www.webreference.com . Récupéré le 5 janvier 2016 . [ lien mort ]
- ^ “Si vous choisissez une couleur, choisissez-les toutes” . W3.org . Récupéré le 8 juillet 2013 .
- ^ Directive WCAG 2.0 1.4
- ^ Couleurs optimales pour améliorer la lisibilité pour les personnes dyslexiques
Liens externes
- Valeur de couleur CSS sur MDN Web Docs
- Spécification de couleur CSS2.1
- Les couleurs du web chez Curlie