Couleurs CSS

Support CSS 140 noms de couleursainsi que les valeurs hexadécimales, les valeurs RGB, les valeurs RGBA, les valeurs HSL, les valeurs HSLA et l'opacité.

Couleur RGBA

La valeur de couleur RGBA est une extension des valeurs de couleur RGB, avec un canal alpha - ce canal détermine l'opacité de la couleur.

La valeur de couleur RGBA est définie ainsi : rgba(rouge, vert, bleu, alpha) alpha Les paramètres sont des nombres entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Les exemples suivants définissent différentes couleurs RGBA :

Exemple

#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 */

Essayer personnellement

Couleur HSL

HSL signifie teinte, saturation et luminosité (Hue, Saturation et Lightness).

La valeur de couleur HSL est définie ainsi : hsl(hue, saturation, luminosité).

La teinte 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 : 100% est la pleine couleur.

La luminosité est également une valeur en pourcentage : 0% est une couleur sombre (noir), tandis que 100% est blanc.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Les exemples suivants définissent différentes couleurs HSL :

Exemple

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

Essayer personnellement

Couleur HSLA

La valeur de couleur HSLA est une extension de la valeur de couleur HSL avec canal alpha - elle définit l'opacité de la couleur.

La valeur de couleur HSLA est déterminée par les paramètres suivants : hsla(hue, saturation, lightness, alpha), où le paramètre alpha définit l'opacité. Le paramètre alpha est un nombre compris entre 0,0 (complètement transparent) et 1,0 (complètement opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Les exemples suivants définissent différentes couleurs HSLA :

Exemple

#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 clair avec transparence */

Essayer personnellement

Opacité

CSS opacity L'attribut définit l'opacité de l'élément entier (la couleur de fond et le texte seront opaques ou transparents).

opacity La valeur de l'attribut doit être un nombre compris entre 0,0 (complètement transparent) et 1,0 (complètement opaque).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacité:0.6;
rgb(255, 0, 0); opacité:0.8;

Veuillez noter que le texte ci-dessus sera également transparent/opaque !

L'exemple suivant montre différents éléments avec transparence :

Exemple

#p1 {couleur-fond:rgb(255,0,0);opacité:0.6;}  /* Rouge avec transparence */
#p2 {couleur-fond:rgb(0,255,0);opacité:0.6;}  /* Vert avec transparence */
#p3 {couleur-fond:rgb(0,0,255);opacité:0.6;}  /* Bleu avec transparence */

Essayer personnellement