Article original : Color Shades – Hex Code and RGB for Gray Color Palette
Les couleurs jouent un rôle intégral dans l'utilisabilité et l'accessibilité de vos projets de design web.
Parfois, elles peuvent même faire ou défaire un projet.
Avoir une palette de couleurs composée de différentes nuances et teintes d'une couleur spécifique peut être vraiment utile. Cela vous aide à visualiser comment vous pouvez combiner les couleurs que vous souhaitez ajouter à vos designs pour créer un effet harmonieux.
Cet article passe brièvement en revue comment ajouter des couleurs en HTML et montre un tableau avec différentes teintes de la couleur grise.
Si vous êtes intéressé uniquement par la visualisation du tableau avec les différentes nuances de gris, voici le lien vers celui-ci.
Comment écrire des couleurs en HTML
HTML (ou HyperText Markup Language) vous permet d'ajouter différents contenus à une page et de créer une structure.
Les titres, paragraphes, images et liens que vous voyez sur une page web sont tous du code HTML.
Tout le code HTML est écrit dans son propre fichier. Ce fichier a une extension .html.
Lorsque vous souhaitez styliser le contenu que vous avez ajouté avec HTML, vous utilisez CSS (ou Cascading Style Sheets).
Il est considéré comme une bonne pratique de garder le contenu et les styles séparés, et d'écrire le code HTML et CSS dans des fichiers différents. C'est ce qu'on appelle la séparation des préoccupations.
Ainsi, vous ajouterez votre code CSS dans un fichier avec l'extension .css.
Pour changer la couleur du texte, ou la couleur de premier plan des éléments, vous utilisez la propriété color.
Lorsque vous souhaitez changer la couleur de fond d'un élément, vous utilisez la propriété background-color.
Codes Hex
Il existe plusieurs options parmi lesquelles vous pouvez choisir pour ajouter la couleur que vous souhaitez.
Certaines de ces options consistent à utiliser le nom de la couleur, le code HEX ou la valeur RGB qui correspond à une couleur spécifique.
Les codes HEX sont des caractères alphanumériques.
Un chiffre hexadécimal peut être l'une des 16 valeurs possibles, allant de 0 à 9 et de a à f.
Les codes sont précédés d'un #, comme par exemple : #ffffff, qui est la couleur blanche.
Couleurs RGB
Les valeurs de couleur RGB sont parmi les modèles de couleurs les plus populaires et les plus largement utilisés.
Chaque couleur est une combinaison de Rouge, Vert et Bleu, chaque couleur allant de 0 (le plus bas) à 255 (le plus haut).
La syntaxe générale ressemble à ceci : rgb(rouge, vert, bleu), comme dans cet exemple : rgb(0, 0, 255).
Parce que les nombres pour les places Rouge et Vert sont 0 (ce qui signifie qu'il n'y a pas de couleur là), et que le nombre le plus élevé est la place Bleu, cela signifie que la couleur est un Bleu pur.
Voici un exemple utilisant les trois pour changer la couleur du texte d'un paragraphe en rouge.
Les trois règles auront exactement le même résultat visuellement :
/* utilisant le nom de la couleur */
p {
color: red;
}
/* utilisant le code HEX pour le rouge */
p {
color: #FF0000;
}
/* utilisant la valeur RGB pour le rouge */
p {
color: rgb(255,0,0);
}
Vous pouvez en apprendre plus sur les codes HEX ici et les couleurs RGB ici.
La palette de couleurs grises
Ci-dessous se trouve un tableau avec un large spectre de certaines des nuances de gris reconnues en HTML, allant des plus foncées aux plus claires, avec leurs codes HEX et valeurs RGB respectifs.
Parcourez et choisissez n'importe quelle couleur à utiliser dans votre prochain projet de design web.
| Nuances de gris | Codes HEX | Valeurs RGB |
|---|---|---|
| #111111 | rgb(17, 17, 17) | |
| #121212 | rgb(18, 18, 18) | |
| #161618 | rgb(22, 22, 24) | |
| #181818 | rgb(24, 24, 24) | |
| #212121 | rgb(33, 33, 33) | |
| #212124 | rgb(33, 33, 36) | |
| #242526 | rgb(36, 37, 38) | |
| #282828 | rgb(40, 40, 40) | |
| #2F4F4F | rgb(47,79,79) | |
| #333333 | rgb(51, 51, 51) | |
| #36454F | rgb(54, 69, 79) | |
| #3A3B3C | rgb(58, 59, 60) | |
| #3B3B3B | rgb(59, 59, 59) | |
| #3D3D3D | rgb(61, 61, 61) | |
| #404040 | rgb(64, 64, 64) | |
| #494848 | rgb(73, 72, 72) | |
| #525252 | rgb(82, 82, 82) | |
| #555555 | rgb(85, 85, 85) | |
| #6082B6 | rgb(96, 130, 182) | |
| #616161 | rgb(97, 97, 97) | |
| #636363 | rgb(99, 99, 99) | |
| #6D6D64 | rgb(109, 109, 100) | |
| #696969 | rgb(105, 105, 105) | |
| #708090 | rgb(112, 128, 144) | |
| #71797E | rgb(113, 121, 126) | |
| #7393B3 | rgb(115, 147, 179) | |
| #777777 | rgb(119, 119, 119) | |
| #778899 | rgb(119,136,153 | |
| #7E7E7E | rgb(126, 126, 126) | |
| #808080 | rgb(128, 128, 128) | |
| #818181 | rgb(129, 129, 129) | |
| #818589 | rgb(129, 133, 137) | |
| #848884 | rgb(132, 136, 132) | |
| #888888 | rgb(136, 136, 136) | |
| #899499 | rgb(137, 148, 153) | |
| #8A9A5B | rgb(138, 154, 91) | |
| #8B8B81 | rgb(139, 139, 129) | |
| #8C8C8C | rgb(140, 140, 140) | |
| #909090 | rgb(144, 144, 144) | |
| #979797 | rgb(151, 151, 151) | |
| #999999 | rgb(153,153,153) | |
| #A9A9A9 | rgb(169, 169, 169) | |
| #AAAAAA | rgb(170, 170, 170) | |
| #AEAEAE | rgb(174, 174, 174) | |
| #B0B3B8 | rgb(176, 179, 184) | |
| #B2BEB5 | rgb(178, 190, 181) | |
| #B3B3B3 | rgb(179, 179, 179) | |
| #B4B4B4 | rgb(180, 180, 180) | |
| #BBBBBB | rgb(187, 187, 187) | |
| #BFBFBF | rgb(191, 191, 191) | |
| #C0C0C0 | rgb(192, 192, 192) | |
| #C5C5C5 | rgb(197, 197, 197) | |
| #CCCCCC | rgb(204, 204, 204) | |
| #D3D3D3 | rgb(211, 211, 211) | |
| #D4D4D4 | rgb(212, 212, 212) | |
| #DCDCDC | rgb(220,220,220) | |
| #DDDDDD | rgb(221, 221, 221) | |
| #E4E6EB | rgb(228, 230, 235) | |
| #E5E4E2 | rgb(229, 228, 226) | |
| #EEEEEE | rgb(238, 238, 238) | |
| #F2F2F2 | rgb(242, 242, 242) | |
| #F5F5F5 | rgb(245, 245, 245) |
Conclusion
J'espère que vous avez trouvé cet article utile et que vous avez trouvé de l'inspiration pour votre prochain projet de design.
Si vous êtes intéressé à en apprendre plus sur CSS et le développement web front-end, consultez la certification de design web responsive de freeCodeCamp ici. Vous y construirez 5 projets pour votre portfolio tout en apprenant les fondamentaux du développement web.
Merci d'avoir lu et bon codage !