Colle ton œil très près de l'écran, sur une zone blanche. Si tu regardes d'assez près, tu verras que le blanc n'est pas blanc : c'est une grille de minuscules lampes rouges, vertes et bleues, allumées à fond. Il n'y a pas de lampe blanche. Il n'y a pas non plus de lampe jaune, ni orange, ni rose.
Toutes les couleurs que tu as vues de ta vie sur un écran sont fabriquées avec ces trois lampes-là, en les allumant plus ou moins fort. Chaque lampe a 256 niveaux, de 0 (éteinte) à 255 (à fond). Tire sur les curseurs et regarde.
Voici les mélanges qui surprennent tout le monde la première fois :
Rouge à fond plus vert à fond donne du jaune. Ça n'a rien à voir avec la peinture, où mélanger du rouge et du vert donne une bouillie marron. La peinture enlève de la lumière, un écran en ajoute. Ce sont deux mondes opposés, et c'est pour ça que ce qui est beau à l'écran ne l'est pas toujours une fois imprimé.
#FF7B72 et pas 255, 123, 114Les deux disent exactement la même chose. Mais quand on écrit du code, on préfère la première : elle est plus courte, et surtout chaque lampe y occupe toujours exactement deux caractères, ce qui rend la lecture rapide.
Le truc, c'est qu'on ne compte pas jusqu'à 10 avant de changer de colonne, mais jusqu'à 16. Comme on n'a que dix chiffres, on emprunte six lettres pour faire les six qui manquent :
Donc F vaut 15, et FF vaut 15×16 + 15 = 255,
la lampe à fond. Tire sur le curseur : à gauche le nombre que tu connais, à droite le
même nombre écrit en base 16, avec le calcul.
Un code couleur, c'est donc simplement trois nombres collés : deux caractères pour le
rouge, deux pour le vert, deux pour le bleu. #FF0000 se lit
« rouge à fond, vert éteint, bleu éteint ». Une fois que tu sais ça, tu peux lire
n'importe quel code couleur sans outil.
Promène ton doigt dans le carré pour choisir, et sur la bande du dessous pour changer de famille de couleur.
Choisis une de tes photos, puis touche l'image : tu récupères le code exact du pixel que tu as touché. C'est comme ça que les graphistes reprennent la couleur d'un logo, du maillot d'une équipe ou d'un coucher de soleil.
Essaie de rendre #3FB950 un peu plus sombre en jouant avec
le rouge, le vert et le bleu. C'est pénible : il faut baisser les trois en même temps,
dans les bonnes proportions, sinon la couleur change de nature.
D'où une deuxième façon de décrire exactement la même couleur, avec trois nombres qui
correspondent à la manière dont on en parle vraiment : la teinte
(où on est sur l'arc-en-ciel, de 0 à 360 degrés), la saturation
(couleur franche ou délavée, jusqu'au gris), et la lumière
(du noir au blanc). En CSS ça s'écrit hsl(140, 50%, 48%).
Garde la teinte et la saturation, fais varier la seule lumière : tu obtiens une gamme cohérente. C'est exactement de cette façon qu'on fabrique les couleurs d'un site, plutôt qu'en piochant sept codes au hasard.
Range les teintes en cercle, de 0 à 360. La couleur pile en face, à 180 degrés, est celle qui contraste le plus : on l'appelle la complémentaire, et c'est elle qu'on utilise pour un bouton qui doit sauter aux yeux. Les deux voisines, elles, s'accordent en douceur.
…
0 sur 0
Choisir de belles couleurs ne sert à rien si le texte devient illisible. Ça se mesure, et le calcul est le même pour tous les sites du monde : on compare la quantité de lumière des deux couleurs. En dessous de 4,5, un texte normal est considéré comme illisible pour une partie des gens.
Tout ce que tu viens d'apprendre sert à une chose : décorer des pages. Le langage qui décide de l'allure d'un site s'appelle le CSS, et il ne fait presque rien d'autre que dire « cet élément-là aura cette couleur, cette taille, cette bordure ».
Ci-dessous, une vraie page miniature. À droite, le CSS qui l'habille. Change un code couleur, la page change sous tes yeux. Les codes que tu as fabriqués plus haut se collent directement dedans.
Trois choses à essayer. Mets border-radius à 0, la carte devient
carrée. Mets-le à 40px, elle devient une pilule. Et remplace
background: #161b22 par
background: linear-gradient(#161b22, #0d1117) : une couleur qui se transforme
en une autre, ce qui est encore juste deux codes couleur mis bout à bout.
Lire un code couleur sans outil, en fabriquer un, choisir des couleurs qui vont ensemble plutôt qu'au hasard, et vérifier qu'un texte reste lisible. Ce sont exactement les quatre choses qu'on demande à quelqu'un qui fabrique un site.
Les couleurs sont la porte d'entrée du CSS, et le CSS est la porte d'entrée du web. Tu peux continuer par le bac à sable, où les mêmes codes servent à dessiner, ou par le serveur, pour comprendre d'où viennent les pages.