Mieux comprendre les couleurs héxadécimales

Mieux comprendre les couleurs héxadécimales
Si tu n’as pas encore participé au concours pour tenter de remporter les 4 aides-mémoires en HTML et CSS, fais un détour par ici! 😉

Qu’est-ce que c’est ?

Bien qu’il soit autorisé de mettre les noms des couleurs (en anglais) dans vos fichiers CSS, vous n’utilisez pas souvent cette méthode car la palette disponible est très limitée.

Pour désigner une couleur en CSS, on utilise le plus souvent sa notation hexadécimale, soit un code commençant par un dièse (#), composé de 3 paires de chiffres et/ou de lettres.

La notation héxadécimale

Un triplet hexadécimal est un nombre hexadécimal à 6 chiffres mémorisé sur trois octets utilisé en HTML et dans les feuilles de style en cascade (CSS), et d’autres applications, pour représenter les couleurs. Les octets représentent les composantes rouge, vert et bleu de la couleur. Un octet représente au moins l’intervalle entre 00 et FF . Wikipedia

Regardons tout de suite un exemple, ce sera plus clair 😉 :

HTML

<span class="hexa">
 Voici un texte en rouge
</span>

CSS

.hexa{
	color:#FF0000; /* N'oubliez ni le dièse avant, ni le point-virgule après! */
}

Résultat:

Voici un texte en rouge

Dans cet exemple, la couleur est désignée par le code « FF0000 ». Décomposons ce code:

  • FF désigne la composante Rouge
  • 00 la composante Verte
  • et 00 la composante Bleue

Comment écrire ces codes de couleurs ?

« FF » et « 00 » sont les deux extrêmes de l’échelle. on peut dire que:

  • « FF » équivaut à « Oui »
  • « 00 » équivaut à « Non »

Les couleurs primaires

Le rouge étant composé de 100% de rouge, 0% de vert et 0% de bleu, on peut le noter ainsi:

Rouge Vert Bleu
OUI NON NON

Soit:

Rouge Vert Bleu
FF 00 00

Simple, n’est-ce pas ?

Pour écrire ou lire le rouge, le vert ou le bleu, c’est enfantin.

Les couleurs secondaires

Pour certains mélanges faciles, comme le violet (rouge + bleu), vous pouvez aussi vous débrouillez, mais ce n’est pas très précis.

Rouge Vert Bleu
OUI NON OUI

Soit:

Rouge Vert Bleu
FF 00 FF

Le noir et le blanc

Le Noir et le Blanc suivent la même logique: le Noir étant l’absence de couleur et le blanc la fusion de toutes les couleurs.

Le Noir

Rouge Vert Bleu
NON NON NON
00 00 00

Le Blanc

Rouge Vert Bleu
OUI OUI OUI
FF FF FF

Un dégradé

Vous pouvez vous amuser à faire un dégradé de gris en jouant avec les chiffres de 0 à 9 comme ceci:

#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999

Les couleurs nuancées et exotiques

Quand il s’agit de trouver le code correspondant au bleu turquoise ou au jaune orangé, le calcul devient plus compliqué.

A ce moment, je vous conseille l’utilisation d’une « pipette« .

Il s’agit d’un petit outil, similaire à celui que l’on trouve dans Photoshop, présentant une pipette que l’on manie avec la souris. Un clic sur une zone colorée vous donne le code correspondant.

Il existe des dizaines de pipettes dans ce genre.

Parmi les plus utilisés, on retrouve beaucoup de plugin pour firefox, safari ou chrome. Mais je vous déconseille ces outils car vous êtes limités à cliquer sur des éléments affichés par votre navigateur seulement.

Pour ma part, j’utilise depuis de nombreuses années le logiciel gratuit La boîte à couleurs. Si vous êtes sur Windows, je vous le conseille grandement. Il liste un grand nombre de couleurs, classées selon différentes catégories.

Il possède également un convertisseur RGB/Hexadécimal que vous utiliserez sans doute souvent!

La notation décimale (ou rgb)

Il existe une autre notation pour désigner les couleurs dans vos CSS. Il s’agit de la notation RGB: Red Green Blue (ou RVB : Rouge Vert Bleu).

Vous pouvez choisir de l’utiliser plutôt que l’autre, mais le principe de fonctionnement est très proche.

Regardons quand même un exemple :

HTML

<span class="deci">
 Voici un autre texte en rouge
</span>

CSS

.deci{
	color:rbg(255, 0, 0);
}

Résultat:

Voici un autre texte en rouge

Dans cet exemple, la couleur est désignée par le code : 255, 0, 0. Décomposons ce code:

  • 255 désigne la composante Rouge
  • 0 la composante Verte
  • et 0 la composante Bleue

On remarque tout de suite la similitude entre les deux notations. Outre une petite différence de syntaxe, ce qui change entre les deux n’est pas tant la structure du code mais l’unité de mesure.

La première se compose de duo de lettres et de chiffres, tandis que la seconde suit une échelle de 0 à 255 .

En conclusion

Le but de cette explication n’est pas de vous donner la possibilité de retrouver toutes les couleurs. Comme vous le voyze les combinaisons sont multiples et variées, et surtout impossible à retenir par coeur!

Mais en comprenant le fonctionnement général, ces codes vous paraîtront moins obscurs à manipuler.

Allez, une dernière astuce pour la route.

La notation hexadécimale raccourcie

Saviez-vous que vous pouvez raccourcir les codes composés de paires identiques ? Par exemple:

  • #FFCC00 = #FC0
  • #FFFFFF = #FFF
  • #FF0022 = #F02
  • etc

CSS, tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

18 commentaires

  1. Bonjour Marie-Eve,

    merci beaucoup pour ce logiciel que je ne connaissais pas…

    Pour ma part, quand je cherche une couleur, je vais sur le site Code-couleur.com.

    Est-ce que tu le connais ?

    Bonne journée.

    Sylvie

    Répondre
    • Bonjour Sylvie,
      Non je ne connaissais pas ce site. Merci pour le partage, même si je vais rester avec mon ‘ti utilitaire 😉

      Répondre
  2. La boîte à couleurs, un outil magique, je l’ai découvert il y a quelques mois et il me sert très souvent, je recommande aussi… Et j’en apprends encore un peu plus sur les codes avec cet article, merci Marie-Eve !!

    Répondre
  3. Bon article (je découvre ton blog qui file dans mes RSS « webmaster ») !
    Il ne manque plus qu’une possibilité d’écrire les couleurs en Pantone et la manipulation des couleurs en CSS serait parfaite !

    Répondre
    • En fait, il existe d’autres balises que celles présentés…
      Je ne suis pas de bien comprendre ce que sont les « couleurs en Pantone » mais il existe une propriété device-cmyk() dédié notamment aux imprimantes (qui utilisent le format CMYK) .

      Marie-Eve: c’est un peu lourd d’utiliser un logiciel pour trouver une couleur quand même… je préfère encore les différent outils online :)

      Pas mal l’explication avec les OUI / NON.
      ça marche pas pour les couleurs HSL par contre… 😉 (ni pour expliquer la transparence)

      Répondre
  4. Bonjour MarieEve,

    Voici une des raisons pour laquelle j’aime ton blog.

    Pour une fois je comprends ce que signifie les chiffres bizarres des couleurs :)

    En fait en peut aussi utiliser une extension google chrome ou firefox comme pipette, par exemple « color picker », on s’inspire souvent d’une couleur que nous avons vu sur une photo ou sur un site web, on peut la réutiliser facilement.

    Amicalement,

    Redouan

    Répondre
    • Bonsoir Redouan,

      allez hop, encore un outil de plus dans mon ordinateur.

      Suite à ton commentaire, je viens d’installer l’extension « colorzilla » de Firefox.
      Un outil génial que je recommande à toutes et tous.

      Bonne nuit.

      Sylvie

      Répondre
  5. Bonjour Marie-Eve,
    Chaque fois que je lis l’un de tes articles, je me dis : « c’est dingue comment certaines choses compliquées peuvent être expliquées simplement avec une bonne dose de pédagogie ! »
    Merci de te mettre à notre place quand tu réalises un tutoriel, avec toi tout devient simple comme un jeu d’enfant !

    Répondre
  6. Merci beaucoup Marie,
    Une explication vraiment très simple et pourtant efficace du code couleur.
    Si je puis aussi me permettre la similitude entre les deux façons est très simple, nous somme sur le même système simplement que le F en hexa vaut 15 en décimal, dès lors on à (15*15)= 255 soit la valeur maximale de la notation décimale.

    Répondre
    • Super! Je ne savais pas comment passer de l’un à l’autre « automatiquement ».
      Merci Alexandre pour cette précison :)

      Et moi c’est Marie-Eve pas Marie (j’y tiens) 😉

      Répondre
  7. Bonjour Marie Eve.

    Moi je cherche toujours « colorpicker » sur Google pour trouver une couleur en hexa et je prends le premier résultat. Mais merci pour cette petite leçon, je ne savais pas :-)

    Après, calculer de tête les couleurs hexa pas sûr que ça soit vraiment utile, mais c’est toujours cool de savoir d’où ça vient !

    Répondre
    • Salut Julien,
      Nan, c’est pas pour calculer de tête! (un poil compliqué quand même 😉 )…c’est plutôt de la culture G. Histoire de savoir un peu à quoi ça correspond. Personnellement, j’ai appris ça il y a peu, et ça m’a scotché! Déformation professionnelle sans doute…

      Répondre
  8. J’utilise aussi la boite à couleur, ça évite de se casser la tête! Sympa en tout cas l’article.. pour la culture générale!

    Répondre
  9. Très bon article, simple à comprendre et complet! Tout ce que j’aime. Sinon il me semble que le « ; » n’est pas obligatoire si il n’y a pas d’autre propriété CSS derrière.

    Répondre
    • Bonjour Anna,
      En effet, le ; n’est obligatoire qu’entre deux propriétés, mais comme j’en écris une par ligne, j’ai pris l’habitude de toujours mettre un point-virgule en fin de ligne. Idéalement, il ne faudrait pas.

      Répondre
  10. Sympa de comprendre le principe, de là à taper directement la couleur sans la voir, il faut vraiment que ce soit une couleur saturée simple !!

    Répondre
  11. Bonjour,
    Merci pour l’info
    J’essaie pour ma part dans la mesure du possible d’utiliser des couleurs de la « safety palette ». http://www.lookimage.com/palette/
    Sinon, j’utilisais jusqu’a present colorpic

    Répondre

Trackbacks/Pingbacks

  1. Comprendre les couleurs hexadécimales | Les Doigts dans le Net | -thécaires | Espace numérique et autoformation | Scoop.it - [...] Bien qu'il soit autorisé de mettre les noms des couleurs (en anglais) dans vos fichiers CSS, vous n'utilisez pas…
  2. Comprendre les couleurs hexadécimales | Les Doigts dans le Net « la bibliothèque, et veiller - [...] on lesdoigtsdanslenet.com Share this:J'aime ceci:J'aimeBe the first to like [...]
  3. Palettes de couleurs | Pearltrees - […] gratuit pour définir une palette de couleurs. Html Color Codes. Une palette simplifiee pour HTML. Comprendre les couleurs hexadécimales.…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint