Spécification des couleurs
Le système RGB et la notation rgb()
Si on éclaire une feuille blanche simultanément avec de la lumière rouge et de la lumière verte de même intensité, notre œil verra la même chose que si on éclairait cette feuille avec de la lumière jaune. C'est le principe de la synthèse additive des couleurs.
Lorsque nous regardons un écran ou une TV couleur, ce que nous voyons est en fait une superposition de trois couleurs primaires, le rouge, le vert et le bleu ; en donnant à ces couleurs primaires des intensités différentes, on peut générer toute la palette de couleurs que l'écran ou la TV est capable de produire.
En informatique, par soucis d'efficacité, ces intensités sont en général données sous forme de nombres entiers variant entre 0 et 255. C'est ce qu'on appelle le système RVB (RGB en anglais, pour : red, green, blue). Par exemple, R=255, G=255, B=0 donne du jaune, R=0, G=0, B=255 donne (évidemment) du bleu, R=255, G=255, B=255 donne du blanc, R=0, G=0, B=0 donne
du noir et R=128, G=128, B=128 donne un gris moyen.
Le CSS a une façon pratique de spécifier une couleur au navigateur en utilisant le système RGB. Pour dire qu'on veut p.ex. une couleur d'arrière-plan (background-color) orange (R=255, G=165, B=0),
avec une couleur de bordure (border-color) bleu nuit (R=25, G=25, B=112), on utilise les déclarations :
background-color: rgb(255,165,0);
border-color: rgb(25,25,112);
La notation rbg() peut aussi être utilisée avec des pourcentages. Notons que 255/255=1=100%, 165/255=.65=65%, 0/255=0=0% et que 25/255=.10=10% et 112/255=.44=44%. On pourrait donc aussi
écrire :
background-color: rgb(100%,65%,0%);
border-color: rgb(10%,10%,44%);
Le système RGB en notation hexadécimale
On peut exprimer un nombre entier en base 16 plutôt qu'en base 10. En base 10, le nombre 52 s'écrit comme ça car il est égal à 5x10+2. Le même nombre, en base 16, s'écrit 34 car il est égal à 3x16+4. Pour exprimer les nombres en base 16, cela prend 16 symboles : 0, 1, 2, … , 9, complétés par a (=10), b (=11), c (=12), d (=13), e (=14) et f (=15) ; les nombres de 0 à 255, en base 16, vont de 00 à ff.
En base 16, notre orange aura les valeurs RGB R=ff
(255=15x16+15), G=a5 (165=10x16+5) et B=0 ; notre bleu nuit aura les valeurs RGB R=19 (25=1x16+9), G=19 (idem) et B=70 (112=7x16+0). Dans ce système, les déclarations seront :
background-color: #ffa500;
border-color: #191970;
¹ Si, pour chacune des trois couleurs primaires, les deux symboles sont les mêmes, on peut ne pas les répéter. Ainsi, on peut écrire #5af au lieu de #55aaff.
Le système HSL et la notation hsl()
Certains trouvent qu'il est plus intuitif de spécifier une couleur à partir de trois de ses propriétés qui sont la teinte, la saturation et la luminosité (en anglais : hue, saturation, lightness, d'où le nom HSL pour ce système).
La teinte H est spécifiée par un angle variant de 0 à 360 degrés. Le rouge est à 0°, le vert à 120° et le bleu à 240°, comme sur la roue des couleurs (aussi appelée cercle chromatique) à droite². Aux angles intermédiaires, on trouve les couleurs secondaires : jaune à 60°, cyan (aqua) à 180° et magenta (fuchsia) à 300°.
La saturation S et la luminosité L sont exprimées en pourcents : S=100% correspond à la saturation maximale alors que S=0% correspond à des teintes de gris ; pour la luminosité, L=0% correspond à du noir et L=100% à du blanc.
Le système HSL est complètement équivalent au système RGB et il existe des formules mathématiques qui permettent de passer de l'un à l'autre. À titre d'exemple, pour la couleur orange, on a H=39°, S=100% et L=50% et pour le bleu nuit, H=240°, S=64% et L=27%.
Dans le système HLS, les déclarations pour les couleurs
Image : Bwilliam/Merill, via Wikimedia Commons.
de fond et de bordure deviendraient :
background-color: hsl(39,100%,50%);
border-color: hsl(240,64%,27%);
À noter que, si on n'utilise pas le symbole de degré pour H, on utilise bien le symbole de pourcent pour S et L.
² La roue des couleurs est représentée avec 0° à droite, comme sur le cercle trigonométrique.
Les couleurs par nom
Les cent trente-huit couleurs les plus courantes ont des noms (en anglais, voir plus loin) qu'on peut aussi utiliser :
background-color: orange;
border-color: midnightbue;
Transparence : le canal alpha
Au système RGB ou HSL, on peut ajouter une variable supplémentaire A (pour alpha) qui représente l'opacité de la couche de couleur. Cela donne le système RGBA ou HSLA.
A doit être un nombre entre 0 et 1. A=0 représente une couche entièrement transparente alors que A=1 correspond à une couche complètement opaque ; A=.7 signifie une opacité de 70%.
Les notations fonctionnelles rgb() et hsl() s'étendent à des notations rgba() et hsla() où la quatrième variable est la valeur de l'opacité alpha. Pour spécifier un arrière-plan orange avec une opacité de 85%, on pourrait utiliser l'une des trois déclarations suivantes :
background-color: rgba(255,165,0,.85);
background-color: rgba(100%,65%,0%,.85);
background-color: hsla(39,100%,50%,.85);