Encodage HTML blanc. La couleur dans les styles peut être spécifiée de différentes manières : par valeur hexadécimale, par nom, au format RVB, RGBA, HSL, HSLA. Spécification de la couleur à l'aide de RVB
Les couleurs HTML sont indiquées par six caractères après la barre oblique, par exemple #000000. Ces six symboles représentent les proportions des différentes couleurs (Rouge, Vert, Bleu) dans la couleur finale. Sur l’écran de votre ordinateur, l’image est formée d’un grand nombre de points appelés pixels. Chaque pixel est une petite source de lumière, appelons-la une « lampe de poche », qui à son tour se compose de trois lampes de poche : rouge, verte et bleue. En diminuant ou en augmentant l'intensité de la lueur des lampes de poche colorées individuelles, nous obtenons la couleur souhaitée.
Codes couleurs HTML
Les couleurs en HTML sont représentées par une notation hexadécimale (HEX) de rouge, bleu et vert (RVB).
La plus petite valeur de couleur est 0 (00 hexadécimal). La valeur de couleur la plus élevée est 255 (hex FF).
La valeur de couleur hexadécimale est composée de trois chiffres commençant par le signe #.
Codes couleurs (significations)
Couleur | Code hexadécimal | Code RVB |
---|---|---|
#000000 | RVB (0,0,0) | |
#FF0000 | RVB (255,0,0) | |
#00FF00 | RVB (0,255,0) | |
#0000FF | RVB (0,0,255) | |
#FFFF00 | RVB (255 255,0) | |
#00FFFF | RVB (0,255,255) | |
#FF00FF | RVB (255,0,255) | |
#C0C0C0 | RVB (192 192 192) | |
#FFFFFF | RVB (255 255 255) |
16 millions de nuances
La combinaison du rouge, du bleu et du vert avec des valeurs allant de 0 à 255 pour le pourcentage de chaque couleur donne un total de plus de 16 millions de nuances (256 x 256 x 256).
La plupart des moniteurs modernes sont capables d'afficher au moins 16 384 nuances différentes (les moniteurs LCD sont généralement capables d'afficher 262 mille 16 millions). (mis à jour en octobre 2013) couleurs et les moniteurs CRT peuvent afficher un nombre pratiquement illimité de couleurs).
La table des couleurs ci-dessous montre l'évolution de la proportion de rouge de 0 à 255 avec des valeurs nulles pour le bleu et le vert :
Rouge | Code hexadécimal | Code RVB |
---|---|---|
#000000 | RVB (0,0,0) | |
#080000 | RVB (8,0,0) | |
#100000 | RVB (16,0,0) | |
#180000 | RVB (24,0,0) | |
#200000 | RVB (32,0,0) | |
#280000 | RVB (40,0,0) | |
#300000 | RVB (48,0,0) | |
#380000 | RVB (56,0,0) | |
#400000 | RVB (64,0,0) | |
#480000 | RVB (72,0,0) | |
#500000 | RVB (80,0,0) | |
#580000 | RVB (88,0,0) | |
#600000 | RVB (96,0,0) | |
#680000 | RVB (104,0,0) | |
#700000 | RVB (112,0,0) | |
#780000 | RVB (120,0,0) | |
#800000 | RVB (128,0,0) | |
#880000 | RVB (136,0,0) | |
#900000 | RVB (144,0,0) | |
#980000 | RVB (152,0,0) | |
#A00000 | RVB (160,0,0) | |
#A80000 | RVB (168,0,0) | |
#B00000 | RVB (176,0,0) | |
#B80000 | RVB (184,0,0) | |
#C00000 | RVB (192,0,0) | |
#C80000 | RVB (200,0,0) | |
#D00000 | RVB (208,0,0) | |
#D80000 | RVB (216,0,0) | |
#E00000 | RVB (224,0,0) | |
#E80000 | RVB (232,0,0) | |
#F00000 | RVB (240,0,0) | |
#F80000 | RVB (248,0,0) | |
#FF0000 | RVB (255,0,0) |
Nuances de gris
Pour obtenir des nuances de gris, des parts égales de toutes les couleurs sont utilisées. Pour vous faciliter le choix de la bonne couleur, nous mettons à votre disposition des codes de nuances de gris
Nuances de gris | Code hexadécimal | Code RVB |
---|---|---|
#000000 | RVB (0,0,0) | |
#080808 | RVB (8,8,8) | |
#101010 | RVB (16,16,16) | |
#181818 | RVB (24,24,24) | |
#202020 | RVB (32,32,32) | |
#282828 | RVB (40,40,40) | |
#303030 | RVB (48,48,48) | |
#383838 | RVB (56,56,56) | |
#404040 | RVB (64,64,64) | |
#484848 | RVB (72,72,72) | |
#505050 | RVB (80,80,80) | |
#585858 | RVB (88,88,88) | |
#606060 | RVB (96,96,96) | |
#686868 | RVB (104 104 104) | |
#707070 | RVB (112 112 112) | |
#787878 | RVB (120 120 120) | |
#808080 | RVB (128 128 128) | |
#888888 | RVB (136 136 136) | |
#909090 | RVB (144 144 144) | |
#989898 | RVB (152 152 152) | |
#A0A0A0 | RVB (160 160 160) | |
#A8A8A8 | RVB (168 168 168) | |
#B0B0B0 | RVB (176 176 176) | |
#B8B8B8 | RVB (184 184 184) | |
#C0C0C0 | RVB (192 192 192) | |
#C8C8C8 | RVB (200 200 200) | |
#D0D0D0 | RVB (208 208 208) | |
#D8D8D8 | RVB (216 216 216) | |
#E0E0E0 | RVB (224 224 224) | |
#E8E8E8 | RVB (232 232 232) | |
#F0F0F0 | RVB (240 240 240) | |
#F8F8F8 | RVB (248 248 248) | |
#FFFFFF | RVB (255 255 255) |
Noms de couleurs HTML multi-navigateurs (tous les navigateurs)
Une collection de 150 noms de couleurs en HTML, pris en charge dans tous les navigateurs.
Noms de couleurs standardisés
Le W3C répertorie 16 noms de couleurs valides pour HTML et CSS : aqua, noir, bleu, fuchsia, gris, vert, citron vert, marron (châtaigne), marine (outremer), olive (olive), violet (violet), rouge (rouge). , argent (argent), sarcelle (gris), blanc (blanc) et jaune (jaune).
Lorsque vous utilisez des couleurs non incluses dans cette liste, il est plus correct d'utiliser leur code hexadécimal (HEX) ou leur code RVB.
Couleurs sûres
Il y a quelques années, alors que les ordinateurs pouvaient prendre en charge un maximum de 256 couleurs différentes, une liste de 216 « Web Safe Colors » était proposée, avec 40 couleurs réservées au système.
Cette palette de 216 couleurs a été créée pour afficher correctement les couleurs en mode palette de 256 couleurs.
Cela n’a plus d’importance car la plupart des ordinateurs dans le monde prennent en charge des millions de nuances de couleurs. Dans tous les cas, voici une liste de ces couleurs :
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Le module CSS color détaille les valeurs qui permettent aux auteurs de définir les couleurs et l'opacité des éléments html, ainsi que les valeurs de la propriété color.
propriété de couleur
1. Couleurs prioritaires : propriété de couleur
La propriété spécifie la couleur de la police à l'aide de divers systèmes de rendu des couleurs. La propriété décrit la couleur du contenu textuel de l'élément. De plus, il est utilisé pour fournir une valeur indirecte potentielle (currentColor) pour toute autre propriété acceptant des valeurs de couleur.
La propriété est héritée.
2. Valeurs de couleur
2.1. Mots-clés principaux
La liste des principaux mots-clés comprend les significations suivantes :
Nom | HEXAMEN | RVB | Couleur |
---|---|---|---|
noir | #000000 | 0,0,0 | |
argent | #C0C0C0 | 192,192,192 | |
gris | #808080 | 128,128,128 | |
blanc | #FFFFFF | 255,255,255 | |
bordeaux | #800000 | 128,0,0 | |
rouge | #FF0000 | 255,0,0 | |
violet | #800080 | 128,0,128 | |
fuchsia | #FF00FF | 255,0,255 | |
vert | #008000 | 0,128,0 | |
citron vert | #00FF00 | 0,255,0 | |
olive | #808000 | 128,128,0 | |
jaune | #FFFF00 | 255,255,0 | |
marine | #000080 | 0,0,128 | |
bleu | #0000FF | 0,0,255 | |
sarcelle | #008080 | 0,128,128 | |
aqua | #00FFFF | 0,255,255 |
Les noms de couleurs ne sont pas sensibles à la casse.
Syntaxe
Couleur sarcelle;
2.2. Valeurs de couleur numériques
2.2.1. Couleurs du modèle RVB
Le format hexadécimal d'une valeur RVB est un signe # suivi immédiatement de trois ou six caractères hexadécimaux. La notation RVB à trois chiffres #rgb est convertie en la forme à six chiffres #rrggbb en copiant les chiffres plutôt qu'en ajoutant des zéros. Par exemple, #fb0 se développe en #ffbb00 . Cela garantit que le blanc #ffffff peut être spécifié dans la courte entrée #fff et supprime toute dépendance sur la profondeur de couleur de l'affichage.
Le format d'une valeur RVB en notation fonctionnelle est RVB(suivi d'une liste de trois valeurs numériques séparées par des virgules (soit trois valeurs entières, soit trois valeurs en pourcentage) suivies d'un symbole). La valeur entière 255 correspond à 100% et F ou FF en notation hexadécimale :
RVB (255 255 255) = RVB (100 %, 100 %, 100 %) = #FFF
Les espaces sont autorisés autour des valeurs numériques.
Cette page contient un tableau avec des mots-clés pouvant être utilisés pour désigner des couleurs dans des langages de développement Web tels que : HTML, CSS, JavaScript, Flash, etc.
Dans les anciennes spécifications du groupe WC3, seuls 16 mots-clés étaient spécifiés, à l'aide desquels les couleurs étaient définies en HTML et CSS. Dans des spécifications plus modernes, 130 autres mots-clés ont été ajoutés pour indiquer les noms de couleurs. Le tableau suivant contient les noms des couleurs et les codes hexadécimaux et RVB auxquels ils correspondent.
Selon les règles CSS, les noms de couleurs ne sont pas sensibles à la casse. Les entrées de couleur IndianRed et indianred sont équivalentes.
Il convient également de noter que sur les 146 mots-clés du tableau, il contient en réalité moins de couleurs. En effet, certains mots-clés font référence à la même couleur. Ainsi, les noms Gray et Gray représentent le code couleur 50% gris #808080, et le mot Magenta est synonyme de la couleur HTML Fuchsia, correspondant au code hexadécimal #FF00FF. Les mots Aqua et Cyan sont également synonymes, ils correspondent au code #00FFFF.
|
|
Les nombres hexadécimaux sont utilisés pour spécifier les couleurs. Le système hexadécimal, contrairement au système décimal, est basé, comme son nom l'indique, sur le nombre 16. Les nombres seront les suivants : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. Les chiffres de 10 à 15 sont remplacés par des lettres latines. Les nombres supérieurs à 15 dans le système hexadécimal sont formés en combinant deux nombres en un seul. Par exemple, le nombre 255 en décimal correspond au nombre FF en hexadécimal. Pour éviter toute confusion lors de la détermination du système numérique, un symbole dièse # est placé avant le nombre hexadécimal, par exemple #666999. Chacune des trois couleurs – rouge, vert et bleu – peut prendre des valeurs de 00 à FF. Ainsi, le symbole de couleur est divisé en trois composants #rrggbb, où les deux premiers symboles indiquent la composante rouge de la couleur, les deux du milieu - le vert et les deux derniers - le bleu. Il est permis d'utiliser la forme abrégée #rgb, où chaque caractère doit être doublé. Ainsi, l'entrée #fe0 doit être considérée comme #ffee00.
De nom
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Les navigateurs prennent en charge certaines couleurs par leur nom. Dans le tableau 1 montre les noms, le code hexadécimal, les valeurs RVB, HSL et la description.
Nom | Couleur | Code | RVB | LGV | Description |
---|---|---|---|---|---|
blanc | #ffffff ou #fff | RVB (255 255 255) | hsl(0,0%,100%) | Blanc | |
argent | #c0c0c0 | RVB (192 192 192) | hsl(0,0%,75%) | Gris | |
gris | #808080 | RVB (128 128 128) | hsl(0,0%,50%) | Gris foncé | |
noir | #000000 ou #000 | RVB (0,0,0) | hsl(0,0%,0%) | Noir | |
bordeaux | #800000 | RVB (128,0,0) | hsl(0,100%,25%) | Rouge foncé | |
rouge | #ff0000 ou #f00 | RVB (255,0,0) | hsl(0,100%,50%) | Rouge | |
orange | #ffa500 | RVB (255 165,0) | hsl(38,8,100%,50%) | Orange | |
jaune | #ffff00 ou #ff0 | RVB (255 255,0) | hsl(60,100%,50%) | Jaune | |
olive | #808000 | RVB (128 128,0) | hsl(60,100%,25%) | olive | |
citron vert | #00ff00 ou #0f0 | RVB (0,255,0) | hsl(120,100%,50%) | Vert clair | |
vert | #008000 | RVB (0,128,0) | hsl(120,100%,25%) | Vert | |
aqua | #00ffff ou #0ff | RVB (0,255,255) | hsl(180,100%,50%) | Bleu | |
bleu | #0000ff ou #00f | RVB (0,0,255) | hsl(240,100%,50%) | Bleu | |
marine | #000080 | RVB (0,0,128) | hsl(240,100%,25%) | Bleu foncé | |
sarcelle | #008080 | RVB (0,128,128) | hsl(180,100%,25%) | Bleu vert | |
fuchsia | #ff00ff ou #f0f | RVB (255,0,255) | hsl(300,100%,50%) | Rose | |
violet | #800080 | RVB (128,0,128) | hsl(300,100%,25%) | Violet |
Utiliser RVB
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Vous pouvez définir la couleur en utilisant les valeurs rouge, vert et bleu en termes décimaux. Chacune des trois composantes de couleur prend une valeur comprise entre 0 et 255. Il est également permis de spécifier la couleur sous forme de pourcentage, 100 % correspondant au nombre 255. Spécifiez d'abord le mot-clé rgb, puis spécifiez les composantes de couleur entre parenthèses. , séparés par des virgules, par exemple rgb(255 , 128, 128) ou rgb(100%, 50%, 50%).
RVBA
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Le format RGBA est similaire en syntaxe à RVB, mais inclut un canal alpha qui spécifie la transparence de l'élément. Une valeur de 0 est entièrement transparente, 1 est opaque et une valeur intermédiaire comme 0,5 est semi-transparente.
RGBA a été ajouté à CSS3, le code CSS doit donc être validé par rapport à cette version. A noter que le standard CSS3 est encore en développement et que certaines fonctionnalités sont susceptibles de changer. Par exemple, une couleur au format RVB ajoutée à la propriété background-color est validée, mais celle ajoutée à la propriété background n'est plus valide. Dans le même temps, les navigateurs comprennent très bien la couleur des deux propriétés.
LGV
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Le nom du format HSL est dérivé de la combinaison des premières lettres Hue (teinte), Saturate (saturation) et Lightness (légèreté). La teinte est la valeur de couleur sur la roue chromatique (Fig. 1) et est indiquée en degrés. 0° correspond au rouge, 120° au vert et 240° au bleu. La valeur de teinte peut varier de 0 à 359.
Riz. 1. Roue chromatique
La saturation est l'intensité d'une couleur et se mesure en pourcentage de 0 % à 100 %. Une valeur de 0 % indique l'absence de couleur et une nuance de gris, 100 % est la valeur maximale de saturation.
La luminosité spécifie la luminosité de la couleur et est spécifiée sous forme de pourcentage compris entre 0 % et 100 %. Les valeurs faibles rendent la couleur plus foncée et les valeurs élevées la rendent plus claire ; les valeurs extrêmes de 0 % et 100 % correspondent au noir et blanc.
HSLA
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Le format HSLA est similaire en syntaxe au HSL, mais inclut un canal alpha pour spécifier la transparence de l'élément. Une valeur de 0 est entièrement transparente, 1 est opaque et une valeur intermédiaire comme 0,5 est semi-transparente.
Les valeurs de couleur RGBA, HSL et HSLA sont ajoutées à CSS3, veuillez donc vérifier la validité de la version de votre code lorsque vous utilisez ces formats.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Avertissement
Toutes les méthodes de capture de lions répertoriées sur le site sont théoriques et basées sur des méthodes informatiques. Les auteurs ne garantissent pas votre sécurité lors de leur utilisation et déclinent toute responsabilité quant aux résultats. N'oubliez pas qu'un lion est un prédateur et un animal dangereux !
Le résultat de cet exemple est présenté sur la Fig. 2.
Riz. 2. Couleurs sur la page Web