Couleur marron foncé html. Travailler avec le modèle de couleur RGBA

Dans la première partie du livre, nous avons déjà démontré dans quelques exemples comment définir la couleur du texte en CSS. Il n'y a rien de compliqué ici : vous aurez besoin de la propriété color et de la valeur de la couleur avec laquelle vous souhaitez colorer le texte.

P ( couleur : #211C18 ; )

Dans notre exemple, la valeur #211C18 représente le code couleur hexadécimal. Si vous êtes déjà familier avec le système de nombres hexadécimaux, vous pouvez sauter la lecture du paragraphe suivant. Nous parlerons également plus en détail d'autres façons de représenter les couleurs sur le Web - en utilisant des modèles de couleurs (RVB, HSL) et des mots-clés. Ces informations seront utiles aux débutants et leur lecture est recommandée.

Couleurs hexadécimales (hex)

Système de nombres hexadécimaux ( hexadécimal, hexadécimal) est basé sur le nombre 16. Pour écrire une valeur hexadécimale, 16 caractères sont utilisés : des chiffres arabes de 0 à 9 et les premières lettres de l'alphabet latin (A, B, C, D, E, F). La couleur au format hexadécimal s'écrit sous la forme de trois nombres à deux chiffres de 00 à FF (ils doivent être précédés d'un symbole dièse #), qui correspondent à trois composantes : Rouge, Vert, Bleu (modèle de couleur RVB). En d’autres termes, une entrée de couleur peut être représentée par #RRGGBB, où la première paire de caractères détermine le niveau de rouge, la seconde le niveau de vert et la troisième le niveau de bleu. La couleur obtenue est une combinaison de ces trois couleurs.

Notation abrégée pour les couleurs hexadécimales

Certaines valeurs de couleur hexadécimales peuvent être écrites sous forme d'abréviations. Pour ce faire, transformez l'entrée comme #RRGGBB en #RGB. Cela peut être fait lorsque le nombre hexadécimal contient trois paires de caractères identiques.

La forme abrégée de notation est assez courante et, pour votre référence, nous fournirons plusieurs exemples d'abréviations. À propos, les valeurs de couleur hexadécimale ne sont pas sensibles à la casse - vous pouvez utiliser des lettres majuscules et minuscules, tout dépend de votre désir et de vos goûts.

Exemples de notation abrégée pour les couleurs hexadécimales :

Modèle de couleur RVB

La deuxième façon de spécifier les couleurs en CSS consiste à utiliser des valeurs RVB décimales (Rouge, Bleu, Vert). Pour ce faire, vous devez écrire le mot-clé rgb après la propriété color, puis entre parenthèses et séparés par des virgules - trois nombres compris entre 0 et 255, chacun signifiant l'intensité des couleurs rouge, verte et bleue (r , g, b). Plus le chiffre est élevé, plus la couleur est intense. Par exemple, pour obtenir une couleur vert vif, il faut écrire :

P (couleur : rvb(0, 255, 0); )

Mais la teinte jaunâtre-moutarde a la signification suivante :

Couleur : RVB (94, 81, 3) ; /* ci-dessous est la même couleur, écrite en hexadécimal : */ color: #5E5103;

La valeur du noir s'écrit (0, 0, 0) et celle du blanc (255, 255, 255) . Il est également possible d'indiquer ces valeurs sous forme de pourcentages. Ainsi, le nombre 255 correspond à 100 %, la couleur blanche peut donc être définie comme suit :

Couleur : RVB (100 %, 100 %, 100 %) ;

Où chercher la signification des couleurs

Peut-être avez-vous une question : d’où trouvez-vous toutes ces significations de couleurs ? Il existe de nombreux éditeurs graphiques et services en ligne avec lesquels vous pouvez sélectionner des couleurs et créer des schémas de couleurs. L'un des programmes les plus populaires dans lequel vous pouvez sélectionner une couleur appropriée et obtenir ses valeurs RVB, hexadécimales et plus encore est Adobe Photoshop. Comme alternative, il existe des sites spéciaux sur lesquels vous pouvez facilement choisir non seulement une couleur, mais également une palette de couleurs complète. Un bon exemple est le service Adobe Color CC.

Modèle de couleur RVBA

Vous pouvez définir une couleur au format RGBA de la même manière qu'en RVB. La différence entre RGBA et RVB réside dans la présence d'un canal alpha, responsable de la transparence de la couleur. La transparence est définie à l'aide d'un nombre compris entre 0 et 1, où 0 signifie une transparence totale et 1, au contraire, signifie complètement opaque. Des valeurs intermédiaires comme 0,5 permettent de définir un aspect translucide (la notation abrégée est autorisée, sans zéro, mais avec un point – .5). Par exemple, pour rendre le texte coloré et légèrement transparent, vous devez écrire le mot-clé rgba et la valeur color après la propriété color :

P ( couleur : rgba(94, 81, 3, .9); )

L'inconvénient de RGBA est qu'il n'est pas pris en charge par Internet Explorer version 8 et antérieure. Surtout pour IE8, vous pouvez appliquer la solution suivante :

P ( couleur : rvb (94, 81, 3 ); couleur : rgba (94, 81, 3, .9); )

La première propriété de l'exemple est destinée au navigateur IE8, qui affichera le texte dans la couleur souhaitée, mais sans transparence. Et les navigateurs qui comprennent RGBA appliqueront la deuxième propriété à l'élément, avec transparence.

Modèles de couleurs HSL (HSLA)

Vous pouvez également définir la couleur en CSS en utilisant les coordonnées du modèle de couleur HSL (Teinte, Saturation, Luminosité). C'est écrit ainsi :

P ( couleur : hsl (165, 100 %, 50 %); )

Le premier chiffre entre parenthèses signifie teinte et est indiqué en degrés (plage de chiffres de 0 à 359). Il sera facile de comprendre pourquoi les degrés sont utilisés si vous vous souvenez à quoi ressemble la roue chromatique :

Les deuxième et troisième chiffres entre parenthèses signifient respectivement saturation et luminosité. Leurs valeurs sont définies en pourcentages de 0 à 100. Plus la valeur de saturation est faible, plus la couleur devient sourde. Une valeur de saturation de zéro entraînera une couleur grise, quelle que soit la valeur de teinte. La valeur de luminosité vous permet de spécifier la luminosité de la couleur. Des valeurs faibles donnent des nuances de couleur sombres, des valeurs élevées donnent des nuances claires. Une valeur de 100 % pour la luminosité signifie du blanc, 0 % signifie du noir.

Le modèle de couleur HSLA fonctionne presque de la même manière que HSL, mais, comme le RGBA, il possède un canal alpha avec lequel vous pouvez définir la transparence de la couleur en spécifiant la valeur souhaitée dans la plage de 0 à 1 :

P ( couleur : hsla (165, 100 %, 50 %, 0,6 ); )

HSL et HSLA sont pris en charge par tous les navigateurs, à l'exception d'Internet Explorer version 8 et antérieure.

Couleurs HTML standard

Une autre façon de représenter les couleurs sur le Web consiste à utiliser des mots-clés, qui peuvent être utilisés pour spécifier une couleur pour un élément. Exemple:

P (couleur: noir;)

Il existe 16 couleurs standards qui peuvent être écrites dans la valeur de la propriété color :

Ces couleurs sont prises en charge par tous les navigateurs. En plus de ceux-ci, il existe environ 130 mots-clés supplémentaires pour différentes nuances de couleurs. Un tableau complet de ces couleurs peut être consulté dans l'ouvrage de référence du W3C.

L'utilisation de tels mots-clés est acceptable, mais il existe un risque que certains mots ne soient pas acceptés par le navigateur. Par conséquent, il est recommandé d’écrire le code couleur hexadécimal plutôt que des mots-clés.

Résultats

En CSS, la couleur du texte est spécifiée à l'aide de la propriété color et sa valeur peut être écrite de plusieurs manières : au format hexadécimal (hex), au format RVB ou HSL, ou en spécifiant un mot-clé. Pour éviter un affichage incorrect d'une couleur spécifiée à l'aide d'un mot-clé, il est préférable de spécifier sa valeur hexadécimale.

Il est également possible de définir la transparence de l'élément à l'aide d'un canal alpha (formats RGBA et HSLA). Il convient de noter que le navigateur IE8 et ses versions antérieures ne prennent pas en charge les formats RGBA, HSL et HSLA.

Regardez attentivement le dessin. Le fond de la fenêtre déroulante est rendu translucide. Il s'agit d'une technique de conception assez courante. Réfléchissons à la manière dont cela peut être mis en œuvre.

Tâche

Rendre la couleur translucide sur plusieurs navigateurs.

Solution

La première idée dans cette situation est d'utiliser une image png24 avec une translucidité déjà définie pour l'arrière-plan. Mais cette image est totalement inutile. Vous pouvez très bien vous en passer (et donc sans requête supplémentaire au serveur). Essayons toujours de trouver la solution optimale.

La deuxième pensée est d'utiliser . Mais dans ce cas, ce n’est pas très pratique. Après tout, non seulement l'arrière-plan, mais aussi les inscriptions deviendront translucides. Oui, en fait, toute la fenêtre en même temps.

Bien sûr, vous pouvez essayer d'ajouter un conteneur supplémentaire et lui appliquer une opacité uniquement, mais cet élément HTML sera destiné uniquement à la décoration et sera évidemment redondant. Est-il possible de s'en passer ?

Bien sûr que vous le pouvez ! Si vous utilisez RGBA.

Format de description des couleurs RVBA

CSS3 vous permet de spécifier la couleur à l'aide des fonctions RVB et RGBA. Dans ce cas, nous devons indiquer la proportion de chaque composante de couleur pour laquelle un octet est alloué (de 0 à 255, au cas où quelqu'un ne le saurait pas).

La syntaxe de ce cas est très simple :

Arrière-plan : RVB (0, 255, 0) ; /* vert pur */

Pour RGBA, un quatrième paramètre est ajouté : la transparence alpha (de 0 à 1).

Arrière-plan : rgba(255, 0, 0, 0,5) ; /* rouge pur avec 50% de transparence */

La voici, la solution à notre problème. Définissez simplement la couleur d’arrière-plan à l’aide de rgba et tout ressemblera à ce que nous souhaitons. Sans images ni éléments inutiles !

Où puis-je obtenir ces numéros ?

Vous pouvez examiner les composantes de la couleur à l’aide de l’outil Pipette de Photoshop.

À propos de la compatibilité entre navigateurs

La fonction RGB étant beaucoup plus ancienne que RGBA et présente depuis l'époque de la norme CSS2, pour vous protéger contre les navigateurs les plus anciens, vous pouvez utiliser la construction en double suivante :

SomeBlock (arrière-plan : rgb(255, 0, 0); arrière-plan : rgba(255, 0, 0, 0.5); )

Avec cette approche, les arrière-grands-pères des navigateurs modernes n'auront pas de translucidité, mais la couleur elle-même restera correcte.

Vous devrez vous occuper d’IE séparément. Les ânes ne comprennent pas RGBA jusqu'à la version 8 incluse.

Comme toujours : la terre pour les paysans, les usines pour les ouvriers, et les ânes comme béquille ! Sous forme de .

Bien entendu, dans des conditions de combat, nous mettons cette règle dans un CSS distinct, que nous connectons.

SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )

L'astuce consiste à spécifier les couleurs de début et de fin de manière identique (ff0000 - rouge) et à profiter du fait que vous pouvez définir le canal alpha pour le dégradé dans ce filtre (dans l'exemple, la valeur est 80).

Pour référence : le filtre utilise le système hexadécimal et le code pour une couleur complètement opaque est FF (en décimal il est 255). En conséquence, l'hexadécimal 80 est le décimal 128, soit 50 % de transparence.

Testé dans :

• IE 6-9
• Firefox 3+
• Opéra 10+
• Safari 4
• Chrome

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.

Par 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 une 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 rendent la couleur 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

La couleur en CSS peut être définie de différentes manières :

• par nom,
• par valeur hexadécimale,
• aux formats RVB et RGBA,
• aux formats HSL et HSLA.

Définir la couleur par nom

Les navigateurs prennent en charge la spécification de certaines couleurs pour les éléments par nom. Ce tableau contient quelques mots-clés (noms de couleurs en anglais) utilisés pour spécifier les propriétés de couleur, le code RVB, le code hexadécimal (HEX) et le code HSL.

Ceci est un exemple d'utilisation de noms de couleurs, les noms de couleurs sont extraits de la table étendue.

Voici comment fonctionne ce code :

Définition de la couleur à l'aide de RVB

RVB est un modèle de couleur additif. En anglais ajout- ajout. RVB est une abréviation des mots anglais : Red, Green, Blue - rouge, vert, bleu). Il ressort clairement de cela que dans le modèle RVB, les couleurs sont synthétisées en ajoutant trois couleurs (rouge, vert, bleu) en quantités différentes.

En mélangeant les couleurs rouge, vert et bleu, vous pouvez obtenir plusieurs millions de nuances. Toutes les combinaisons possibles sont stockées dans la mémoire de l'ordinateur.

Allez droit au but.

Pour définir les propriétés dans ce format, utilisez la notation rgb(r, g, b) , où r, g, b sont les trois canaux pour chaque couleur (rouge, vert, bleu). Les valeurs de chaque canal sont définies dans la plage de 0 à 255.

Exemple de code.

Pour que tout soit clair, voici un exemple de code :

Voici comment cet exemple devrait fonctionner :

Des explications par exemple.

Au début de la page on crée la classe div.rgb, elle est nécessaire pour les blocs créés par la balise

étaient affichés dans la taille requise : 240px par 40px. Nous attribuons à la propriété line-height une valeur de 40px, c'est-à-dire égale à la hauteur du bloc, cela vous permettra d'afficher du texte dans le bloc

au centre vertical. On centre le texte horizontalement en utilisant la règle ( texte-align : centre ;).

Ensuite, dans le code, nous définissons la couleur d'arrière-plan du bloc

en utilisant l'attribut style, en utilisant la propriété background et en attribuant des valeurs à rgb(255, 0, 0) , rgb(0, 255, 0) et rgb(0, 0, 255) . Autrement dit, nous rendons alternativement un canal aussi saturé que possible et les canaux restants ne sont pas utilisés pour la synthèse, car leur valeur est nulle.

Essayez de modifier cet exemple et de spécifier vos propres valeurs, par exemple rgb(100, 100, 100) .

Définition de la couleur à l'aide de RGBA

CSS3 dispose d'un nouvel outil pour travailler avec la couleur : le format RGBA. On peut l'appeler une évolution du modèle RVB, mais avec l'ajout d'un nouveau canal : le canal A ou alpha. Ce canal définit la transparence de la couleur. Ses valeurs sont définies dans la plage de 0 à 1. Une valeur de 0 correspond à une transparence totale, 1 - une opacité totale (la couleur sera la même que celle spécifiée dans les trois premiers canaux RVB) et des valeurs intermédiaires ​​comme 0,4 ou 0,6 - translucidité à des degrés divers.

Exemple de code.

Voici comment cela fonctionnera :

Ce code est visuellement similaire au suivant, qui utilise le modèle RVB pour spécifier une valeur de couleur :

Voici son résultat :

Une valeur de canal alpha égale à zéro rend toute couleur invisible - absolument transparente ; une valeur égale à un traduit la couleur dans le code RVB sans modification. La propriété rgba(255,0,0,1.0) affiche la couleur rouge rgb(255, 0, 0) .

Par valeur hexadécimale (code HEX)

Dans la vie de tous les jours, nous utilisons le système de comptage décimal. Ses origines sont très simples : nous avons dix doigts sur nos mains et compter sur nos doigts est pratique dans la vie. Si le système décimal a dix chiffres : de 0 à 9 et que le nombre 10 est le chiffre suivant, alors le système numérique hexadécimal a 16 chiffres et le chiffre suivant est le nombre 16.

Pour indiquer les codes de couleur, les chiffres décimaux ordinaires de 0 à 9 sont utilisés comme chiffres hexadécimaux, et les lettres latines de A à F sont utilisées pour indiquer les nombres de 10 à 15, c'est-à-dire (0, 1, 2, 3, 4, 5 , 6, 7, 8, 9, A, B, C, D, E, F). Pour plus de clarté, mettons cela dans un tableau :

Pour écrire des nombres hexadécimaux supérieurs à F (15 dans le système décimal), comme dans le système décimal, ils utilisent également la combinaison de deux chiffres, mais déjà hexadécimaux, ce qui est évident. Ainsi, pour écrire le nombre décimal 255 en notation hexadécimale, utilisez la notation FF.

Le système hexadécimal est plus compréhensible pour l'ordinateur et il traite plus rapidement les valeurs définies par valeur hexadécimale.

Pour spécifier une couleur en hexadécimal, faites précéder la valeur numérique d'un signe « # », exemple : #FFC0CB. La valeur #FFC0CB elle-même est composée de trois chiffres hexadécimaux FF, C0 et CB. La signification de cette entrée est la même que celle du réglage de la couleur au format RVB (rgb(r, g, b)) - chaque chiffre hexadécimal du code HEX indique la saturation des couleurs dans son canal du modèle RVB.

#FF0000

#00FF00

#0000FF

Ce code affichera les éléments suivants :

Et voici une image avec le résultat de la section "Définition des couleurs à l'aide de RVB" sur cette page ci-dessus.

Figure 1. Couleurs en RVB.

On voit que les couleurs sont identiques.

Une notation abrégée du code couleur HEX est autorisée : un nombre à 6 chiffres peut être écrit sous la forme d'un nombre à 3 chiffres. Ceci n'est valable que lorsque deux chiffres de la valeur de couleur d'un canal sont répétés.

Autrement dit, l'abréviation suivante est acceptable :

Par exemple, la couleur #ff22aa peut s'écrire #f2a, ou la couleur #44aa22 peut s'écrire #4a2.

Définition de la couleur à l'aide de HSL

CSS3 a un nouveau format pour spécifier les couleurs.

Le format HSL est l'abréviation des mots anglais : Hue (teinte), Saturate (saturation) et Lightness (légèreté).

La teinte en HSL est la valeur d'une couleur sur une roue chromatique spéciale (Figure 2) et est spécifiée en degrés. Si l’on fait des analogies avec le modèle RVB, alors 0° correspond au rouge, 120° correspond au vert et 240° correspond au bleu.

La valeur de teinte passera de 0 à 359.

Figure 2. Roue chromatique HSL.

La deuxième valeur - la saturation (Saturate) est définie en pourcentage. A 100 % de saturation, la couleur est la plus « juteuse » possible ; à mesure que l'indicateur de saturation se rapproche de 0 %, la couleur devient plus terne et vire au gris.

La troisième valeur, Légèreté, est également définie sous forme de pourcentage. Plus le pourcentage est élevé, plus la couleur sera brillante. Les valeurs extrêmes de 0 % et 100 % indiqueront respectivement les couleurs noire (pas de lumière) et blanche (surexposée), et peu importe la couleur de la roue chromatique qui a été sélectionnée dans le premier canal. La valeur optimale de luminosité des couleurs est de 50 %.

Définition de la couleur à l'aide de HSLA

Le format HSLA est lié au HSL, tout comme RGB l'est au RGBA. Au format HSLA, comme en RGBA, un canal alpha est ajouté, responsable de la transparence des couleurs.

La couleur spécifiée au format HSL est plus facile à lire. On peut dire que c'est intuitif. Par exemple, le code hsl(120,60%,50%) peut représenter la couleur finale s'il y a une image de la roue chromatique HSL en mémoire. On ne peut pas en dire autant des formats RVB et HEX : le code couleur spécifié dans ces formats ne devient clair qu'après avoir été visualisé sur le moniteur.

Les nouveaux formats en CSS3 (HSL, HSLA et RGBA) fonctionnent dans les navigateurs à partir des versions : IE 9.0, Opera 10.0 Firefox 3.0. Comment puis-je faire fonctionner les styles sur les anciens navigateurs ?

Someblosk ( couleur d'arrière-plan : rgb(255,50,50); couleur d'arrière-plan : rgba(255,50,50,0.85) )

Lors de l'utilisation de ce code dans des navigateurs plus anciens, la couleur d'arrière-plan de la classe .somebloсk, bien qu'elle n'utilise pas de canal alpha, sera affichée au format RVB.