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.
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 |
La couleur en CSS peut être définie de différentes manières :
- de 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.
Nom | Couleur | RVB | HEXAMEN | LGV | Description |
---|---|---|---|---|---|
blanc | RVB (255, 255, 255) | #ffffff ou #fff | hsl(0, 0%, 100%) | Blanc | |
argent | RVB (192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Gris | |
gris | RVB (128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Gris foncé | |
noir | RVB (0, 0, 0) | #000000 ou #000 | hsl(0, 0%, 0%) | Noir | |
bordeaux | RVB (128, 0, 0) | #800000 | hsl(0, 100 %, 25 %) | Rouge foncé | |
rouge | RVB (255, 0, 0) | #ff0000 ou #f00 | hsl(0, 100 %, 50 %) | Rouge | |
orange | RVB (255, 165, 0) | #ffa500 | hsl(38,8, 100 %, 50 %) | Orange | |
jaune | RVB (255, 255, 0) | #ffff00 ou #ff0 | hsl(60, 100 %, 50 %) | Jaune | |
olive | RVB (128, 128, 0) | #808000 | hsl(60, 100 %, 25 %) | olive | |
citron vert | RVB (0, 255, 0) | #00ff00 ou #0f0 | hsl(120, 100 %, 50 %) | Vert clair | |
vert | RVB (0, 128, 0) | #008000 | hsl(120, 100 %, 25 %) | Vert | |
aqua | RVB (0, 255, 255) | #00ffff ou #0ff | hsl(180, 100 %, 50 %) | Bleu | |
bleu | RVB (0, 0, 255) | #0000ff ou #00f | hsl(240, 100 %, 50 %) | Bleu | |
marine | RVB (0,0,128) | #000080 | hsl(240, 100 %, 25 %) | Bleu foncé | |
sarcelle | RVB (0, 128, 128) | #008080 | hsl(180, 100 %, 25 %) | Bleu vert | |
fuchsia | RVB (255, 0, 255) | #ff00ff ou #f0f | hsl(300, 100 %, 50 %) | Rose | |
violet | RVB (128, 0, 128) | #800080 | hsl(300, 100 %, 25 %) | Violet |
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.
Arriver au point.
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 :
Fig. 1. Couleurs en RVB.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
Ensuite, dans le code, nous définissons la couleur d'arrière-plan du bloc
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.
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.
Fig. 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.
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.
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 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. 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. À cette fin, un éditeur graphique capable de fonctionner avec différents modèles de couleurs, par exemple Adobe Photoshop, convient. 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 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.
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 RVB, HSL et la 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 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
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 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
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 !
Le résultat de cet exemple est présenté sur la Fig. 2.
Riz. 2. Couleurs sur la page Web