Couleur perle RVB. Couleurs par nom. Couleurs CSS - Valeurs RVB

Vlad Merjevitch

En HTML, la couleur est spécifiée de deux manières : à l'aide d'un code hexadécimal et par le nom de certaines couleurs. La méthode basée sur le système numérique hexadécimal est majoritairement utilisée, car elle est la plus universelle.

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. Dans le 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 numérique, un nombre hexadécimal est précédé d'un symbole 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 ressemble à ceci.

Ici, la couleur d'arrière-plan de la page Web est définie sur #FA8E47. Le symbole dièse # devant un nombre signifie qu'il est hexadécimal. Les deux premiers chiffres (FA) définissent la composante rouge de la couleur, les troisième à quatrième chiffres (8E) définissent la composante verte et les deux derniers chiffres (47) définissent la composante bleue. Le résultat final sera cette couleur.

Chacune des trois couleurs - rouge, vert et bleu - peut prendre des valeurs de 00 à FF, ce qui donne un total de 256 nuances. Ainsi, le nombre total de couleurs peut être de 256x256x256 = 16 777 216 combinaisons. Un modèle de couleur basé sur des composants rouges, verts et bleus 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 la couleur blanche.

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 le résultat sera une teinte grise. Plus le chiffre est élevé, plus la couleur est claire, avec des valeurs allant de #000000 (noir) à #FFFFFF (blanc).
• Une couleur rouge vif se forme si la composante rouge est rendue maximale (FF) et les composantes restantes sont mises à zéro. Une couleur avec une valeur de #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 et du vert. Ceci est bien visible sur la roue chromatique (Fig. 6.1), qui présente les couleurs primaires (rouge, vert, bleu) et les couleurs complémentaires ou supplé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 proches. Ainsi, le cyan (#00FFFF) est obtenu en combinant le bleu et le vert.

Riz. 6.1. Roue chromatique

Les couleurs basées sur des valeurs hexadécimales ne doivent pas nécessairement être sélectionnées de manière empirique. À cette fin, un éditeur graphique capable de fonctionner avec différents modèles de couleurs, par exemple Adobe Photoshop, convient. Sur la fig. La figure 6.2 montre la fenêtre de sélection d'une couleur dans ce programme ; la valeur hexadécimale résultante de la couleur actuelle est entourée d'une ligne. Vous pouvez le copier et le coller dans votre code.

Riz. 6.2. Fenêtre de choix des couleurs dans Photoshop

Couleurs du Web

Si vous définissez la qualité du rendu des couleurs du moniteur sur 8 bits (256 couleurs), la même couleur peut être affichée différemment selon les navigateurs. Cela est dû à la façon dont les graphiques sont affichés, 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 d'elle, qui imitent celle donnée. Pour garantir que la couleur reste la même dans les différents navigateurs, une palette de couleurs dites Web a été introduite. Les couleurs Web sont les couleurs pour lesquelles chaque composant - rouge, vert et bleu - est défini sur l'une des six valeurs - 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 apparaît 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

Pour éviter d'avoir à mémoriser un ensemble de nombres, vous pouvez utiliser à la place les noms des couleurs couramment utilisées. Dans le tableau 6.3 montre les noms des noms de couleurs populaires.

Peu importe que vous spécifiiez une couleur par son nom ou en utilisant des nombres hexadécimaux. Ces méthodes sont égales dans leur effet. 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 du fond et du 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 plus de variété, l'attribut text est défini sur un nombre hexadécimal et l'attribut bgcolor est défini sur le mot-clé réservé teal .

Les codes de couleur en CSS sont utilisés pour spécifier les couleurs. Généralement, les codes de couleur ou les valeurs de couleur sont utilisés pour définir la couleur soit de la couleur de premier plan d'un élément (par exemple, couleur du texte, couleur du lien), soit de la couleur d'arrière-plan d'un élément (couleur d'arrière-plan, couleur de bloc). Ils peuvent également être utilisés pour modifier la couleur d’un bouton, d’une bordure, d’un marqueur, d’un survol et d’autres effets décoratifs.

Vous pouvez spécifier vos valeurs de couleur dans différents formats. Le tableau suivant répertorie tous les formats possibles :

Les formats répertoriés sont décrits plus en détail ci-dessous.

Couleurs CSS - Codes hexadécimaux

Code couleur hexadécimal est une représentation de la couleur à six chiffres. Les deux premiers chiffres (RR) représentent la valeur rouge, les deux suivants représentent la valeur verte (GG) et les deux derniers représentent 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 une 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 "#". Vous trouverez ci-dessous des exemples d'utilisation des notations hexadécimales.

Couleurs CSS - Valeurs RVB

Valeur RVB est un code couleur défini à l'aide de la propriété rgb(). Cette propriété prend trois valeurs : une pour le rouge, une pour le vert et une pour le bleu. La valeur peut être un nombre entier, de 0 à 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 couleurs en utilisant notre service.

Couleurs sécurisées pour le navigateur

Vous trouverez ci-dessous un tableau de 216 couleurs qui sont les plus sûres et les plus indépendantes de l'ordinateur. Ces couleurs en CSS vont de 000000 au code hexadécimal FFFFFF. Leur utilisation est sûre car ils garantissent que tous les ordinateurs affichent correctement les couleurs lorsque vous travaillez avec la palette de 256 couleurs.

En HTML, la couleur peut être spécifiée de trois manières :

Définir une 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, blanc, rouge, vert, bleu, etc. :

Couleur du texte – rouge

Les couleurs les plus populaires de la norme du World Wide Web Consortium (W3C) :

Exemple d'utilisation de différents noms de couleurs :

Exemple : spécifier une couleur par son nom

• Essayez-le vous-même »

En-tête sur fond rouge

En-tête sur fond orange

Cap sur fond citron vert

Texte blanc sur fond bleu

En-tête sur fond rouge

En-tête sur fond orange

Cap sur fond citron vert

Texte blanc sur fond bleu

Spécification de la couleur à l'aide de RVB

Lors de l'affichage de différentes couleurs sur un moniteur, la palette RVB est utilisée comme base. N'importe quelle couleur est obtenue en mélangeant trois couleurs de base : R - rouge, G - vert, B-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 puisque le rouge est réglé à sa valeur la plus élevée (255) et la le reste est réglé sur 0. Vous pouvez également définir la couleur sous forme de pourcentage. Chaque paramètre 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 de saturation moyenne :

Exemple : spécification de la couleur à l'aide de RVB

• Essayez-le 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 (identiques au décimal 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 signes 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 représentés en combinant deux caractères en une seule valeur. Par exemple, le nombre le plus élevé 255 en décimal correspond à la valeur FF la plus élevée en hexadécimal. Contrairement au système décimal, un nombre hexadécimal est précédé d’un symbole dièse. # , par exemple, #FF0000 est affiché 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). Signes après le symbole dièse # Vous pouvez taper en majuscules et en minuscules. Le système hexadécimal permet d'utiliser la forme abrégée #rgb, où chaque caractère équivaut à un double. Ainsi, l'entrée #f7O doit être considérée comme #ff7700.

Exemple : Couleur HEX

• Essayez-le 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 courantes (nom, HEX et RVB) :

Codes couleurs (fond) par saturation et teinte.