Le CSS permet de spécifier les couleurs pour à peu près tous les éléments d'une page Web : couleur de fond, texte, puces, titres, etc.
Il nous offre pour cela plusieurs techniques :
▼Publicité Le texte se poursuit plus bas
Les couleurs prédéfinies permettent d'indiquer une couleur en utilisant un mot en anglais.
Ex :
background-color: red;
À la base, il existait 17 noms normalisés pour les couleur prédéfinies. Il en existe aujourd'hui plus de 140.
Voici un aperçu des 17 noms initiaux de couleurs normalisés :
| Nom | Équivalent hexa | Aperçu | Nom | Équivalent hexa | Aperçu | |
|---|---|---|---|---|---|---|
| white | #FFFFFF | yellow | #FFFF00 | |||
| black | #000000 | maroon | #800000 | |||
| red | #FF0000 | orange | #FFA500 | |||
| purple | #800080 | lime | #00FF00 | |||
| fuchsia | #FF00FF | blue | #0000FF | |||
| olive | #808000 | green | #008000 | |||
| navy | #000080 | silver | #C0C0C0 | |||
| teal | #008080 | gray | #808080 | |||
| aqua | #00FFFF |
Il existe dans les fait un nombre beaucoup plus important de couleurs. Le site suivant présente une liste de 140 noms de couleurs : http://hex2rgba.devoth.com/.
Il est possible de représenter toute une palette de couleur en utilisant les codes hexadécimaux.
Un code hexadécimal est constitué de trois séries de 2 caractères. Chaque série est exprimée en numérotation hexadécimales et peut prendre les valeurs de 0 à 255 (00 à FF).
On fera toujours précéder un code hexadécimal par le caractère #.
Ex :
background-color: #6D1B1B; /* rouge vin */
Il est possible d'écrire le code hexadécimal avec 3 caractères plutôt que 6. À ce moment, la couleur obtenue sera la même que si on avait doublé chacun des caractères.
Ex :
background-color: #1B4; /* vert */
La couleur obtenue sera la même que si on avait écrit :
background-color: #11BB44; /* vert */
Dans les faits, la règle à trois codes est surtout utilisée pour les noirs, les blancs et les nuances de gris :
background-color: #000; /* noir */
background-color: #666; /* gris foncé */
background-color: #AAA; /* gris moyen */
background-color: #DDD; /* gris pâle */
background-color: #FFF; /* blanc */
Lorsqu'on connait le code RGB d'une couleur, il est possible de lui donner de la transparence ou plutôt de préciser son degré d'opacité. Il faut cependant connaître le code RGB en base 10 et non en base hexadécimale.
Il existe de petits outils en ligne permettant d'effectuer cette conversion, comme par exemple Color Schemer Online : http://www.colorschemer.com/online.html.
Avec 25% d'opacité -> background-color: rgba(191, 186, 132, 0.25);
Avec 50% d'opacité -> background-color: rgba(191, 186, 132, 0.5);
Avec 75% d'opacité -> background-color: rgba(191, 186, 132, 0.75);
Avec 100% d'opacité -> background-color: rgba(191, 186, 132, 1);
Le CSS3 supporte les dégradés de couleur. La syntaxe à utiliser est un peu complexe. Pas de problème : il existe des générateurs de dégradés (http://gradients.glrzad.com/).
Voici un exemple de code CSS permettant de générer un dégradé :
background-image: linear-gradient(bottom, #ffffff 8%, #356a96 65%, #356a96 67%, #70a6d8 99%);
background-image: -o-linear-gradient(bottom, #ffffff 8%, #356a96 65%, #356a96 67%, #70a6d8 99%);
background-image: -moz-linear-gradient(bottom, #ffffff 8%, #356a96 65%, #356a96 67%, #70a6d8 99%);
background-image: -webkit-linear-gradient(bottom, #ffffff 8%, #356a96 65%, #356a96 67%, #70a6d8 99%);
background-image: -ms-linear-gradient(bottom, #ffffff 8%, #356a96 65%, #356a96 67%, #70a6d8 99%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.08, #ffffff),
color-stop(0.65, #356a96),
color-stop(0.67, #356a96),
color-stop(0.99, #70a6d8)
);
Le résultat de ce dégradé est le suivant :
« Convert Web Safe Colors to Hex/RGB ». SEO Consultants Directory. http://www.seoconsultants.com/css/colors/web/safe/
« Color picker ». colorpicker.com. http://www.colorpicker.com/
« Kuler ». Adobe. http://kuler.adobe.com
« Colors ». W3C. http://www.w3.org/TR/CSS2/syndata.html#value-def-color
« HTML Color Chart with 140 Color Names ». html-color-names.com. http://www.html-color-names.com/color-chart.php
« Mettez-y de la couleur! ». Ma boîte. http://www.maboite.qc.ca/site_web-couleur.php
« Color Schemer Online ». ColorShemer. http://www.colorschemer.com/online.html
« Ultimate CSS Gradient Generator - ColorZilla.com ». Colorzilla. http://www.colorzilla.com/gradient-editor/
« CSS3 Gradient Generator ». Damian Galarza. http://gradients.glrzad.com/
« Les dégradés de couleurs en CSS3 avec gradient ». HTML5-CSS3.fr. http://www.html5-css3.fr/css3/degrades-couleurs-css3-gradient
Site fièrement hébergé chez A2 Hosting.
