Les bases du CSS - Les couleurs - Html/Css

Et si on faisait un peu de coloriage?

Je n'ai plus 5 ans, et on est en train d'apprendre le CSS, je n'ai pas le temps pour ça...

D'accord, et si je te propose d'utiliser des couleurs CSS pour une page web?

Ah, là je dis oui !

Le RGB pour définir une couleur

La première chose qu'il faut savoir est que l'on peut définir des couleurs avec du RGB, pour Red Green Blue. En fait on va faire des mélanges, comme en peinture, de ces trois couleurs pour obtenir une nouvelle couleur. Chacune de ces trois couleurs peut avoir 256 valeurs possible entre 0 et 255.

Donc on ne peut faire que 256 couleurs?

Non, on ne peut choisir que 256 valeur pour chaque couleur primaire, ce qui fait 256 * 256 * 256 = 16 777 216 couleurs différentes.

Ah oui, ça laisse plus de choix déjà.

il faut donc définir ces trois valeurs pour obtenir une couleur. Par exemple si on choisis 255,0,0 on aura du rouge, alors que 0,0,255 donnera du bleu. Mais on peut aussi mélanger , par exemple 128,0,128 donne du violet.

Jusque là je te suis.

rgb()

Il existe plusieurs moyens de définir une couleur en css, je vais t'en montrer deux basées sur RGB, le premier est d'utiliser la fonction rgb(), par exemple pour définir la couleur de fond d'une <div>, on utilise la propriétés background-color:



Ah ouais pas mal

Couleurs hexa

Mais on peut aussi définir des couleurs en hexadécimal.

En quoi?

C'est une notation, pour t'expliquer simplement, on utilise des nombres sur certaines bases. Par exemple tu as du apprendre à l'école les nombres de 0 à 9, et si tu veux aller au delà de 9, tu va utiliser les dizaines et avec 1 puis mettre 0 en unité pour former le chiffre 10.

Oui

Et bien c'est ce que l'on appelle le système décimal qui est en base 10, on a dix chiffres de base, et on compose des nombres avec un de ces chiffes sur les unités, les dizaines, les centaines etc.

Effectivement, on peut voir ça comme ça.

Ce n'est peut être pas la façon dont tu les as appris, mais c'est comme ça que le système décimal est définit, d'ailleurs son nom n'est pas un hasard, decim viens deu latin et veux dire 10, -al étant le suffixe pour préciser une base de ce chiffre. Il en existe d'autres qui sont très utilisé sans même que tu le saches parfois. Par exemple, il y a le binaire, tu en a déjà entendu parlé?

Oui, ce sont des 0 et des 1

Exactement, le binaire est un système en base 2, c'est à dire qu'il y a deux chiffres, le 0 et le 1. Et ça fonctionne de la même façon, 0 vaut 0, 1 vaut 1 et si on veux aller au dessus, il faut utiliser un chiffre en dizaine et un en unité, donc par exemple 10 qui vaut 2 en binaire, et ainsi de suite. Et pour calculer un chiffre binaire en décimale, il faut regarder ses chiffres un par un, vérifier le rang son unité et multiplier ce chiffre par 2^rang.

J'ai rien compris.

Si je reprends l'exemple précédent, 10 :

le 0 est un chiffre de rang 0 c'est l'unité, alors que le 1 est un chiffre de rang 1 les dizaines.

Il faut donc multiplier le premier chiffre, c'est à dire 0, par 2 puissance 0 : 0*2^0 = 0
Et le deuxième chiffre, c'est à dire 1, par 2 puissance 1 : 1*2^1 = 2
Et faire la somme des résultats, donc 0+2=2

Donc 10 en binaire vaut 2 en décimal.

Ok j'ai compris

Et si on avait plus de chiffres, comme par exemple 1111 en binaire on aurait :

pour les unités : 1*2^0 = 1
pour les dizaines : 1*2^1 = 2
pour les centaines : 1*2^2 = 4
pour les milliers : 1*2^3 = 8

Donc au total : 8+4+2+1 = 15

1111 en binaire vaut 15 en décimal.

Ok, ok, mais je ne vois toujours pas le rapport avec l'hexa-machin-truc

Et bien l'hexadécimal comme son nom l'indique, est une base 16.

Comme son nom l'indique?

Hexa veut dire 6 et décimal 10 donc hexadécimal = base 16.

Hum, d'accord, mais comment on fait pour définir 16 chiffres? On en invente des nouveaux?

Non, on utilise des lettres, les chiffres en hexadécimal vont de 0 à F, je t'écris la correspondance en décimal

• 0 : 0


• 1 : 1


• 2 : 2


• 3 : 3


• 4 : 4


• 5 : 5


• 6 : 6


• 7 : 7


• 8 : 8


• 9 : 9
• html
• css



• A : 10


• B : 11


• C : 12


• D : 13


• E : 14


• F : 15

Et de la même façon, pour convertir un chiffre en hexadécimal vers du décimal, il faut utiliser les puissances, mais cette fois les puissances de 16, car c'est une base 16. Ainsi le nombre hexa 8FD4 se calcule de la façon suivante :

4 * 16^0 = 4
D(13)*16^1 = 208
F(15)*16^2 = 3840
8*16^3 = 32768

4+208+3840+32768 = 36820

Who, mais comment tu veux que je calcule ça de tête?

Je ne m'attends pas à ce que tu le fasses, l'hexadécimal est un système utilisé par des outils informatiques, un ordinateur sait facilement faire ce type de conversion, mais pour un humain, c'est nettement plus compliqué. Après les couleurs ne vont que jusque 255, ce qui donne en hexa FF, ça fait déjà beaucoup moins de calcul à faire, ou au moins ça limite.

Ok, et si je préfère utilise le décimal.

Rien ne t'empêche d'utiliser la fonction rgb() comme on a vu juste avant, mais c'est très important de connaitre la notation hexadécimale, car elle est très utilisée, et tu la rencontreras forcément un jour, sur un projet, dans un exemple sur internet, dans un cours ou ailleurs. Et si tu ne sais pas ce que c'est, tu vas vite être perdu.

Ok, donc je n'ai pas besoin de savoir calculer de l'hexa de tête, mais il faut savoir que ça existe et comment ça fonctionne.

C'est tout à fait ça, et pour en revenir à nos couleurs, en hexa on préfixe toujours la couleur avec # suivit des trois couleurs RGB, donc sous un format #RRGGBB. Par exemple, le rouge se fait avec #FF0000, alors que le bleu #0000FF. Pour reprendre l'exemple de tout à l'heure :



Ok je vois.

Le canal alpha

Il y a aussi un petit truc en plus, c'est le canal alpha.

C'est à dire?

C'est un canal qui permet de gérer la transparence d'une couleur.

Ah, on peut faire ça?

Oui, et on peut le faire aussi bien en décimal qu'en hexa. Par exemple pour le faire en décimal, on va utiliser cette fois ci la fonction rgba() qui prend un quatrième paramètre. Ce sera l'opacité, soit l'inverse de la transparence, une valeur entre 0 et 1, 0 signifiant totalement transparent, et 1 totalement opaque. Par exemple, je vais faire un carré rouge et un noir, que je vais déplacer en position relative pour qu'ils soient partiellement superposés. Je fait ça deux fois, la première fois le noir sera en rbg, alors que la deuxième fois il sera en rgba avec une opacité à 0.5 :




Ah oui, on voit le rouge par transparence dans le deuxième cas.

C'est bien l'objectif. Et on peut faire exactement pareil en hexa, en ajoutant un nombre entre 00 et FF à la fin, 00 étant totalement transparent, et FF totalement opaque :



Ok j'ai tout compris pour les background-color, il y a d'autres couleurs?

J'ai pris l'exemple du background-color, mais les notations que tu viens d'apprendre sont valables pour tous les types de couleurs en CSS, que ce soit pour une police d'écriture, une bordure ou autre.

Ah génial! Je vais pouvoir mettre plein de couleurs ! J'ai terminé cette partie