Jeu de couleurs HTML. 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. Noms de couleurs standardisés

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

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.

Utiliser RVB

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

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

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

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

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)

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 :

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

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 :

Il existe plusieurs façons de représenter la couleur dans la conception Web.

HEX est un système hexadécimal pour représenter les couleurs en base 16. Pour ce système, des chiffres décimaux arabes de 0 à 9 et des lettres latines de A à F sont utilisés pour compléter le nombre numérique jusqu'à 16. Pour la conception Web, 16 couleurs primaires (clés) sont utilisés, ce qu'on appelle le code couleur hexadécimal #RRGGBB, où chaque paire est responsable de sa part de couleur : RR – rouge, GG – vert et BB – bleu. Chaque fraction de couleur va de 00 à FF.

Deux autres représentations de la couleur dans la conception Web sont : sous la forme RVB(*,*,*), où chaque fraction « * » d'une couleur est représentée par des chiffres décimaux de 0 à 255 et par des noms de couleur en anglais.

Lors de la création d’une image couleur, le principal problème est la reproduction correcte des couleurs sur différents types d’ordinateurs, moniteurs et navigateurs. Si le navigateur ne parvient pas à afficher correctement une couleur, il en sélectionne une similaire ou mélange plusieurs couleurs. Et parfois, il peut être remplacé par une couleur complètement différente.

Tableau 16 couleurs primaires, qui sont utilisés dans tous les navigateurs

Tableau violet les couleurs et ses nuances

Tableau gris les couleurs et ses nuances

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 :

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.