CSS Couleur juridique Valeurs

CSS Couleurs

Couleurs en CSS peuvent être spécifiés par les méthodes suivantes:

couleurs hexadécimaux
couleurs RVB
couleurs RGBA
couleurs HSL
couleurs HSLA
les noms de couleurs prédéfinies / Cross-navigateur

Couleurs hexadécimaux

les valeurs de couleur hexadécimaux sont pris en charge dans tous les principaux navigateurs.

Une couleur hexadécimal est spécifié avec: #RRGGBB, où le RR (red) , GG (green) et BB (blue) entiers hexadécimaux spécifier les composantes de la couleur. Toutes les valeurs doivent être comprises entre 00 et FF.

Par exemple, la valeur de 0000ff # est rendu en bleu, parce que la composante bleue est réglé à sa valeur la plus élevée (ff) et les autres sont mis à 00.

Exemple

Définir différentes couleurs HEX:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Essayez - le vous - même »

Couleurs RVB

les valeurs de couleur RVB sont pris en charge dans tous les principaux navigateurs.

Une valeur de couleur RVB est spécifié avec: rgb(red, green, blue) . Chaque paramètre (rouge, vert et bleu) définit l'intensité de la couleur et peut être un nombre entier compris entre 0 et 255 ou une valeur en pourcentage (from 0% to 100%) .

Par exemple, le rgb(0,0,255) valeur est rendu en bleu, car le paramètre bleu est réglé à sa valeur la plus élevée (255) et les autres sont mis à 0.

En outre, les valeurs suivantes définissent une même couleur: rgb(0,0,255) et rgb(0%,0%,100%) .

Exemple

Définir différentes couleurs RVB:

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Essayez - le vous - même »

RGBA Couleurs

Les valeurs de couleurs RGBA sont pris en charge dans IE9 +, Firefox 3+, Chrome, Safari, Opera et 10+.

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

Une valeur de couleur RGBA est spécifié avec: rgba(red, green, blue, alpha) . Le paramètre alpha est un nombre compris entre 0.0 (fully transparent) et 1.0 (fully opaque) .

Exemple

Définir différentes couleurs RVB avec l'opacité:

#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

les valeurs de couleur HSL sont pris en charge dans IE9 +, Firefox, Chrome, Safari, Opera et 10+.

HSL représente la teinte, la saturation et la légèreté - et représente une représentation cylindrique de coordonnées de couleurs.

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

Hue est un degré sur la roue de couleur (from 0 to 360) - 0 (or 360) est rouge, 120 est vert, 240 est bleu. La saturation est une valeur en pourcentage; 0% signifie une nuance de gris et 100% est la couleur. Légèreté est également un pourcentage; 0% est noir, 100% est blanc.

Exemple

Définir différentes couleurs HSL:

#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 pris en charge dans IE9 +, Firefox 3+, Chrome, Safari, Opera et 10+.

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

Une valeur de couleur HSLA est spécifié avec: 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 (fully transparent) et 1.0 (fully opaque) .

Exemple

Définir différentes couleurs HSL avec opacité:

#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 »