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 :
- Couleur rouge ( Rouge);
- couleur verte ( 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 la manière dont 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. Étant donné que les fabricants confèrent à leurs produits des caractéristiques différentes, un système de synthèse de couleurs unifié basé sur RVB appelé sRGB a été créé en 1996, sur lequel Microsoft et HP ont travaillé ensemble.
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 voir ça 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 totalement inacceptable :
En utilisant les codes de couleurs RVB de cette palette, un développeur Web peut avoir l'esprit tranquille quant à l'affichage des couleurs sur les pages de son site Web lorsqu'elles sont visualisées à l'aide de différents navigateurs, plates-formes et moniteurs. Même si pour le moment le tableau des couleurs sûres perd de sa pertinence ( le progrès technologique ne s'arrête toujours pas), en l'utilisant, vous pouvez, comme on dit, dormir paisiblement.
Couleur or dans le modèle RVB
Le mot « or » a été utilisé pour la première fois au début du 14ème siècle pour décrire la couleur d'un élément chimique appelé Aurum - l'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 les sculptures anciennes, étaient constitués de stéatite et de stéatite, qui ont une teinte beige. Dans le modèle RVB, la couleur beige a les représentations numériques suivantes.
>>Gestion des couleurs
Valeurs de couleur RVB hexadécimales
Les méthodes de description et de traitement des couleurs diffèrent les unes des autres par la représentation finale à laquelle elles sont destinées. Comparons, par exemple, la représentation des couleurs pour l'impression et pour les écrans d'ordinateur. Dans le premier cas, la base est prise blanc la couleur du papier sur lequel sont ensuite appliquées trois couleurs primaires : bleu, violet Et jaune. Se mélangeant entre elles et avec la couleur blanche du papier dans des proportions différentes, ces trois couleurs primaires donnent des nuances de couleurs différentes, sauf pour le noir pur, ou en l'absence totale de peintures elles donnent du papier blanc. Si on leur ajoute de la couleur noire, on obtient CMJN-une méthode de transmission de couleur lorsque la couleur requise est obtenue en soustrayant les couleurs manquantes du blanc.
Dans le deuxième cas, la base est prise noir la couleur de l'écran du moniteur, dont chaque cellule brille dans l'une des trois couleurs suivantes : rouge-rouge, vert-vert et bleu-bleu. Ensuite, en l'absence totale de toute lueur, nous obtenons une couleur d'écran noire pure, et chacune des couleurs requises est donnée par le rapport de chacune des trois couleurs. Dans ce cas, nous obtiendrons RVB-méthode de transmission des couleurs. Les couleurs primaires peuvent varier de 0
avant 255
, ou de 0%
avant 100%
, ou peut être représenté sous forme de valeur hexadécimale. Dans la figure ci-dessous, vous pouvez voir les résultats du mélange des couleurs primaires.
Le système de numérotation hexadécimal, contrairement au système de numérotation décimal, n'a pas dix chiffres, mais seize - d'où son nom. En conséquence, il ne peut y avoir que des variantes non répétitives de combinaisons de deux chiffres - 256 , pour continuer la série de nombres après 9 lettres de UN avant F, donc la série ressemblera à ceci -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Dans ce cas, la couleur est spécifiée par trois nombres hexadécimaux, chacun étant composé de deux chiffres. Le premier chiffre détermine l'intensité rouge couleurs, moyen- vert, dernière chose- bleu couleurs. Tous les nombres peuvent prendre des valeurs comprises entre 00 avant FR(de 0 à 255). Par exemple : la couleur verte est donnée par #00FF00, rouge - comme #FF0000, bleu - comme #0000FF, blanc - comme #FFFFFF, l'absence totale de couleur ou de noir est donnée par #000000 .
Dans le formulaire ci-dessous, vous pouvez spécifier n'importe quelle valeur hexadécimale pour chacune des trois couleurs et voir le résultat de leur mélange en cliquant dans le champ de sortie.
Exemples de valeurs de couleur RVB hexadécimales : dégradés de rouge, bleu et vert.
| voir | code | voir | code | voir | code | voir | code | voir | code | voir | code |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Spécification de la couleur à l'aide de chaînes littérales
Pour faciliter leur utilisation, certaines couleurs et leurs combinaisons se sont vu attribuer des noms reconnus par tous les navigateurs, et il est devenu possible d'en définir plusieurs par leur nom. Le tableau ci-dessous montre certains des noms de couleurs :
| voir | Nom | voir | Nom | voir | Nom | voir | Nom |
| Blanc | Rouge | Orange | Jaune | ||||
| Vert | Bleu | Violet | Noir | ||||
| Alicebleu | Blanc antique | Aqua | Bleu vert | ||||
| Azur | Beige | Bisque | Blanchedalmonde | ||||
| Bleuviolet | Brun | Bois bohu | Cadetbleu | ||||
| Chartreuse | Chocolat | corail | Bleuet | ||||
| Soie de maïs | cramoisi | Cyan | Bleu foncé | ||||
| Cyan foncé | Verge d'or foncé | Gris foncé | Vert foncé | ||||
| Kaki foncé | Magenta foncé | vert olive foncé | Orange sombre | ||||
| Orchidée noire | Rouge foncé | Saumon noir | Vert d'eau foncé | ||||
| Bleu ardoise foncé | Gris ardoise foncé | Turquoise foncé | Violet foncé | ||||
| Rose profond | Bleu ciel profond | Gris foncé | Bleu Dodger | ||||
| Brique réfractaire | Floralblanc | Forêt verte | Fuschia | ||||
| Gainsboro | Blanc fantôme | Or | Verge d'or | ||||
| Gris | Vert jaune | Miellat | Rose vif | ||||
| Rouge indien | Indigo | Ivoire | Kaki | ||||
| Lavande | Blush lavande | Mousseline de Citron | Bleu clair | ||||
| Corail clair | Cyan clair | Tige froide légèrejaune | Vert clair | ||||
| Gris clair | Rose clair | Saumon clair | Vert d'eau clair | ||||
| Bleu ciel clair | Gris ardoise clair | Bleu acier clair | Jaune clair | ||||
| Citron vert | Vert citron | Lin | Magenta | ||||
| Bordeaux | Aigue-marine moyenne | Bleu moyen | Orchidée moyenne | ||||
| Violet moyen | Vert d'eau moyen | Bleu ardoise moyen | Vert printemps moyen | ||||
| Turquoise moyen | Rouge violet moyen | Bleu nuit | Crème à la Menthe | ||||
| Rose brumeuse | Navajoblanc | Marine | Vieille dentelle | ||||
| olive | Olivierab | Rouge-orange | Orchidée | ||||
| Verge pâle | Vert pâle | Paletteurquoise | Rouge Paleviolet | ||||
| Papayawhip | Choux aux pêches | Pérou | Rose | ||||
| Prune | Poudre bleue | Brun rosé | Bleu royal | ||||
| Brun selle | Vert d'eau | Coquillage | Terre de sienne | ||||
| Argent | Bleu ciel | Bleu ardoise | Gris ardoise | ||||
| Neige | Vert printanier | Bleu acier | bronzer | ||||
| Sarcelle | Chardon | Tomate | Turquoise | ||||
| Violet | Blé | Fumée blanche | Vert jaunâtre |
Utiliser une palette de couleurs sûre
Malheureusement, sur différentes plates-formes, avec des paramètres système différents, la reproduction correcte des couleurs est un problème. Le fait est que le navigateur essaie toujours d'ajuster la palette de couleurs du document aux paramètres du système et aux capacités du moniteur, en mélangeant indépendamment les couleurs et en les remplaçant. De ce fait, parfois l’utilisateur ne voit pas exactement ce que le webmaster a voulu lui montrer. Un moyen de sortir de cette situation a été trouvé en utilisant une palette dont chaque couleur est garantie d'être rendue de manière égale par tous les navigateurs sur différentes plates-formes. C'est ce qu'on appelle garanti palette, également appelée sûr palette. Cette palette comprend des couleurs dont les composantes de couleur prennent les valeurs suivantes : 00 ,33 ,66 ,99 , CC,FR, de toutes les manières possibles 216 leurs combinaisons.
| voir | code | voir | code | voir | code | voir | code | voir | code | voir | code |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
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) :
| Couleur | Nom | Couleur | Nom | Couleur | Nom | Couleur | Nom |
|---|---|---|---|---|---|---|---|
| Noir | Gris | Argent | Blanc | ||||
| Jaune | Citron vert | Aqua | Fuchsia | ||||
| Rouge | Vert | Bleu | Violet | ||||
| Bordeaux | olive | Marine | Sarcelle |
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 vert moyen :
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) :
| nom anglais | nom russe | Échantillon | HEXAMEN | RVB | ||
|---|---|---|---|---|---|---|
| Amarante | Amarante | #E52B50 | 229 | 43 | 80 | |
| ambre | ambre | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Bleu vert | #00FFFF | 0 | 255 | 255 | |
| Azur | Azur | #007FFF | 0 | 127 | 255 | |
| Noir | Noir | #000000 | 0 | 0 | 0 | |
| Bleu | Bleu | #0000FF | 0 | 0 | 255 | |
| Bleu Bondi | L'eau de la plage de Bondi | #0095B6 | 0 | 149 | 182 | |
| Laiton | Laiton | #B5A642 | 181 | 166 | 66 | |
| Brun | Brun | #964B00 | 150 | 75 | 0 | |
| Azuré | 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 | |
| Citron vert | Citron vert | #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 d'eau | 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 couleurs (fond) par saturation et teinte.
28/11/14 11,1KMalheureusement, il n'est pas encore possible d'afficher les sensations gustatives sur le site Internet. Mais cela peut être entièrement compensé par les couleurs. Après tout, les couleurs HTML vous permettent d’afficher des millions de nuances. Donc " crayons de couleur Il y en a bien plus de sept dans son ensemble.
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 numérique hexadécimal est utilisé. Ces codes de couleur en HTML sont constitués 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 concerne le contenu de la couleur verte ;
- Ce dernier est pour son contenu bleu.
Un dièse est placé au début du code (avant les chiffres). Il s'agit du code couleur hexadécimal. En plus des chiffres de 1 à 9, ce système numérique utilise des lettres de l'alphabet latin (A, B, C, D, E, F).
Par exemple, le code de couleur blanche en HTML ressemblera à #FFFFFF:
2. Mot-clé – HTML prend actuellement en charge environ 147 mots-clés. Mais tous ces mots ne sont pas uniques. Certains d’entre eux font référence à la même nuance de couleur.
La couleur grise est représentée 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 des couleurs en html est basé sur l'utilisation de trois valeurs, définies dans la plage de 0 à 255. Chacune d'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 sous la forme suivante : rgb(0, 210, 100).
couleur d'arrière-plan : rvb (100 186,43)
4. Au format RGBA - il s'agit d'un format RVB amélioré, où la quatrième valeur spécifie la transparence de la couleur sous forme de 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 se tromper. Par conséquent, une table de couleurs spéciale a été inventée. Il fournit 147 noms clés de nuances de couleurs avec des codes de conformité dans toutes les principales normes de couleurs. De plus, chaque champ est équipé d'une barre pour la sélection visuelle des couleurs. L'un de ces tableaux est présenté sur le site colourscheme.ru :
Mais même avec cette structuration des correspondances, choisir la bonne teinte peut s’avérer difficile. Et ce n’est pas un fait que le tableau des codes couleurs contiendra celui dont vous avez besoin.
Pour contourner cet obstacle et faciliter au maximum le choix de la bonne teinte, des services web 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 des formats basiques.
Mais le générateur de couleurs n'est pas disponible uniquement sur les sites spécialisés. Presque tous les éditeurs graphiques sont équipés d'un outil similaire. Par exemple, Photoshop :
Précautions de sécurité lorsque vous travaillez avec de la couleur
Et c'était il y a longtemps, à l'époque des cartes vidéo qui ne prenaient en charge que 256 couleurs. À cette époque lointaine, les systèmes d’exploitation ne pouvaient afficher qu’un certain nombre de nuances de huit bits sans distorsion.
Ensuite, une grande table de couleurs sûres a été élaborée. Il spécifiait 216 nuances qui pouvaient être affichées sans distorsion dans n'importe quel navigateur de l'époque. Et à ce jour, ce " superbe manuscrit» est encore disponible sur certaines ressources :
Aujourd'hui, tout a changé. Par conséquent, toutes les règles de sécurité lors du travail avec la couleur 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.
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 les plus sécurisées et 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 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 |