Comment convertir la couleur CSS

Transformation des couleurs CSS

Dans la conception et le développement de sites Web, la couleur est un élément très important. Je pense que beaucoup de gens ont rencontré la situation suivante : dans un brouillon de conception, le concepteur donne une valeur de couleur préférée, mais cette valeur de couleur ne peut pas être directement utilisée en CSS. À ce stade, nous devons effectuer quelques opérations de conversion de couleur pour la convertir en valeurs de couleur CSS.

Ci-dessous, je présenterai les méthodes courantes de conversion des couleurs et comment les utiliser.

1. Conversion RVB

RVB est l'un des formats de couleur les plus courants. Dans la conception Web, nous utilisons souvent le format RVB hexadécimal pour représenter les couleurs.

En RVB, les valeurs de couleur des trois couleurs primaires que sont le rouge, le vert et le bleu sont des nombres compris entre 0 et 255, représentant différentes intensités de lumière de couleur.

Par exemple, nous représentons les valeurs RVB du rouge comme rouge (255,0,0), vert (0,255,0), bleu (0,0,255).

Afin de convertir les valeurs de couleur RVB en valeurs CSS, nous devons diviser la valeur RVB par 255, puis la formater au format RVB (rouge, vert, bleu) en CSS. Comme suit :

rgb(255, 0, 0) /*红色*/
rgb(0, 255, 0) /*绿色*/
rgb(0, 0, 255) /*蓝色*/

2. Conversion hexadécimale

Un autre format de couleur courant est la notation hexadécimale (Hex). En notation Hex, les valeurs de couleur sont représentées à l'aide de six chiffres hexadécimaux. En CSS, utilisez le symbole #.

En notation hexadécimale, chaque nombre à deux chiffres représente la valeur de luminosité des trois couleurs primaires : rouge, vert et bleu. Les nombres vont de 00 à FF, représentant des valeurs de 0 à 255. Par exemple, la valeur hexadécimale du rouge est #FF0000, la valeur hexadécimale du vert est #00FF00 et la valeur hexadécimale du bleu est #0000FF.

La méthode de conversion est très simple, il suffit de supprimer le # et les six chiffres hexadécimaux et de l'exprimer au format RVB.

#FF0000 /*红色*/
#00FF00 /*绿色*/
#0000FF /*蓝色*/

3. Conversion HSL

HSL est un format de couleur très intuitif, qui comprend trois paramètres : teinte, saturation et luminosité.

La valeur Hue (teinte) représente la position de la couleur sur la plaque de couleur et la plage de valeurs est de 0 à 360. La saturation représente la profondeur d'une couleur, allant de 0 % à 100 %. La luminosité (Lightness) représente la clarté et l'obscurité de la couleur, et la plage de valeurs va également de 0 % à 100 %.

La méthode de conversion est également très simple, il suffit d'utiliser le format hsl (teinte, saturation, luminosité), comme indiqué ci-dessous :

hsl(0, 100%, 50%) /*红色*/
hsl(120, 100%, 50%) /*绿色*/
hsl(240, 100%, 50%) /*蓝色*/

4. Conversion HSLA

HSLA est une version améliorée du format HSL, qui comprend également un valeur de transparence (alpha). La valeur de transparence varie de 0 à 1, 0 représentant complètement transparent et 1 représentant complètement opaque.

La méthode de conversion est similaire à HSL, sauf que la valeur de transparence doit être ajoutée à la fin, exprimée au format hsla (teinte, saturation, luminosité, alpha). Par exemple :

hsla(0, 100%, 50%, 0.5) /*半透明红色*/
hsla(120, 100%, 50%, 0.5) /*半透明绿色*/
hsla(240, 100%, 50%, 0.5) /*半透明蓝色*/

Résumé

Dans la conception et le développement de sites Web, nous devons utiliser différents formats de couleurs. La maîtrise de ces compétences en matière de conversion des couleurs peut non seulement améliorer l'efficacité du développement et réduire les risques d'erreurs, mais également mieux répondre aux besoins des concepteurs.

Ce qui précède sont les méthodes de conversion de couleurs couramment utilisées, j'espère que cela vous sera utile.

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!