Dans cette vidéo tutorielle, le présentateur explique les différentes manières de spécifier les couleurs en CSS pour colorer le texte, les arrière‑plans et les bordures. Il commence par montrer comment appliquer une couleur nommée en anglais (ex. red) via la propriété background‑color, puis détaille les limites de cette approche. Il introduit ensuite le codage hexadécimal #RRGGBB, en expliquant que chaque couleur primaire (rouge, vert, bleu) est codée sur un octet (8 bits) et que les trois octets forment un code 24 bits, permettant plus de 16 millions de teintes. Des exemples concrets (rouge, vert, bleu, jaune, magenta, cyan, orange, gris, blanc, noir) illustrent la composition des couleurs primaires et secondaires ainsi que les nuances de gris en utilisant des valeurs égales sur les trois canaux. Le présentateur décrit ensuite le codage décimal via la fonction rgb(r,g,b) où chaque canal varie de 0 à 255, montrant l’équivalence avec le code hexadécimal. Enfin, il introduit le format RGBA, ajoutant un canal Alpha (0‑1) pour la transparence, et montre comment une valeur de 0,5 rend le rouge semi‑transparent, créant un effet rosé. Il conclut en recommandant l’usage d’outils de palette de couleur professionnels plutôt que la mémorisation de tous les codes, tout en insistant sur la maîtrise des couleurs de base (nom anglais, hexadécimal, rgb, rgba).
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo de CSS où nous allons traiter les couleurs. Les couleurs servent bien évidemment à colorer les textes, les arrière-plans des objets et les bordures. Et il existe plusieurs manières de les définir en CSS. Regardons ce code HTML. Dans la balise body, nous n'avons intégré aucun objet. Donc on va s'intéresser à la balise body elle-même et on va essayer de la colorer des différentes façons disponibles en CSS. Nous allons aller dans la feuille de style CSS et nous mettrons le sélecteur body. Ça veut dire le corps de la page et on va essayer de colorer l'arrière-plan de plusieurs manières différentes. Donc on va mettre la propriété background-color et là nous allons tout simplement nommer la couleur en anglais. Imaginons qu'on veut mettre la couleur rouge, alors il suffit de mettre red. Quand j'exécute pour voir le résultat, Alors le fond de la page est coloré en rouge. On peut procéder de la même manière pour définir les différentes couleurs comme le jaune, le rose, l'orange, le gris, le noir, etc. Mais le nombre de couleurs qui ont vraiment un nom en anglais est trop limité et on sait qu'un navigateur peut déchiffrer un peu plus de 16 millions de couleurs et ces 16 millions de couleurs n'ont pas toutes un nom. C'est pourquoi la meilleure alternative au nom anglais des couleurs, c'est le codage. Alors comment on va coder les couleurs? Tout d'abord il faut savoir que toutes les couleurs que l'on peut observer ne représentent rien d'autre que le mélange de 3 couleurs de base dites des couleurs fondamentales ou bien des couleurs primaires, à savoir le rouge, le vert et le bleu. Dans les navigateurs chacune de ces couleurs fondamentales est codée sur un octet, ça veut dire sur 8 bits. Alors pour définir une couleur particulière il faudra coder sur 3 fois 8 bits, ça veut dire sur les 3 canaux et on aura par conséquent 24 bits en total. Et comme vous le savez tous, pour représenter les nombres binaires avec des 1 et des 0, il va en résulter des chaînes de caractères qui sont très longues. C'est pourquoi nous allons remplacer le codage binaire avec le codage hexadécimal. Par exemple, imaginez qu'on veut toujours obtenir la couleur rouge. On sait que le rouge est constitué de 100% de la couleur fondamentale rouge, de 0% de la couleur fondamentale verte et de 0% de la couleur fondamentale bleue. Alors comment est-ce qu'on va représenter ça? Il suffit de mettre le maximum sur un octet représentable en hexadécimal qui est le FF. Ça, ça représente le rouge. 00 pour représenter le vert et 00 pour représenter le bleu. Et pour dire au navigateur qu'il s'agit du codage hexadécimal et non pas d'une autre base, il suffit de mettre ici un dièse. Et du coup, le navigateur peut désormais comprendre le codage hexadécimal déclaré de cette manière. Exécutons maintenant pour voir le résultat. Rien ne change parce que la couleur rouge est toujours maintenue. Partant de ce principe, pour représenter par exemple la couleur verte, il suffit de mettre le code suivant: 00 pour le rouge, FF pour le vert et 00 pour le bleu, dans l'ordre. Quand on exécute, on va voir que le fond a changé de couleur. Même chose pour le bleu, donc 00 pour le vert et FF pour le bleu. Et voilà, donc ça donne un arrière-plan bleu pour la page. Il faut savoir qu'il y a quand même quelques couleurs clés dont il faut connaître le codage, comme par exemple le jaune qui est FFFFF00, ça veut dire c'est un mélange du rouge et du vert. Il y a aussi le magenta qui est un mélange du rouge et du bleu, et le cyan qui est un mélange du vert et du bleu. Il y a aussi l'orange qui est un mélange à 100% du rouge, à 50% du vert et à 0% du bleu. Bien sûr, je parle d'un orange parfait parce qu'on peut avoir un orange clair ou bien un orange foncé. Alors il faut changer légèrement de code de la couleur pour obtenir ces différentes nuances. Il y a aussi la couleur grise. Alors le gris n'est rien d'autre qu'un mélange équitable des 3 couleurs. Ça veut dire il faut prendre la même valeur pour les 3 canaux, bien pour les 3 couleurs fondamentales. Par exemple, 88, 88, 88. Bon, ça va nous donner un gris intermédiaire. Si vous voulez un gris clair, alors il faut se rapprocher du blanc. Et le blanc, ce n'est rien d'autre que les couleurs qui sont mélangées à 100%. Bon, d'ailleurs, pour faire du blanc, c'est FF, FF, FF, ça donne du blanc parfait. Le noir, c'est 000000. Voilà. Alors, un gris clair, il faut s'approcher du FF. Par exemple, on va mettre D7, D7, D7. Voilà. Donc là, ça donne un gris clair. Et pour un gris foncé, il faut se rapprocher du noir, par exemple 45, 45, 45. Voilà, et là c'est un gris foncé. Bien entendu, les couleurs, il y en a plus de 16 millions, alors il est impossible de connaître les codes par couleur. C'est pourquoi la plupart des éditeurs professionnels disposent de leur propre nuancier, c'est-à-dire des palettes de couleurs qui vous permettent de sélectionner directement la couleur comme si vous le faites sur un logiciel de traitement d'image ou bien un traitement de texte et du coup ils vous rendent le code correspondant. Alors pas la peine de se casser la tête par apprendre toutes les couleurs. Par contre, il faut quand même apprendre un minimum qui sont les couleurs de base que l'on vient de voir. Alors la première méthode, c'est nommer les couleurs en anglais. La deuxième méthode, c'est utiliser le codage hexadécimal. D'ailleurs, c'est la technique la plus utilisée. La troisième méthode, c'est utiliser le codage décimal. Alors le codage décimal, il va tout simplement encoder ces 3 canaux, c'est-à-dire les 3 couleurs fondamentales, en décimal. Ça veut dire la valeur minimale d'une couleur, ça sera 0, la valeur maximale c'est 255. Il faut aussi mélanger ces couleurs afin de voir les différentes nuances possibles. La syntaxe dans ce cas devient RGB, entre les parenthèses on va mettre dans l'ordre le rouge, le vert et le bleu en décimal. Par exemple 255, ça veut dire le maximum du rouge, virgule, 0 pour le vert et 0 pour le bleu. Alors on est censé obtenir un rouge parfait. Alors là, c'est le code du rouge, c'est l'équivalent de #FF0000. La dernière méthode maintenant, c'est utiliser une technique qui a été intégrée avec le CSS3, c'est ce que l'on appelle le RGBA. RGBA, bon, ça veut dire Red, Green, Blue, et A c'est pour Alpha ou bien la transparence. C'est-à-dire que les couleurs que l'on peut intégrer avec de l'hexadécimal ou bien avec RGB, ce sont des couleurs qui sont opaques. Si on veut quand même régler leur transparence, donc on va ajouter un dernier paramètre qui est nommé le Alpha, qui est compris entre 0 et 1. 1, avec bien sûr une précision de 2 chiffres après la virgule. La valeur 1, ça veut dire la couleur sera opaque à 100%, et la valeur 0, la couleur sera transparente à 100%. Donc il va laisser transparaître ce qui est derrière d'une manière absolue. Maintenant, si vous prenez par exemple la valeur 0.5, alors tout simplement ici on va appliquer la couleur rouge avec une transparence de 50%. Bon, si on exécute pour voir ce que ça donne, on va voir qu'ici on obtient presque un rose, mais ce n'est pas réellement du rose, c'est du rouge mais qui laisse transparaître le blanc qui est la couleur par défaut qui est derrière et du coup on obtient un mélange des deux qui est un petit peu du rose. Alors récapitulons, pour intégrer une couleur en CSS on peut soit mettre le nom de la couleur en anglais, le codage hexadécimal préfixé par un dièse, le codage décimal grâce à la fonction RGB ou bien le codage décimal avec la prise en charge de la transparence grâce à la fonction Merci pour votre attention et à la vidéo prochaine.
