Les codes de couleur en CSS sont utilisés pour spécifier les couleurs. En règle générale, les codes de couleur ou les valeurs de couleur sont utilisés pour définir une couleur pour le premier plan d'un élément (par exemple, texte, couleur de lien) ou l'arrière-plan d'un élément (arrière-plan, couleur de bloc). Ils peuvent également être utilisés pour modifier la couleur des boutons, les bordures, le marqueur, le survol et d'autres effets décoratifs.
Vous pouvez définir vos valeurs de couleur dans différents formats. Le tableau suivant répertorie tous les formats possibles :
Ces formats sont décrits plus en détail ci-dessous.
Couleurs CSS - Codes hexadécimaux
Code couleur hexadécimal est une représentation de couleur à six chiffres. Les deux premiers chiffres (RR) sont la valeur rouge, les deux suivants sont la valeur verte (GG) et les deux derniers sont la valeur bleue (BB).
Couleurs CSS - Codes hexadécimaux courts
Code couleur hexadécimal court est une forme plus courte de notation à six caractères. Dans ce format, chaque chiffre est répété pour produire la valeur de couleur équivalente à six chiffres. Par exemple : #0F0 devient #00FF00.
La valeur hexadécimale peut être extraite de n'importe quel logiciel graphique tel qu'Adobe Photoshop, Core Draw, etc.
Chaque code couleur hexadécimal en CSS sera précédé d'un signe dièse "#". Voici des exemples d'utilisation de la notation hexadécimale.
Couleurs CSS - Valeurs RVB
Valeur RVB est un code de couleur défini à l'aide de la propriété rgb(). Cette propriété prend trois valeurs : une pour le rouge, le vert et le bleu. La valeur peut être un nombre entier, compris entre 0 et 255, ou un pourcentage.
Note: Tous les navigateurs ne prennent pas en charge la propriété de couleur rgb(), il n'est donc pas recommandé de l'utiliser.
Vous trouverez ci-dessous un exemple montrant plusieurs couleurs utilisant des valeurs RVB.
Générateur de code couleur
Vous pouvez créer des millions de codes de couleur avec notre service.
Couleurs sécurisées du navigateur
Vous trouverez ci-dessous un tableau de 216 couleurs qui sont les plus sécurisées et indépendantes de l'ordinateur. Ces couleurs en CSS vont de 000000 au code hexadécimal FFFFFF. Ils sont sûrs à utiliser car ils garantissent que tous les ordinateurs afficheront correctement les couleurs lorsqu'ils travaillent avec la palette de 256 couleurs.
| Tableau des couleurs "sûres" en CSS | |||||
| #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 |
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 dans la définition du système de numération, le nombre hexadécimal est précédé du symbole dièse #, par exemple #666999. Chacune des trois couleurs - rouge, vert et bleu - peut prendre des valeurs de 00 à FF. Ainsi, la désignation de la couleur est divisée en trois composantes #rrggbb, où les deux premiers caractères marquent la composante rouge de la couleur, les deux du milieu marquent le vert et les deux derniers marquent 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. En tableau. 1 montre les noms, le code hexadécimal, les valeurs au format RVB, HSL et la description.
| Nom | Couleur | Le code | RVB | LGV | La description |
|---|---|---|---|---|---|
| blanche | #fffff ou #fff | RVB(255,255,255) | hsl(0.0%,100%) | Blanc | |
| argent | #c0c0c0 | RVB(192,192,192) | hsl(0,0 %, 75 %) | Gris | |
| grise | #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 | |
| chaux | #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 |
Avec 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 une couleur en utilisant les valeurs de rouge, vert et bleu en termes décimaux. Chacune des trois composantes de couleur prend une valeur de 0 à 255. Il est également acceptable de définir la couleur en pourcentage, tandis que 100 % correspondra au nombre 255. Tout d'abord, le mot-clé rgb est spécifié, puis les composantes de couleur sont spécifié 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 à RGB, mais inclut un canal alpha qui définit la transparence de l'élément. Une valeur de 0 est entièrement transparente, 1 est opaque et une valeur intermédiaire telle que 0,5 est translucide.
RGBA est ajouté à CSS3, la validation du code CSS doit donc être effectuée conformément à cette version. Il convient de noter que la norme CSS3 est encore en cours de développement et que certaines de ses fonctionnalités peuvent changer. Par exemple, une couleur RVB ajoutée à la propriété background-color passe la validation, mais pas une autre ajoutée à la propriété background. Dans le même temps, les navigateurs comprennent assez 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 formé d'une combinaison des premières lettres Hue (hue), Saturate (saturation) et Lightness (légèreté). La teinte est la valeur de couleur sur la roue chromatique (Fig. 1) et est spécifiée en degrés. 0° est rouge, 120° est vert et 240° est bleu. La valeur de teinte peut varier de 0 à 359.
Riz. 1. Roue chromatique
La saturation est l'intensité d'une couleur, mesurée en pourcentage de 0% à 100%. Une valeur de 0 % indique aucune couleur et une nuance de gris, 100 % est la valeur de saturation maximale.
La luminosité définit la luminosité de la couleur et est spécifiée sous forme de pourcentage de 0 % à 100 %. Les petites valeurs rendent la couleur plus sombre, tandis que 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 à HSL, mais inclut un canal alpha qui définit la transparence de l'élément. Une valeur de 0 est entièrement transparente, 1 est opaque et une valeur intermédiaire telle que 0,5 est translucide.
Les valeurs de couleur aux formats RGBA, HSL et HSLA sont ajoutées à CSS3, donc lors de l'utilisation de ces formats, vérifiez la validité du code par rapport à la version.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Avertissement
Toutes les méthodes de capture d'un lion 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 au résultat. N'oubliez pas que le lion est un prédateur et un animal dangereux !
Le résultat de cet exemple est montré sur la Fig. 2.
Riz. 2. Couleurs sur la page Web
En HTML, la couleur peut être spécifiée de trois manières :
Définir la couleur en HTML par son nom
Certaines couleurs peuvent être spécifiées par leur nom, en utilisant le nom de la couleur en anglais comme valeur. Les mots-clés les plus courants : noir (noir), blanc (blanc), rouge (rouge), vert (vert), bleu (bleu), etc. :
Couleur du texte - Rouge
Les couleurs les plus populaires de la norme World Wide Web Consortium (W3C) sont :
| Couleur | Nom | Couleur | Nom | Couleur | Nom | Couleur | Nom |
|---|---|---|---|---|---|---|---|
| Noir | Gris | Argent | Blanc | ||||
| Jaune | chaux | Aqua | Fuchsia | ||||
| Rouge | Vert | Bleu | Violet | ||||
| bordeaux | olive | Marine | Sarcelle |
Exemple d'utilisation de noms de couleurs différents :
Exemple : définir une couleur par son nom
- Essayez vous-même "
En-tête sur fond rouge
En-tête sur fond orange
En-tête sur fond de chaux
Texte blanc sur fond bleu
En-tête sur fond rouge
En-tête sur fond orange
En-tête sur fond de chaux
Texte blanc sur fond bleu
Spécification de la couleur avec RVB
Lors de l'affichage de différentes couleurs sur le moniteur, la palette RVB est prise comme base. Toute couleur est obtenue en mélangeant les trois principales : R-rouge, G - vert (vert), B - bleu (bleu). La luminosité de chaque couleur est donnée par un octet et peut donc prendre des valeurs de 0 à 255. Par exemple, RVB (255,0,0) s'affiche en rouge car le rouge est réglé sur sa valeur la plus élevée (255) et le d'autres sont définis sur 0 Vous pouvez également définir la couleur sous forme de pourcentage. Chacun des paramètres indique le niveau de luminosité de la couleur correspondante. Par exemple : les valeurs rgb(127, 255, 127) et rgb(50%, 100%, 50%) définiront la même couleur verte à saturation moyenne :
Exemple : Spécification d'une couleur avec RVB
- Essayez vous-même "
RVB (127, 255, 127)
RVB (50 %, 100 %, 50 %)
RVB (127, 255, 127)
RVB (50 %, 100 %, 50 %)
Définir la couleur par valeur hexadécimale
Valeurs R g B peut également être spécifié à l'aide de valeurs de couleur hexadécimales (HEX) sous la forme : #RRGGBB où RR (rouge), GG (vert) et BB (bleu) sont des valeurs hexadécimales de 00 à FF (identique à la décimale 0- 255) . Le système hexadécimal, contrairement au système décimal, est basé, comme son nom l'indique, sur le nombre 16. Le système hexadécimal utilise les caractères suivants : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Ici les chiffres de 10 à 15 sont remplacés par des lettres latines. Les nombres supérieurs à 15 dans le système hexadécimal sont l'union de deux caractères en une seule valeur. Par exemple, le nombre le plus élevé 255 en décimal correspond au FF le plus élevé en hexadécimal. Contrairement au système décimal, le nombre hexadécimal est précédé du signe dièse. # , par exemple, #FF0000 s'affiche en rouge car le rouge est défini sur sa valeur la plus élevée (FF) et les autres couleurs sont définies sur leur valeur minimale (00). Caractères après le symbole dièse # peuvent être saisis en majuscules et en minuscules. Le système hexadécimal permet d'utiliser la forme abrégée #rgb, où chaque caractère est égal à deux fois. Ainsi, l'entrée #f7O doit être considérée comme #ff7700.
Exemple : Couleur HEX
- Essayez vous-même "
rouge : #FF0000
vert : #00FF00
bleu : #0000FF
rouge : #FF0000
vert : #00FF00
bleu : #0000FF
rouge+vert=jaune : #FFFF00
rouge+bleu=violet : #FF00FF
vert+bleu=cyan : #00FFFF
Liste des couleurs couramment utilisées (nom, HEX et RVB) :
| Titre anglais | Nom russe | Échantillon | HEX | RVB | ||
|---|---|---|---|---|---|---|
| Amarante | amarante | #E52B50 | 229 | 43 | 80 | |
| ambre | ambre | #FFBF00 | 255 | 191 | 0 | |
| Aqua | bleu vert | #00FFFF | 0 | 255 | 255 | |
| bleu azur | bleu azur | #007FFF | 0 | 127 | 255 | |
| Noir | Noir | #000000 | 0 | 0 | 0 | |
| Bleu | Bleu | #0000FF | 0 | 0 | 255 | |
| Bondi Bleu | L'eau de la plage de Bondi | #0095B6 | 0 | 149 | 182 | |
| Laiton | Laiton | #B5A642 | 181 | 166 | 66 | |
| Marron | Marron | #964B00 | 150 | 75 | 0 | |
| Azuré | bleu azur | #007BA7 | 0 | 123 | 167 | |
| vert printemps foncé | Vert printemps foncé | #177245 | 23 | 114 | 69 | |
| émeraude | émeraude | #50C878 | 80 | 200 | 120 | |
| Aubergine | aubergine | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| Or | Or | #FFD700 | 250 | 215 | 0 | |
| Gris | Gris | #808080 | 128 | 128 | 128 | |
| Vert | Vert | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| chaux | Chaux | #CCFF00 | 204 | 255 | 0 | |
| Malachite | Malachite | #0BDA51 | 11 | 218 | 81 | |
| Marine | Bleu foncé | #000080 | 0 | 0 | 128 | |
| Ocre | Ocre | #CC7722 | 204 | 119 | 34 | |
| olive | olive | #808000 | 128 | 128 | 0 | |
| Orange | Orange | #FFA500 | 255 | 165 | 0 | |
| pêche | Pêche | #FFE5B4 | 255 | 229 | 180 | |
| Citrouille | Citrouille | #FF7518 | 255 | 117 | 24 | |
| Violet | Violet | #800080 | 128 | 0 | 128 | |
| Rouge | Rouge | #FF0000 | 255 | 0 | 0 | |
| Safran | Safran | #F4C430 | 244 | 196 | 48 | |
| vert de mer | mer verte | #2E8B57 | 46 | 139 | 87 | |
| Vert marais | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Sarcelle | bleu vert | #008080 | 0 | 128 | 128 | |
| Outremer | outremer | #120A8F | 18 | 10 | 143 | |
| violet | Violet | #8B00FF | 139 | 0 | 255 | |
| Jaune | Jaune | #FFFF00 | 255 | 255 | 0 | |
Codes couleur (fond) par saturation et teinte.
28/11/14 11.1KMalheureusement, il n'est pas encore possible d'afficher des sensations gustatives sur le site. Mais cela peut être entièrement compensé à l'aide de couleurs. Après tout, les couleurs html vous permettent d'afficher n'importe laquelle des millions de nuances. Donc " crayons de couleur” dans son set est bien plus que sept.
jeu de couleurs en html
En html, la couleur peut être spécifiée dans plusieurs formats :
1. En tant que valeur hexadécimale - le code spécifié dans le système hexadécimal est utilisé. Ces codes de couleur en html se composent de trois paires de nombres hexadécimaux. Chaque paire est responsable de la saturation de la teinte avec sa couleur primaire :
- La première paire numérique est responsable de la couleur rouge ;
- La deuxième paire est pour le contenu de la couleur verte ;
- Ce dernier est pour le contenu de la couleur bleue.
Au début du code (avant les chiffres), un signe dièse est placé. Il s'agit du code couleur hexadécimal. En plus des chiffres de 1 à 9, ce système de numération utilise des lettres de l'alphabet latin (A, B, C, D, E, F).
Par exemple, le code de couleur blanche en html ressemblerait à #FFFFFF:
2. Mot-clé - À l'heure actuelle, HTML prend en charge environ 147 mots-clés. Mais tous ces mots ne sont pas uniques. Certains d'entre eux se réfèrent à la même nuance de couleur.
Le gris est représenté par deux mots-clés : gray et gray . Leur code hexadécimal (HEX ) est donné par la même valeur #808080 .
Exemple :
#808080
3. Au format RVB - cet encodage de couleur en html est basé sur l'utilisation de trois valeurs définies dans la plage de 0 à 255. Chacune d'entre elles détermine la saturation de la teinte avec l'une des couleurs primaires :
- R - rouge (rouge);
- G - vert (vert);
- B - bleu (bleu).
Le numéro de couleur au format RVB s'écrit comme suit : rgb(0, 210, 100).
couleur d'arrière-plan : RVB (100,186,43)
4. Au format RGBA - il s'agit d'un format RVB avancé, où la quatrième valeur spécifie la transparence de la couleur sous la forme d'une fraction décimale de 0 à 1.
Exemple d'utilisation :
couleur d'arrière-plan : rgba (100,86,143,0.2)
couleur d'arrière-plan : rgba (100,86,143,0.5)
couleur d'arrière-plan : rgba (100,86,143,0.8)
couleur d'arrière-plan : rgba (100,86,143,1)
tables de couleurs html et générateurs de couleurs
Avec une telle gamme de formats de réglage des couleurs, il est facile de s'embrouiller. Par conséquent, une table de couleurs spéciale a été inventée. Dans ce document, à 147 noms clés de nuances de couleurs, des codes de correspondance sont donnés dans toutes les principales normes de représentation des couleurs. De plus, chaque champ est équipé d'une barre pour la correspondance visuelle des couleurs. L'un de ces tableaux est présenté sur le site colorscheme.ru :
Mais même avec l'aide d'une telle structuration de la correspondance, la sélection de la teinte souhaitée peut être difficile. Et ce n'est pas un fait qu'il y a le bon dans le tableau des codes de couleur.
Pour contourner cette barrière et faciliter au maximum le choix de la bonne teinte, des web services interactifs ont été développés. Leur interface utilisateur peut différer légèrement les unes des autres.
Sur le site html-color-codes.info, le générateur de couleurs ressemble à ceci :
Et au sein du service color-picker.appsmaster.co, cet outil est implémenté un peu différemment :
La saturation de chaque couleur dans le générateur est définie à l'aide de curseurs spéciaux. Visuellement, la teinte est affichée par la couleur du cadre et du rectangle sur le côté gauche. En bas, 3 champs affichent le code couleur dans les principaux formats.
Mais le générateur de couleurs n'est pas disponible que sur des sites spécialisés. Presque tous les éditeurs graphiques sont équipés d'un outil similaire. Par exemple, Photoshop :
Sécurité des couleurs
Et c'était il y a longtemps, à l'époque des cartes vidéo qui ne supportaient que 256 couleurs. À cette époque, les systèmes d'exploitation ne pouvaient afficher qu'un certain nombre de nuances huit bits sans distorsion.
Alors la grande table des couleurs sûres a été élevée. Il indiquait 216 nuances qui pouvaient être affichées sans distorsion dans n'importe lequel des navigateurs de l'époque. Et à ce jour ce grand manuscrit» est toujours disponible sur certaines ressources :
Tout a changé à notre époque. Par conséquent, toutes les règles de sécurité lors de l'utilisation de couleurs en html sont complètement annulées. Après tout, le matériel informatique moderne prend en charge plus de 16 millions de nuances différentes. Et 216 couleurs sûres sont tombées dans l'oubli.
Vlad Merjevitch
En HTML, la couleur est spécifiée de deux manières : en utilisant un code hexadécimal et par le nom de certaines couleurs. La méthode la plus couramment utilisée est basée sur le système hexadécimal, car c'est le plus universel.
Couleurs hexadécimales
HTML utilise des nombres hexadécimaux 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. En tableau. 6.1 montre la correspondance entre les nombres décimaux et hexadécimaux.
Les nombres supérieurs à 15 dans le système hexadécimal sont formés en combinant deux nombres en un seul (tableau 6.2). Par exemple, le nombre 255 en décimal correspond au nombre FF en hexadécimal.
Pour éviter toute confusion dans la définition du système de numération, le nombre hexadécimal est précédé du signe dièse #, par exemple #aa69cc. Dans ce cas, la casse n'a pas d'importance, il est donc permis d'écrire #F0F0F0 ou #f0f0f0.
Une couleur typique utilisée en HTML est la suivante.
Ici, la couleur d'arrière-plan de la page Web est définie sur #FA8E47. Le signe dièse # devant un nombre signifie qu'il est en hexadécimal. Les deux premiers chiffres (FA) définissent la composante rouge de la couleur, les troisième à quatrième chiffres (8E) la composante verte et les deux derniers chiffres (47) la composante bleue. Le résultat final est cette couleur.
| FA | + | 8E | + | 47 | = | FA8E47 |
Chacune des trois couleurs - rouge, vert et bleu - peut prendre des valeurs de 00 à FF, ce qui forme finalement 256 nuances. Ainsi, le nombre total de couleurs peut être de 256x256x256 = 16.777.216 combinaisons. Le modèle de couleur basé sur les composantes rouge, verte et bleue est appelé RVB (rouge, vert, bleu ; rouge, vert, bleu). Ce modèle est additif (de add - add), dans lequel l'addition des trois composants forme le blanc.
Pour faciliter la navigation dans les couleurs hexadécimales, tenez compte de quelques règles.
- Si les valeurs des composantes de couleur sont les mêmes (par exemple : #D6D6D6), alors une teinte grise sera obtenue. Plus le nombre est élevé, plus la couleur est claire et les valeurs passent de #000000 (noir) à #FFFFFF (blanc).
- Une couleur rouge vif se forme si la composante rouge est rendue maximale (FF) et les autres composantes sont mises à zéro. La couleur avec la valeur #FF0000 est la teinte rouge la plus rouge possible. Il en va de même pour le vert (#00FF00) et le bleu (#0000FF).
- Le jaune (#FFFF00) est obtenu en mélangeant du rouge avec du vert. Cela se voit bien sur la roue chromatique (Fig. 6.1), qui présente les couleurs primaires (rouge, vert, bleu) et complémentaires ou complémentaires. Ceux-ci incluent le jaune, le cyan et le violet (également appelé magenta). En général, n'importe quelle couleur peut être obtenue en mélangeant des couleurs qui lui sont adjacentes. Ainsi, le cyan (#00FFFF) est obtenu en combinant le bleu et le vert.
Riz. 6.1. Cercle de couleur
Les couleurs basées sur des valeurs hexadécimales n'ont pas besoin d'être sélectionnées de manière empirique. À cette fin, un éditeur graphique pouvant fonctionner avec différents modèles de couleurs, comme Adobe Photoshop, convient. Sur la fig. 6.2 montre une fenêtre pour choisir une couleur dans ce programme, la ligne encercle la valeur hexadécimale résultante de la couleur actuelle. Vous pouvez le copier et le coller dans votre code.
Riz. 6.2. Sélecteur de couleurs dans Photoshop
Couleurs Web
Si vous réglez la qualité des couleurs du moniteur sur 8 bits (256 couleurs), la même couleur peut être affichée différemment dans différents navigateurs. Cela a à voir avec la façon dont les graphiques sont rendus lorsque le navigateur fonctionne avec sa propre palette et ne peut pas afficher une couleur qui n'est pas dans sa palette. Dans ce cas, la couleur est remplacée par une combinaison de pixels d'autres couleurs proches qui imitent celle donnée. Pour que la couleur reste la même dans différents navigateurs, une palette de couleurs dites Web a été introduite. Les couleurs Web sont de telles couleurs, pour chaque composant - rouge, vert et bleu - l'une des six valeurs est définie - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). La valeur hexadécimale de ce composant est indiquée entre parenthèses. Le nombre total de couleurs de toutes les combinaisons possibles donne 6x6x6 - 216 couleurs. Un exemple de couleur Web est #33FF66.
La principale caractéristique de la couleur Web est qu'elle s'affiche de la même manière dans tous les navigateurs. À l'heure actuelle, la pertinence des couleurs Web est très faible en raison de l'amélioration de la qualité des moniteurs et de l'expansion de leurs capacités.
Couleurs par nom
Afin de ne pas mémoriser une collection de nombres, vous pouvez utiliser les noms des couleurs couramment utilisées à la place. En tableau. 6.3 montre les noms des noms de couleurs populaires.
| Nom de la couleur | Couleur | La description | Valeur hexadécimale |
|---|---|---|---|
| noir | Noir | #000000 | |
| bleu | Bleu | #0000FF | |
| fuchsia | Violet clair | #FF00FF | |
| grise | Gris foncé | #808080 | |
| vert | Vert | #008000 | |
| chaux | vert clair | #00FF00 | |
| bordeaux | Rouge foncé | #800000 | |
| marine | Bleu foncé | #000080 | |
| olive | olive | #808000 | |
| violet | Violet foncé | #800080 | |
| rouge | Rouge | #FF0000 | |
| argent | gris clair | #C0C0C0 | |
| sarcelle | bleu vert | #008080 | |
| blanche | Blanc | #FFFFFF | |
| jaune | Jaune | #FFFF00 |
Peu importe comment vous spécifiez la couleur - par son nom ou en utilisant des nombres hexadécimaux. Dans leur effet, ces méthodes sont égales. L'exemple 6-1 montre comment définir les couleurs d'arrière-plan et de texte d'une page Web.
Exemple 6.1. Couleur de fond et de texte
Exemple de texte
Dans cet exemple, la couleur d'arrière-plan est définie à l'aide de l'attribut bgcolor de la balise
, et la couleur du texte via l'attribut text. Pour la variété, la valeur de l'attribut text est définie sur un nombre hexadécimal et bgcolor est défini sur le mot-clé réservé teal .