Noms de couleurs CSS. 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. Couleurs et codes de formatage

Comme vous le savez, la couleur peut affecter l’état d’une personne : à la fois mental et physique. Chaque jour, en parcourant des sites Internet, nos yeux évaluent des millions de couleurs et de nuances. Un concepteur de sites Web familier avec la psychologie des couleurs peut manipuler l'humeur du visiteur pour atteindre certains objectifs.

Cela est dû au fait que certaines nuances calment et d'autres, au contraire, excitent. Nous parlerons ensuite de la façon dont la couleur est synthétisée et affichée à l’aide de la technologie informatique.

RVB est un modèle de couleur qui représente une méthode d'obtention de toutes les couleurs et de leurs nuances en mélangeant dans diverses proportions trois composants principaux, à savoir :

• rouge ( Rouge);
• vert ( Vert);
• couleur bleue ( Bleu).

C'est de là que vient le nom abrégé RVB. Ces couleurs ont été choisies comme principales pour une raison : la raison est la physiologie de la rétine de l'œil humain, et comment elle les perçoit :

Le modèle RVB reste le plus populaire aujourd'hui et est utilisé pour reproduire les couleurs sur les écrans de télévision et d'ordinateur. Puisque les fabricants dotent leurs produits différentes caractéristiques, a été créé en 1996 système unifié Synthèse de couleurs basée sur RVB appelée sRGB, développée conjointement par Microsoft et HP.

Représentation numérique de la couleur

Comme mentionné précédemment, les couleurs RVB sont formées en mélangeant des couleurs primaires. Pour décrire l'intensité de chacun d'eux, un schéma a été adopté dans lequel la couleur est représentée par la plage 0-255 (8 bits), ce qui en notation hexadécimale correspond à 00-FF.

Autrement dit, les couleurs primaires ressembleront à ceci :

• Rouge – RVB (255,0,0) ;
• Vert – RVB (0,255,0) ;
• Bleu – RVB (0,0,255) ;

Si l'intensité de la couleur prend des valeurs inférieures à 255, alors différentes nuances de rouge, de vert et de bleu sont obtenues. Voici un tableau de leurs gradations, ainsi que les valeurs hexadécimales de chacune des nuances :

Tables de couleurs RVB

Naturellement, en plus des dégradés de couleurs primaires, il en existe des mixtes, et leur nombre est assez important. Par conséquent, un tableau des couleurs RVB a été créé, qui présente toutes les nuances existantes, ainsi que leurs noms et représentations numériques ( sous forme décimale et hexadécimale).

Vous pouvez le voir ici. Ce tableau facilite grandement la vie des concepteurs de sites Web, puisqu'en quelques secondes, vous pouvez trouver la teinte souhaitée et connaître sa représentation numérique.

Palette de couleurs RVB sécurisée

Cependant, à un moment donné, il y a eu un problème avec l'affichage des couleurs dans différents navigateurs, et pour le résoudre, la palette dite « sûre » de couleurs RVB a été compilée, dérivée de calculs mathématiques.

Lorsque le navigateur ne parvient pas à afficher une couleur correctement, il essaiera d'obtenir quelque chose de proche de ce dont il a besoin en mélangeant des couleurs adjacentes, et le résultat sera très probablement complètement inacceptable :

Utiliser des codes Couleurs RVB A partir de cette palette, un développeur web n'a plus à se soucier de l'affichage des couleurs sur les pages de son site web lorsqu'elles sont consultées à l'aide de différents navigateurs, sur différentes plateformes et moniteurs. Bien que sur à l'heure actuelle le tableau des couleurs sûres perd de sa pertinence ( progrès technique ne reste toujours pas immobile), en l'utilisant, vous pouvez, comme on dit, dormir paisiblement.

Couleur or dans le modèle RVB

Le mot « doré » a été utilisé pour la première fois au début du 14e siècle pour décrire la couleur élément chimique appelé Aurum - or. Dans le modèle RVB, la couleur or est représentée par les valeurs numériques suivantes :

• RVB (255, 215, 0) – système décimal ;
• HEX #FFD700 – système hexadécimal.

Couleur beige dans le modèle RVB

La couleur beige occupe une place assez importante dans l’histoire, même si elle n’est pas la plus expressive. De nombreux monuments culturels, notamment des sculptures anciennes, étaient construits en stéatite et pierre ollaire ayant teinte beige. En modèle RVB couleur beige a les représentations numériques suivantes.

Pour les pages HTML, les couleurs sont indiquées principalement en système hexadécimal. Pour ce faire, deux types d'enregistrement de code sont utilisés : complet ou abrégé. Pour indiquer correctement la couleur html en entier, vous devez saisir six caractères (chiffres et/ou lettres anglaises) après le hachage, par exemple, le noir s'écrit ainsi : #000000. Le raccourci pour spécifier les couleurs HTML se compose d'un hachage et de trois chiffres et/ou lettres derrière. En même temps ce type les réserves ne peuvent être utilisées que si l'entrée complète d'une couleur donnée est constituée de symboles identiques après le dièse. Par exemple, la même couleur noire peut s’écrire ainsi : #000. Vous pouvez spécifier les couleurs HTML en utilisant des caractères grands et petits, car ils ne sont pas sensibles à la casse.

Chaque caractère écrit après "#" correspond à une certaine proportion de rouge, vert et couleurs bleues. À leur tour, tous les moniteurs sont constitués d'un grand nombre de pixels (points microscopiques), dont chacun comprend 3 « lampes de poche » (sources lumineuses) : rouge, vert et bleu. Ensuite, en ajustant l’intensité de la lumière émise par ces « lampes de poche », le moniteur affiche la couleur dont nous avons besoin.

En combinant l'intensité d'émission de la lumière rouge, bleue et verte (de 0 à 256), les moniteurs peuvent afficher 16 000 000 de nuances différentes.

De plus, les couleurs des sites Web peuvent être indiquées verbalement ou en code RVB.

Aujourd’hui, 147 couleurs peuvent être écrites verbalement. Toutefois, il est important de savoir que certains différents noms peut représenter les mêmes couleurs, par exemple Gris et Gris sont gris (#808080).

Couleurs sûres pour les sites Web.

Tous les moniteurs et navigateurs ne peuvent pas afficher correctement les 16 millions de couleurs HTML.

Si par exemple vous tombez sur une couleur que le navigateur ne parvient pas à afficher correctement, alors :

1. Le navigateur le remplace par celui qui lui ressemble le plus et peut être reproduit avec succès ;
2. Pour afficher correctement, le navigateur peut mélanger plusieurs couleurs et reproduire le résultat.

Pour garantir que la sortie dans n'importe quel navigateur et sur n'importe quel moniteur est la couleur que vous avez spécifiée dans le code, il est recommandé d'utiliser « Couleurs sûres ». Ils n'ont pas été déterminés manuellement ou par le désir de quelqu'un d'autre, mais mathématiquement. Il existe 216 de ces couleurs 100 % sûres pour les documents HTML, et bien que les technologies actuelles aient atteint le point suivant. moniteurs modernes et les navigateurs reconnaissent des millions de nuances, nous vous recommandons d'utiliser ces couleurs sûres pour garantir la reproduction des couleurs.

Ce tableau comprend 216 codes de couleurs HTML sécurisés. Chaque couleur a une valeur en RVB pour spécifier la couleur dans les éditeurs graphiques et en HEX pour spécifier la couleur dans les pages HTML.

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

HEX est un système de représentation des couleurs hexadécimal basé sur la 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 sur Anglais.

Lors de la création d'une image couleur, le principal problème est la reproduction correcte des couleurs sur différents types 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

Les codes de couleur en CSS sont utilisés pour spécifier une couleur. 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 graphique logiciel, tel que Adobe Photoshop, Tirage de base, 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.

Tableau (palette) de couleurs html vous donne la possibilité de choisir indépendamment le ton dont vous avez besoin. La valeur de couleur est affichée dans trois formats : Hex, RVB et HSV.

• Hex se compose de trois valeurs à deux caractères dans le système numérique hexadécimal. Par exemple : #ff00b3, où la première paire de chiffres est rouge, la deuxième est verte et la troisième est bleue.
• RVB (RedGreenBlue) a la forme « 200 100 255 », indiquant la quantité de ton correspondant (rouge, vert, bleu) dans la couleur résultante.
• HSV (Teinte, Saturation, Valeur - tonalité, saturation, valeur) - un modèle de couleur dans lequel les coordonnées sont :
  • Teinte - tonalité de couleur, peut varier de 0° à 360°.
  • Saturation - saturation, varie de 0-100 ou 0-1. Plus ce paramètre est élevé, plus la couleur est « pure », c'est pourquoi ce paramètre est parfois appelé pureté des couleurs. Et plus ce paramètre est proche de zéro, plus couleur plus proche au gris neutre.
  • Valeur (valeur de couleur) - définit la luminosité, la valeur peut également varier entre 0-100 ou 0-1.

Entrez le code couleur : ALLER

Liste des couleurs avec noms

Le tableau répertorie les noms de couleurs anglais (qui peuvent être utilisés comme valeurs) pris en charge par tous les navigateurs et leurs valeurs hexadécimales. Toutes les couleurs répertoriées sont « sûres », ce qui signifie qu’elles apparaîtront de la même manière dans tous les navigateurs.