Les couleurs CSS : nommées, hexadécimales, avec transparence, en dégradé

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é

Couleurs nommées

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  

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://www.html-color-names.com/color-chart.php.

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

  • 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  */

Codes 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

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