Color


Il existe quatre méthodes pour produire de la couleur en CSS : mot-clé, hexadecimal, rgb et hsl. Les deux premières ont été introduites avec CSS1 et sont disponibles dans tous les navigateurs, la dernière a été apportée par CSS3. rgb et hsl ont une dérivée “alpha” qui permet de déterminer l'opacité (respectivement rgba et hsla).

Les mots-clés

Ils sont depuis longtemps supportés par les navigateurs, 16 d'entre eux ont été officiellement adoptés par le W3C comme standards : black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, et yellow. Par exemple :

//CSS
body { 
  background-color: white;
}

CSS 3 a étendu cette liste en créant les références de mots-clés pour 140 couleurs standard pour le web, dont certaines portent des noms quelque peu ésotériques : aliceblue, moccasin, navajowhite, burlywood par exemple. De nombreuses sources existent pour retrouver ces mots-clés, en voici un exemple.

D'une manière générale, si vous avez le choix entre utiliser des mots-clés ou la notation hexadécimale, choisissez cette dernière.

Notation hexadécimale

Les mots-clés sont limités à 140 couleurs, la méthode hexadécimale (“hex”) ne l'est pas. Contrairement à notre système décimal, qui utilise des nombres entiers de 0 à 9, le système hexadécimal en utilise 16 : de 0 à 9, puis de a à f.

On s'en sert pour définir les couleurs, qui sont formées de trois ensembles de nombres hexadécimaux représentant les composantes rouge, verte et bleue (red, green, blue) de la couleur. Chaque ensemble est formé de deux nombres hexadécimaux, ce qui permet 16 × 16 = 256 niveaux de couleur pour ce composant. Une représentation telle que #ffffff signifie que le rouge, le vert et le bleu sont à leur valeur maximum, créant ainsi du blanc. À l'inverse, #000000 signifie que les trois couleurs sont à leur plus bas niveau, créant ainsi du noir. #ff0000 donnerait un rouge pur et #777777 serait gris.

Les couleurs “web safe” correspondent à celles ayant le même nombre dans chaque paire (00, 77, ee,...) et c'est la forme la plus courante, mais la palette est moins étendue (16 possibilités au lieu de 256 pour chacune des couleurs). Si vous utilisez ces couleurs, CSS vous offre la possibilité d'utiliser un raccourci en écrivant par exemple #000 au lieu de #000000 ou #f00 au lieu de #ff0000.

Mais les valeurs hexadécimales n'ont pas à être identiques pour chaque paire, #3fa027 est une couleur hex parfaitement valide. Il est important de comprendre que la notation hexadécimale donne accès à la même gamme de couleurs que les deux systèmes dont nous allons parler maintenant. La variété de couleurs n'est pas moindre que dans rgb ou hsl. Il y a même des codes hexadécimaux pour toutes les couleurs Crayola.

rgb

Bien que plus longue et guère plus précise que hex, la méthode rgb (red, green, blue) est plus facile à manipuler directement via des scripts.

Les valeurs rgb sont spécifiées comme des nombres de 0 à 255 :

//CSS
h3 {
  color: rgb(100, 18, 255);
}

ou comme des pourcentages :

//CSS
h3 {
  color: rgb(50%, 6%, 100%);
}

CSS3 introduit une dérivation de cette méthode dans laquelle la composante a représente le canal alpha, ou opacité, représenté par un nombre à virgule flottante allant de 0 (transparence totale) à 1 (opacité totale). Par exemple, pour produire une div ayant une id “content” et une couleur de background rouge à demi transparente :

//CSS
div#content {
  background-color: rgba(255,0,0, 0.5);
}

hsl

Enfin, CSS3 ajoute la méthode hsl qui représente la couleur, la saturation et la luminosité (hue, saturation, luminosity). En théorie, cela permet aux développeurs de modifier une couleur plus aisément en réponse aux demandes de leurs clients.

image

hsl est basé sur le cercle chromatique, allant de rouge à jaune, puis vert, bleu, violet et rouge à nouveau. La couleur est donnée par sa position en degrés sur le cercle, le point de départ (et point final) étant le rouge, égal à 0 et à 360 degrés. La saturation et la luminosité sont indiqués en pourcentages :

//CSS
div#content {
  background-color: hsl(10,100%,10%);
}

Il existe également hsla qui utilise comme rgba la méthode de nombre à virgule flottante pour l'opacité.

Note importante : si vous choisissez d'utiliser hsl, sachez que cette méthode n'est pas équivalente au système HSB de Photoshop.


À lire également dans La Cascade :

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

article en anglais :

Colors in CSS, par Hugo Giraudel

Ressources complémentaires en français

Ressources complémentaires en anglais

Outils

  • Color Template, pour tout savoir sur les couleurs, un très joli site, très complet et instructif.
  • Adobe Kuler, outil en ligne pour choisir ses couleurs, très complet et inspirant.
  • Color Scheme Designer, comme Kuler, avec un fonctionnement différent, très bien fait.
  • WebColorData, avec cet outil les couleurs n’auront plus aucun secret pour vous. Entrez l’url d’un site internet et WebColorData référence en un panel les couleurs dominantes trouvées. Vraiment pratique.
  • Color.io, autre outil très pratique pour choisir une couleur et toute la palette complémentaire.
  • Pictaculous, quel schéma de couleurs utiliser avec une image ? Uploadez votre image sur Pictaculous, il vous donnera une belle palette de couleurs.
  • Mudcube colour sphere vous permet de créer des schémas de couleurs et de vérifier leur accessibilité aux personnes souffrant de déficiences visuelles.
  • 0 to 255, un outil simple pour trouver des variations sur une couleur.
  • Hex.colorrrs, un convertisseur de Hex en RGB, simple, bien fait, visualisation de la couleur en cours de frappe.
  • Brand Colors, une collection de palettes de couleurs des grandes marques.
  • The colors of motion, un site créatif par Charlie Clark qui explore l’utilisation des couleurs dans les films. Pas de mots, juste des couleurs. Choisissez un film, cliquez sur une bande de couleur, regardez les images et l’harmonie des couleurs.
  • Spectrum, une superbe application (Mac) pour créer vos palettes, les triturer, les exporter, intégrer directement une couleur dans CSS, etc.

original paru (révisé) le dans le blog de Dudley Storey, Demosthenes.info.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2014.