Les couleurs CSS

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.

Voici donc les techniques à votre disposition pour spécifier les couleurs désirées.

▼Publicité

Couleurs prédéfinies

Les couleurs prédéfinies permettent d'indiquer une couleur en utilisant un mot en anglais.

Ex :

CSS

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  

Couleurs hexadécimales

Il est possible de représenter toute une palette de couleur en utilisant les codes hexadécimaux.

Un code hexadécimal est consitué de trois séries de 2 caractères. Ces caractères sont en numérotation hexadécimales et peuvent prendre les valeurs de 0 à 255 (0 à FF).

  • Les deux premiers caractères représentent la quantité de rouge.
  • Les deux caractères du milieu représentent la quantité de vert.
  • Les deux derniers caractères représentent la quantité de bleu.

On fera toujours précéder un code hexadécimal par le caractère #.

Ex :

CSS

background-color: #6D1B1B;      /* rouge vin  */

Code de couleurs avec 3 caractères

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 :

CSS

background-color: #1B4;      /* vert  */

La couleur obtenue sera la même que si on avait écrit :

CSS

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 :

CSS

background-color: #000;      /* noir */

background-color: #666;      /* gris foncé */

background-color: #AAA;      /* gris moyen */

background-color: #DDD;      /* gris pâle */

background-color: #FFF;      /* blanc */

Couleurs avec transparence

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);

Dégradés

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é :

CSS

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 :

 

Pour plus d'information

« 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

« Named CSS Colours ». NeilOrangePeel. http://neilorangepeel.com/works/colours/

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories