Derniers tutoriels de développement web
 

CSS Les couleurs

❮ Précédent Suivant Chapitre ❯

CSS3 Couleurs

CSS prend en charge les noms de couleurs, hexadécimal et couleurs RVB.

En outre, CSS3 introduit également:

  • couleurs RGBA
  • couleurs HSL
  • couleurs HSLA
  • opacité

support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement les valeurs de couleur CSS3 / propriété.

Propriété
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacité 4.0 9.0 2.0 3.1 10.1

RGBA Couleurs

Les valeurs de couleurs RGBA sont une extension des valeurs de couleurs RVB avec un alpha canal - qui spécifie l'opacité pour une couleur.

Une valeur de couleur RGBA est spécifié avec: rgba (rouge, vert, bleu, alpha ). L' alpha paramètre est un nombre compris 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);

L'exemple suivant définit différentes couleurs RGBA:

Exemple

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Essayez - le vous - même »

HSL Couleurs

HSL signifie Teinte, Saturation et Lightness.

Une valeur de couleur HSL est spécifié avec: hsl (teinte, saturation, luminosité).

  1. Hue est un degré sur la roue de couleur (de 0 à 360):
    • 0 (ou 360) est rouge
    • 120 est vert
    • 240 est bleu
  2. La saturation est une valeur en pourcentage: 100% est la couleur.
  3. Légèreté est également un pourcentage; 0% est sombre (noir) et 100% est blanc.
HSL (0, 100%, 30%);
HSL (0, 100%, 50%);
HSL (0, 100%, 70%);
HSL (0, 100%, 90%);

L'exemple suivant définit différentes couleurs HSL:

Exemple

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Essayez - le vous - même »

HSLA Couleurs

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un alpha canal - qui spécifie l'opacité pour une couleur.

Une valeur de couleur HSLA est spécifié avec: HSLA (teinte, saturation, luminosité, alpha ), où l' alpha paramètre définit l'opacité. L' alpha paramètre 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);

L'exemple suivant définit différentes couleurs HSLA:

Exemple

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
Essayez - le vous - même »

Opacité

La propriété CSS3 d'opacité définit l'opacité pour une valeur RGB spécifiée.

La valeur de la propriété d'opacité doit être un nombre compris entre 0.0 (complètement transparent) et 1.0 (complètement opaque).

rgb (255, 0, 0); opacité: 0,2;
rgb (255, 0, 0); opacité: 0,4;
rgb (255, 0, 0); opacité: 0,6;
rgb (255, 0, 0); opacité: 0,8;

Notez que le texte ci-dessus sera également opaque.

L'exemple suivant montre différentes valeurs RVB avec l'opacité:

Exemple

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»


❮ Précédent Suivant Chapitre ❯