Les couleurs en Css
Comment écrire des couleurs en CSS
Quelle que soit la propriété de couleur CSS (color, border-color, background-color), les formats de couleurs Css sont gérés de la même façon.
Il existe plusieurs façons de spécifier une couleur en Css :
- en la nommant.
- en spécifiant son code hexadécimal.
- en utilisant le format
rgb(rvb en français). - en utilisant le format
rgba(rvba en français, nouveauté prise en compte vers 2010), - en utilisant le format
hslethsla(hsl en français, nouveauté prise en compte vers 2010),
Convertisseur RGV, HSL, Hexadécimal et transparence
Les couleurs Css nommées
Comment écrire une couleur CSS nommée?
Une couleur nommée en CSS est un nom donné à une couleur bien précise qui ne changera jamais suivant les navigateurs.
Vous pouvez spécifier une couleur en css en utilisant une des 216 couleurs prédéfinies :
.couleur-css { color : coral }
.couleur-css { color : red }Quelques exemples :
| aqua | black | blue | fuchsia | ||||
| gray | green | lime | maroon | ||||
| navy | olive | purple | red | ||||
| silver | teal | white | yellow |
Les 216 noms de couleurs WEB prédéfinies
Les couleurs Css hexadécimales
Comment écrire une couleur CSS hexadécimale?
Vous pouvez spécifier une couleur en Css en spécifiant sa valeur hexadécimale :
.couleur-css { color: #ff0000 } /* #rrggbb */Quand les valeurs dans le couple rr et gg et bb sont identiques vous pouvez simplifier en ne mettant que seule des deux valeurs r, g et b (sont doublées automatiquement):
.couleur-css { color: #f00 } /* #rgb */Il existe plusieurs couleurs hexadécimales prédéfinies.
Les couleurs Css en rgb
Comment écrire une couleur CSS rgb?
Le format de couleur rgb est l'abréviation de "red, green, blue" soit en français "rouge, vert, bleu".
Le format de couleur CSS rgb accepte 3 valeurs entières comprises entre 0 et 250 ou 3 valeurs entières en pourcentage. La valeur entière 255 correspond à 100%. Vous ne devez pas mélanger les unités.
.couleur-css { color: rgb(255, 0, 0) } /* 0 - 255 */
.couleur-css { color: rgb(100%, 0%, 0%) } /* 0 - 100 */Les couleurs Css en rgba
Comment écrire une couleur CSS rgba?
Le format de couleur rgba CSS est l'abréviation de "red, green, blue, alpha" soit en français "rouge, vert, bleu, transparence".
Le format de couleur CSS rgba est un nouveau format qui commence à être interprété vers 2010.
La couleur Css rgba accepte 3 valeurs entières comprises entre 0 et 255 ou 3 valeurs entières en pourcentage et une valeur entre 0 (transparent) et 1 opaque.
Si vous êtes en pourcentage 100% représente 255. Vous ne pouvez pas mélanger les unités.
.couleur-css { color: rgba(255, 0, 0, 1) } /* 0 - 255 */
.couleur-css { color: rgba(100%, 0%, 0%, 0.6) }/* 0 - 100 */Compatibilité des couleurs RGB et RGBA avec les navigateurs.
Les couleurs Css en hsl et hlsa
Comment écrire une couleur hsl ou hlsa?
La couleur Css hsl est l'abréviation de "Hue, Saturation, Lightness" soit en français "Teinte, Saturation, Luminosité".
La couleur Css hsla est l'abréviation de "Hue, Saturation, Lightness, Alpha" soit en français "Teinte, Saturation, Luminosité, Transparence".
Le format de couleur CSS hsl et hsla sont des nouveaux formats qui commencent à être interprétés vers 2010.
hsl accepte 3 valeurs entières dans l'ordre cité :
- une valeur entière comprise entre 0 et 360, l'unité est le degré, représente la teinte.
- une valeur entière comprise entre 0 et 100, l'unité est le pourcentage, représente la saturation.
- une valeur entière comprise entre 0 et 100, l'unité est le pourcentage, représente la luminosité.
hsla accepte les 3 valeurs ci-dessus et une valeur comprise entre 0 (totalement transparent) et 1(totalement opaque).
.couleur-css { color: hsl(240, 100%, 50%) }
.couleur-css { color: hsla(240, 100%, 50%, 0.6) }Compatibilité des couleurs HSL et HSLA avec les navigateurs.