Bonjour!

Ah, les codes hexadécimaux! Ces bé-bêtes donnent du fil à retordre à bien des codeurs, expérimentés comme débutants, et nombreux sont ceux qui doivent se fier à des générateurs de code pour produire la couleur idéale, souvent par essais et erreurs. Eh bien, l'astuce que je vous sers aujourd'hui ne remplacera certes pas lesdits générateurs, mais peu à peu, vous serez probablement capable de les utiliser moins souvent, voire pas du tout dépendant des situations. :)

Pour ceux qui ne le savent pas, il y a quatre façon de générer des codes de couleur sur le web.

white, black, blue, etc. → ce sont les noms des couleurs en anglais.
rgb(XXX,XXX,XXX) → ce sont les quantités de rouge, vert et bleu dans la couleur, représentées par une valeur allant de 0 à 255.
rgba(XXX,XXX,XXX,0.X) → même principe que le rgb, mais avec la transparence en nombre décimal entre 0 et 1.
#XXXXXX → codes hexadécimaux.

Les codes hexadécimaux sont nommés ainsi car ils comportent, vous l'aurez deviné, 6 chiffres ou lettres. Les deux premiers chiffres donnent la quantité de rouge, les seconds de vert et les derniers de bleu, comme ceci:

#XXXXXX

En effet, les couleurs primaires sur le web ne sont pas les mêmes que celles des arts plastiques (magenta, cyan et jaune). Les codes hexadécimaux vont de 00 à FF de la manière suivante:

00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 2A, 2B, 2C, 2D, 2E, 2F, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 3A, 3B, 3C, 3D, 3E, 3F, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 4A, 4B, 4C, 4D, 4E, 4F, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 5A, 5B, 5C, 5D, 5E, 5F, etc.

00, c'est le noir, c'est l'absence absolue de la couleur. FF, c'est la saturation maximale. Ainsi:

#000000 = noir
#FF0000 = rouge
#00FF00 = vert
#0000FF = bleu
#FFFF00 = jaune
#00FFFF = cyan
#FF00FF = rose
#FFFFFF = blanc

Lorsque les codes de rouge, vert et bleu sont les mêmes, la saturation de la couleur est nulle; ces codes correspondent aux différentes nuances de gris.

#000000 = noir #111111 = gris 1 #222222 = gris 2 #333333 = gris 3 #444444 = gris 4 #555555 = gris 5 #666666 = gris 6 #777777 = gris 7 #888888 = gris 8 #999999 = gris 9 #AAAAAA = gris 10 #BBBBBB = gris 11 #CCCCCC = gris 12 #DDDDDD = gris 13 #EEEEEE = gris 14 #FFFFFF = blanc

#000000 = noir #101010 = gris A #202020 = gris B #303030 = gris C #404040 = gris D #505050 = gris E #606060 = gris F #707070 = gris G #808080 = gris H #909090 = gris I #A0A0A0 = gris J #B0B0B0 = gris K #C0C0C0 = gris L #D0D0D0 = gris M #E0E0E0 = gris N #F0F0F0 = gris O

#0F0F0F = gris AA #1F1F1F = gris BB #2F2F2F = gris CC #3F3F3F = gris DD #4F4F4F = gris EE #5F5F5F = gris FF #6F6F6F = gris GG #7F7F7F = gris HH #8F8F8F = gris II #9F9F9F = gris JJ #AFAFAF = gris KK #BFBFBF = gris LL #CFCFCF = gris MM #DFDFDF = gris NN #EFEFEF = gris OO #FFFFFF = blanc

Lorsque tous les chiffres d'un code sont les mêmes, il est possible de n'en mettre que les trois premiers (note: ça ne fonctionne pas en BBCode). Les majuscules sont facultatives:

#FFF, #EEE, #DDD, #CCC, #BBB, #AAA, #999, #888, #777, #666, #555, #444, #333, #222, #111, #000,
#fff, #eee, #ddd, #ccc, #bbb, #aaa
#ff0000, #00ff00, #0000ff, #ffff00, #00ffff, #ff00ff, #ffffff

Voyons donc comment ces belles informations peuvent vous être utiles! :) Supposons que nous partons d'un rouge:

Lorem ipsum
(#FF0000)

Finalement, ce rouge est trop vif et trop pâle. Nous voudrions le rendre plus foncé.

Lorem ipsum
(#CC0000)

Et puis, il est encore trop vif, nous allons ajouter du vert et du bleu pour en baisser la saturation.

Lorem ipsum
(#CC3333)

Comme nous avons ajouté de la couleur, elle est à nouveau trop pâle.

Lorem ipsum
(#BB2222)

Et puis, ça serait bien que ça tire un peu sur le bourgogne, nous allons donc ajouter du bleu.

Lorem ipsum
(#BB2244)

Et on aimerait que ça soit encore un peu plus foncé.

Lorem ipsum
(#AA1133)

Et voilà! Bon, certes si vous êtes daltonien, il se peut que vous ne voyez pas ou peu la différence des nuances entre ces différentes étapes, mais sinon vous devriez le voir. :)

En espérant que ça serve! ^^