AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Astuce] Fonctionnement des codes hexadécimaux

    Partagez
    Minishiro
    FémininAge : 20Messages : 288

    le Mar 25 Déc 2012 - 0:07

    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! ^^



    Okhmhaka
    FémininAge : 31Messages : 31725

    le Mar 25 Déc 2012 - 1:46

    Ah! Très bonnes infos ça. Généralement on les utilise sans trop les comprendre, mais c'est bien de savoir à quoi ils correspondent et comment ils sont faits. C'est vrai que pour ma part j'utilise systématiquement la palette de photoshop, mais surtout parce que je prends avec la pipette des couleurs de ma bannière afin d'accorder tout l'ensemble^^ C'est une bonne astuce qui peut servir je pense x).

    Merci !



    Minishiro
    FémininAge : 20Messages : 288

    le Mar 25 Déc 2012 - 4:47

    Ça fait plaisir! Perso je fais la même chose que toi pour les designs mais quand je code des mini-fiches, je me sers presque jamais d'un générateur/de Photoshop. ^^



    Youp
    FémininAge : 21Messages : 498

    le Dim 7 Juin 2015 - 21:18

    Oh c'est super rigolo et sympa de savoir enfin pourquoi et comment ils indiquent une couleur ! Je pensais que c'était une sorte de convention, comme si un mec s'était levé et avait crié : " JE VEUX QUE (#AA1133) CE SOIT DU BORDEAUX ET PUIS C EST TOUT" . Merci . Je fais remonter pour les petits curieux ^^



    Contenu sponsorisé

    Aujourd'hui à 7:00


      La date/heure actuelle est Dim 11 Déc 2016 - 7:00