Explication graphique détaillée des quatre méthodes de représentation de la couleur en CSS

La couleur est forcément utilisée dans la mise en page. Une bonne correspondance des couleurs ajoutera beaucoup de couleur à la page. Savez-vous comment définir la couleur sur la page ? Cet article vous parlera des différentes façons d'exprimer les couleurs. Les amis qui ne savent pas exprimer les valeurs des couleurs peuvent s'y référer. J'espère qu'il vous sera utile !

1. Mots anglais pour exprimer la couleur

La manière la plus directe et la plus simple est d'utiliser des mots anglais pour exprimer la couleur. Par exemple : rouge, nous pouvons écrire couleur : rouge. .

Inconvénients : il existe des milliers de couleurs, chaque couleur n'a pas un mot anglais correspondant et il existe des limites d'utilisation.

II. Représentation hexadécimale de la couleur

Les composantes de la couleur hexadécimale sont : #RRGGBB, où RR (rouge), GG (vert) et BB (bleu), toutes les valeurs doivent être comprises entre 0 et FF. En termes simples, l'essence de l'hexadécimal est RVB, et tous les deux chiffres représentent une couleur. Lorsque les valeurs de chacun des deux chiffres sont identiques, elles peuvent être abrégées. Par exemple, couleur : #ffcc00 peut être abrégée en couleur : #fc0.

Les valeurs de couleur hexadécimale sont prises en charge par tous les principaux navigateurs et sont recommandées.

3. RVB représente la couleur

En RVB, R représente le rouge, G représente le vert et B représente le bleu.

Écriture RVB : rgb (0,0,0). Sa plage de valeurs est comprise entre 0 et 255, plus la valeur est grande, plus la couleur est foncée. En plus d'utiliser des valeurs numériques, RVB peut également utiliser des pourcentages, avec des valeurs allant de 0 % à 100 %. Par exemple : RVB (0,0,255) et RVB (0%, 0%, 100%) représentent la même couleur.

Représentation RVB des couleurs communes. Rouge : rgb(255,0,0) ; Blanc : rgb(255,255,255) ; Noir : rgb(0,0,0)

Tous les principaux navigateurs prennent en charge les valeurs de couleur RVB.

4. HSL représente la couleur

Les valeurs de couleur HSL représentent : la teinte, la saturation et la luminosité.

La teinte est un degré sur la roue chromatique (de 0 à 360) - 0 (ou 360) est le rouge, 120 est le vert et 240 est le bleu. La saturation est une valeur en pourcentage, 0 % signifie des nuances de gris et 100 % correspond à de la couleur. La luminosité est également un pourcentage, 0 % correspond au noir et 100 % au blanc.

Remarque : IE9, Firefox, Chrome, Safari et Opera 10+ prennent en charge les valeurs de couleur HSL.

Par exemple : utilisez les quatre méthodes ci-dessus pour représenter différentes couleurs. Le code est le suivant :

Partie HTML :

<div class="color1">床前明月光</div>
<div class="color2">疑是地上霜</div>
<div class="color3">举头望明月</div>
<div class="color4">低头思故乡</div>

Partie CSS :

<style type="text/css">
	.color1{background-color:orange;}
	.color2{background-color:#FFFF00;}
	.color3{background:rgb(0,255,0);}
	.color4{background-color:hsl(360,50%,50%);}
</style>

Rendu :

La couleur de fond du div avec le nom de classe color1 est orange, exprimée directement en mots anglais ; le nom de classe color2 est jaune, exprimé par seize Le numéro de base est #FFFF00 ; la couleur d'arrière-plan du div avec le nom de classe color3 est verte, représentée par rgb(0,255,0) ; est rouge foncé, et la saturation et la luminosité sont toutes deux réglées à 50 %, représentées par des moyennes hsl (360,50 %, 50 %).

Résumé : ce qui précède présente quatre méthodes d'expression des couleurs, chacune étant différente. La méthode à choisir dépend des habitudes personnelles et des besoins de travail. Les débutants peuvent l'essayer par eux-mêmes et la combiner avec la couleur. encyclopédie. Essayez différentes couleurs, j'espère que cela vous aidera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!