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 principalement utilisée est basée sur système hexadécimal le calcul comme le plus universel.
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.
FA. | + | 8E | + | 47 | = | FA8E47 |
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 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. Comment plus grand nombre, ceux couleur plus claire, les valeurs passent 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. La situation est similaire avec vert(#00FF00) et bleu (#0000FF).
- Jaune(#FFFF00) est obtenu en mélangeant le rouge et le 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. Cercle de couleur
Les couleurs basées sur des valeurs hexadécimales ne doivent pas nécessairement être sélectionnées de manière empirique. Convient à cet effet éditeur graphique, capable de travailler avec différents modèles de couleurs, par exemple, Adobe Photoshop. En figue. 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 d'une couleur dans Programme Photoshop
Couleurs du Web
Si vous réglez la qualité du rendu des couleurs du moniteur sur 8 bits (256 couleurs), la même couleur peut être affichée dans différents navigateursà ma façon. 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. DANS ce moment 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.
Nom de la couleur | Couleur | Description | Valeur hexadécimale |
---|---|---|---|
noir | Noir | #000000 | |
bleu | Bleu | #0000FF | |
fuchsia | Violet clair | #FF00FF | |
gris | Gris foncé | #808080 | |
vert | Vert | #008000 | |
citron vert | Vert clair | #00FF00 | |
bordeaux | Rouge foncé | #800000 | |
marine | Bleu foncé | #000080 | |
olive | olive | #808000 | |
violet | Violet foncé | #800080 | |
rouge | Rouge | #FF0000 | |
argent | Gris clair | #C0C0C0 | |
sarcelle | Bleu vert | #008080 | |
blanc | Blanc | #FFFFFF | |
jaune | Jaune | #FFFF00 |
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 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
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Les navigateurs prennent en charge certaines couleurs par leur nom. Dans le tableau 1 montre les noms, le code hexadécimal, les valeurs dans Format RVB, HSL et description.
Nom | Couleur | Code | RVB | LGV | Description |
---|---|---|---|---|---|
blanc | #ffffff ou #fff | RVB (255 255 255) | hsl(0,0%,100%) | Blanc | |
argent | #c0c0c0 | RVB (192 192 192) | hsl(0,0%,75%) | Gris | |
gris | #808080 | RVB (128 128 128) | hsl(0,0%,50%) | Gris foncé | |
noir | #000000 ou #000 | RVB (0,0,0) | hsl(0,0%,0%) | Noir | |
bordeaux | #800000 | RVB (128,0,0) | hsl(0,100%,25%) | Rouge foncé | |
rouge | #ff0000 ou #f00 | RVB (255,0,0) | hsl(0,100%,50%) | Rouge | |
orange | #ffa500 | RVB (255 165,0) | hsl(38,8,100%,50%) | Orange | |
jaune | #ffff00 ou #ff0 | RVB (255 255,0) | hsl(60,100%,50%) | Jaune | |
olive | #808000 | RVB (128 128,0) | hsl(60,100%,25%) | olive | |
citron vert | #00ff00 ou #0f0 | RVB (0,255,0) | hsl(120,100%,50%) | Vert clair | |
vert | #008000 | RVB (0,128,0) | hsl(120,100%,25%) | Vert | |
aqua | #00ffff ou #0ff | RVB (0,255,255) | hsl(180,100%,50%) | Bleu | |
bleu | #0000ff ou #00f | RVB (0,0,255) | hsl(240,100%,50%) | Bleu | |
marine | #000080 | RVB (0,0,128) | hsl(240,100%,25%) | Bleu foncé | |
sarcelle | #008080 | RVB (0,128,128) | hsl(180,100%,25%) | Bleu vert | |
fuchsia | #ff00ff ou #f0f | RVB (255,0,255) | hsl(300,100%,50%) | Rose | |
violet | #800080 | RVB (128,0,128) | hsl(300,100%,25%) | Violet |
Utiliser RVB
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
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 de 0 à 255. Il est également possible de définir la couleur en pourcentage, 100 % correspondant au nombre 255. Indiquez d'abord mot-clé rgb , puis les composantes de couleur sont indiquées entre parenthèses, séparées par des virgules, par exemple rgb(255, 128, 128) ou rgb(100%, 50%, 50%).
RVBA
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 valeur intermédiaire comme 0,5 - translucidité.
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
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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
Internet Explorer | Chrome | Opéra | Safari | Firefox | Android | IOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
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 !
Résultat cet exemple montré sur la fig. 2.
Riz. 2. Couleurs sur la page Web
26/02/15 8,9KComme 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 modèle de couleur, représentant une méthode d'obtention de toutes les couleurs et de leurs nuances en mélangeant dans des proportions variables les trois composants principaux, qui sont :
- 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 écrans d'ordinateur. Puisque les fabricants dotent leurs produits différentes caractéristiques, a été créé en 1996 un système 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 voir ça ici. Cette table 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 :
Utiliser des codes Couleurs RVBà partir de cette palette, un développeur web n'a pas à se soucier de l'affichage des couleurs sur les pages de son site lorsqu'elles sont consultées à l'aide de différents navigateurs, sur diverses plateformes et des 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 prend beaucoup lieu important dans l'histoire, même s'il n'est pas le plus expressif. 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. Mélangées entre elles et avec du papier blanc dans des proportions différentes, ces trois couleurs primaires donnent des couleurs différentes. nuances de couleurs, sauf pour le noir pur, ou en l'absence totale de peintures, ils 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, dont chacun est 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 certains valeurs hexadécimales Couleurs RVB : 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 spécifier 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 plateformes Avec des paramètres système différents, le rendu correct des couleurs constitue un problème. Le fait est que le navigateur essaie toujours de s'ajuster palette de couleurs document sous les paramètres du système et les 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 |
Les codes de couleur en CSS sont utilisés pour spécifier les couleurs. Généralement, les codes de couleur ou valeurs de couleur sont utilisés pour définir la couleur du premier plan d'un élément (par exemple, couleur du texte, couleur du lien) ou de la couleur d'arrière-plan d'un élément (couleur d'arrière-plan, couleur du 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 définir vos valeurs de couleur dans divers 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, comme 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.
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 |