Valeur de couleur CSS légitime

Couleurs CSS

La couleur dans CSS peut être définie de la manière suivante :

  • Couleur hexadécimale
  • Couleur hexadécimale avec transparence
  • Couleur RGB
  • #p3 {background-color: rgb(0, 0, 255);} /* Bleu */
  • Couleur HSL
  • Couleur HSLA
  • Noms de couleurs prédéfinis et compatibles avec tous les navigateurs
  • Utiliser currentcolor Mot-clé

Couleur hexadécimale

Définir la couleur hexadécimale avec #RRGGBB, où RR (rouge), GG (vert) et BB (bleu) sont des entiers hexadécimaux spécifiant les composants (composantes) de la couleur. Toutes les valeurs doivent être comprises entre 00 et FF.

Par exemple, la valeur #0000ff est représentée en bleu, car la composante bleue est définie sur la valeur maximale (ff), tandis que les autres composantes sont définies sur 00.

Exemple

Définir différentes couleurs HEX :

#p1 {background-color: #ff0000;}   /* Rouge */
#p2 {background-color: #00ff00;}   /* Vert */
#p3 {background-color: #0000ff;}   /* Bleu */

Essayez-le vous-même

Couleur hexadécimale avec transparence

Définir la couleur hexadécimale avec #RRGGBB. Pour augmenter la transparence, ajoutez deux nombres supplémentaires entre 00 et FF.

Exemple

Définir une couleur HEX avec transparence :

#p1a {background-color: #ff000080;}   /* Rouge avec transparence */
#p2a {background-color: #00ff0080;}   /* Vert avec transparence */
#p3a {background-color: #0000ff80;}   /* Bleu avec transparence */

Essayez-le vous-même

Couleur RGB

La valeur de couleur RGB est définie par Fonction rgb()Définir, la syntaxe est la suivante :

rgb(red, green, blue)

Chaque paramètre (red, green, blueDéfinir l'intensité de la couleur, qui peut être un entier ou un pourcentage entre 0 et 255 (de 0% à 100%).

Par exemple, la valeur rgb(0,0,255) est représentée en bleu, car le paramètre blue est réglé sur sa valeur maximale (255), tandis que les autres paramètres sont définis sur 0.

此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

Exemple

De plus, les valeurs suivantes définissent la même couleur : rgb(0,0,255) et rgb(0%,0%,100%).

Définir différentes couleurs RGB :
#p1 {background-color: rgb(255, 0, 0);}   /* Rouge */
#p2 {background-color: rgb(0, 255, 0);}   /* Vert */

Essayez-le vous-même

#p3 {background-color: rgb(0, 0, 255);} /* Bleu */

Couleur RGBA

La couleur RGBA est une extension des valeurs de couleur RGB, elle contient un canal Alpha - spécifie la transparence de l'objet. Fonction rgba()Définir, la syntaxe est la suivante :

rgba(red, green, blue, alpha)

alpha Les paramètres sont des nombres entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

Exemple

Définir différentes couleurs RGB avec transparence :

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Rouge avec transparence */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Vert avec transparence */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Bleu avec transparence */

Essayez-le vous-même

Couleur HSL

HSL signifie hue (teinte), saturation (saturation) et luminosité (luminosité) - représentation cylindrique des couleurs.

Utiliser Fonction hsl()Spécifier la valeur de couleur HSL, la syntaxe de cette fonction est la suivante :

hsl(teinte, saturation, luminosité)

L'hue est le degré sur la roue des couleurs (de 0 à 360) - 0 (ou 360) est rouge, 120 est vert, 240 est bleu.

La saturation est une valeur en pourcentage ; 0% représente une teinte grise, tandis que 100% est une couleur pleine.

L'éclat est également un pourcentage ; 0% est noir, 100% est blanc.

Exemple

Définir différentes couleurs HSL :

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Vert doux */

Essayez-le vous-même

Couleur HSLA

La valeur de couleur HSLA est une extension de la valeur de couleur HSL, elle contient un canal Alpha - spécifiant l'opacité de l'objet.

La valeur de couleur HSLA est composée de Fonction hsla()Spécifier, la syntaxe de la fonction suivante :

hsla(teinte, saturation, luminosité, alpha)

alpha Les paramètres sont des nombres entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

Exemple

Définir différentes couleurs HSL avec transparence :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Vert avec transparence */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Vert clair avec transparence */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Vert foncé avec transparence */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Vert doux avec transparence */

Essayez-le vous-même

Noms de couleurs prédéfinis et compatibles avec tous les navigateurs

Dans les normes de couleurs HTML et CSS, 140 noms de couleurs prédéfinis sont définis.

Par exemple :blue、red、coral、brown etc. :

Exemple

Définir différents noms de couleurs :

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Essayez-le vous-même

La liste de tous les noms de couleurs prédéfinis peut être trouvée dans notre manuel de référence des noms de couleurs.

Le mot-clé currentcolor

currentcolor Citation de la valeur de l'attribut color de l'élément clé.

Exemple

La couleur de bord de l'élément <div> suivante sera bleue, car la couleur du texte de l'élément <div> est bleue :

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

Essayez-le vous-même