[Tuto]Couleurs héxadécimales

Démarré par mota, 30 Mars 2005 à 17:48

0 Membres et 1 Invité sur ce sujet

30 Mars 2005 à 17:48 Dernière édition: 10 Novembre 2006 à 01:35 par mota
I-Introduction

Ah, en voilà une question que beaucoup se posent: que sont les couleurs héxadécimales ?

Ce sont tout simplement les couleurs auxquelles sont attribuées un code dit en base 16, nous allons comprendre le sens de ce barbarisme un peu plus tard.

Tout d'abbord, il faut savoir que les couleurs en informatique sont codées.
Car, bien évidemment, on ne va pas demander à l'ordinateur pour obtenir une couleur bien précise une requête du genre:

"Bonjour monsieur l'ordinateur, bon bah aujourd'hui je voudrais comme couleur un joli rose fushia, tendant vers le gris clair mais pas trop parce que je voudrais garder une part de mystère, vous avez ça en stock ?"

Voyons, ce n'est pas sérieux  :D

Donc nous allons lui demander de façon codée, qu'il a déja en mémoire sous un seul et unique code, qu'il ne nous reste plus qu'à trouver.

II-Le rgb
Il faut savoir qu'il y a plusieurs codes de couleurs, dont le plus connu, reflétant ainsi mieux la réalité est le RGB, à savoir le Red Green Blue, traduisez le Rouge Vert Bleu, qui permet d'obtenir des teintes selon le dosage de rouge, de vert et de euh..... ah oui, bleu :)

Les valeurs du RGB sont comprises entre 0 et 255, pour chaque couleur, donc il vous faudra par exemple pour obtenir du blanc faire 255 255 255 et pour du noir 0 0 0.

Mais à mon sens ce code n'est pas très pratique, tout du moins il faut avoir quelques notions de physique ou d'art pour s'y retrouver.

Pour les créateurs de site, il vous est possible d'employer le rgb via css de la façon suivante:
Imaginons que je veuille des liens de cette couleur là, le code RGB correspondant est alors 42 106 186, je devrais donc mettre en place la propriété css rgb(), qui prend en compte les trois teintes séparées par des virgules:


a {
color: rgb(42,106,186);
}


Ce n'est pas plus compliqué :)

III-L'héxadécimal

Ah, en voilà un code qui fait bien peur: l'héxadécimal.
Mon dieu que c'est affolant tous ces chiffres et ces lettres, on en perdrait notre latin!
Et pourtant...
Tout d'abord il faut savoir que l'héxadécimal se compose en 4 parties:

1-Le dieze, placé en tout début de code, il permet de bien montrer que l'on utilise ce système de code.

2-2 chiffres et/ou lettres, allant de 0 à F.
Pourquoi inclure des lettres à des chiffres ? Je vais vous expliquer.
Le code héxadécimal, comme son nom le suggère est un code en base 16, cela signifie que les chiffres ne sont pas 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, mais qu'il faut en ajouter quelques-uns pour aller jusqu'à 16.
Mais alors 16 c'est bien 9 + 7 ?
Oui, et alors ? C'est là qu'interviennent les lettres. Il faut savoir que le 0 est compté comme un chiffre à part entière, donc il y a déja les 10 chiffres de base, compris entre 0 et 9, puis au lieu d'y ajouter des nombres (10, 13, 16 ...) qui sont composés de chiffres, on va y inclure les 6 premières lettres de l'alphabet, en complément des 10 premiers chiffres, comme cela on obtient bel et bien un code numérique, qui compte 16 chiffres qui composeront des nombres.

J'en reviens alors à mes deux chiffres/lettres de départ, elles symbolisent la teinte de rouge employé, un peu comme dans le rgb.
Ces deux chiffres sont alors multipliés, pour obtenir un nombre entre 0 et 255 .

L'algorithme utilisé est assez complexe mais il faut le retenir:
Prenons deux variables A et B (représentant des chiffres), alors le calcul consiste à faire:

Ax16+B

Donc avec FA cela nous donne

15x16+10 = 250

Donc FF = 15x16+15 = 255


3-Encore deux chiffres qui marchent exactement de la même manière sauf qu'ici il s'agît du vert, et non du rouge.

4-Je parie que vous allez rire.
C'est encore la même chose ici, sauf que c'est pour le bleu, marrant non ? :D

Mais alors vous allez me dire: "Oui, je croyais que le rgb c'était pas maniable et tout !"
Certes, mais l'héxadécimal permet d'avoir une précision bien plus grande, pour le cerveau humain (et plus rapide), et d'autre part il est beaucoup plus intuitif (vous verrez).

Pour introduire l'héxadécimal dans le css, rien de plus simple, c'est la couleur par défaut:

Toujours avec nos liens de cette couleur là, nous obtiendrons ceci:



a {
color: #2A6ABA;
}


Vous l'aurez deviné, le code de la couleur était bel et bien #2A6ABA :D

IV-Petit mémo

Ainsi pour vous initier plus facillement à l'héxadécimal, je vous propose quelques couleurs basiques et expliquées:

Le blanc (blanc):
En héxadécimal il fait partie, tout comme le noir de la partie des gris.
Pourquoi cela ? Parce que son code, du rouge au bleu en passant par le vert est exactement le même: FF
Le FF, comme vous l'aurez calculé, représente 15x16+15 = 255
Donc: #FFFFFF

Le noir: exatcement la même chose que le blanc, sauf que l'originalité, comme vous l'aurez deviné, réside dans le fait qu'il s'agisse d'une répétition de 0.
Donc: #000000

Le gris:
C'est une répétition du même couple de chiffres de base 16, pour cet exemple j'ai pris A8 (#A8A8A8), mais il y a plusieurs teintes de gris, selon que vous le vouliez foncé ou clair; on descend dans les chiffres pour qu'il soit foncé, on monte pour qu'il soit clair

Plus clair (#B8B8B8)
Gris d'exemple (#A8A8A8)
Plus foncé (#989898)

A savoir, que par le fait de sa répétition, toute couleur incluse dans les gris permet de n'exprimer que 3 chiffres dans le code, l'ordinateur se chargera de comprendre pour vous:

Ainsi #FFFFFF = #FFF
#000000 = #000

Et voilà nos trois couleurs:

Rouge (#FF0000)
Vert (#00FF00)
Bleu (#0000FF)


Si vous voulez un indicatif des couleurs les plus utilisées, en voici un: http://www.webdonline.com/fr/webd/admin_hexa.html

Mais sâchez qu'il en existe des milliers sur le net ;)

Pour trouver des codes par leur teinte, je vous conseille votre logiciel d'imagerie, tel que photoshop ;)

Voila, c'est terminé, alors, pas si dur hein ? :)

30 Mars 2005 à 18:29 #1 Dernière édition: 30 Mars 2005 à 21:59 par glacian
Citation(car F = 15 alors FF = FxF = 15x15 = 255)

C'est pas pour te contredire mais FF= 15*16 +15=255 ;)

Edit: en fait ça marche comme la base 10:
156=6*10^0 +5*10^1+1*10^2

En base 16 on remplace les 10 par des 16 pour avoir l'equivalent:
#A2B= 11*16^0+2*16^1+10*16^2

^ est le symbole de la puissance

Voila, fin du cours de math :mrgreen:  

30 Mars 2005 à 19:13 #2 Dernière édition: 30 Mars 2005 à 19:35 par mota
Mince erreur de calcul :/

Edit, rectifié :)

30 Mars 2005 à 20:35 #3 Dernière édition: 30 Mars 2005 à 20:35 par 19oj19
Je me permets de rajouter, pour ceux que ça interesse, que l'on peut utiliser le code hexa dans la balise de couleur du forum. (mota l'a peut etre dit, auquel cas j'ai loupé ça  :wacko: )

Exemple :

[color=#19D0FF]Oh, la belle couleur[/color]

donne :

Oh, la belle couleur

Oui je l'ai déja dit mais c'est bien de le rappeler :D

31 Mars 2005 à 00:30 #5 Dernière édition: 31 Mars 2005 à 00:34 par QI907
Tendance PC : Les couleurs Web

J'ai peiné à faire un tableau comme ça...

"Page précédente" ne fonctionnera pas puisque vous serez arrivé directement :P

Intérrésant, j'épingle le topic :)

Excellent ton tableau, QI907 ! On peut vraiement dire que ton QI est égal à 907 !  ;)
Celui de mota est bien, mais celui là est super bien  :)
Tu n'auras pas peiné à faire ce tableau pour rien !  ^_^  
Visitez Zelda Soluce ! Merci de laisser un ptit mot sur le livre d'or, ça fait toujours plaisir :)

03 Avril 2005 à 17:31 #8 Dernière édition: 03 Avril 2005 à 17:32 par QI907
Merci :blush:

Mais ce qui me rend fou pour l'instant c'est que j'ai créé ce site à l'époque mi-2002/2003 alors l'apparence (gifs animés partout) et la fabrication laissent à désirer aujourd'hui (mais à l'époque c'était bien), car maintenant les moeurs ont évolué.
Fin juin je termine mes études et je bosse à fond sur le site pour lui refaire une nouvelle beauté totale (feuilles de style, suppression des frames qui bloquent le référencement, etc.).

[Mode "Le conseil du jour :"]
D'ailleurs cette nuit au lieu de dormir (:P) j'ai acheté le nom de domaine en .COM :super:, afin de ne pas me faire souffler la place au cas où un petit malin aurait l'idée de se dire "son site fonctionne bien et c'est un .NET, donc je vais m'accaparer le .COM ainsi je deviens prioritaire" parce que lorsqu'on vous donne une adresse de site ("tiens va sur le site de TF1 !"), instinctivement vous tapez .COM ! :D
Exemple avec france2.fr où quand vous tapez france2,com vous tombez sur, euh hum ne dira rien. :naze:
[/Mode]


C'est bien comme topic et pourquoi ne pas allez sur france2.com ?

C'est un site à caractère "pas pour les enfants ^^'

Ouf le bon vieux hex, sa fait longtemps que j'en ai pas fait!

Un truc encore plus utile: http://pourpre.com/colorbox/index.php
La boite à couleurs! :police:


23 Juin 2005 à 18:13 #15 Dernière édition: 23 Juin 2005 à 18:57 par SaniOKh
Encore un tuyau pas souvent utilisé, mais connu quand même... vous saviez que certains mots servent de "raccourcis" pour les couleurs? Par exemple, #FF0000 peut très bien être remplacé par red (beh tiens, les tags BBCode de ce forum, les couleurs qu'il sort quand on les choisit dans le menu dérouleur peuvent très bien être utilisées à la place des couleurs héxadécimales) .
Voici la liste que j'ai pu avoir grâce à the GIMP ^^ (surlignez pour certaines couleurs peu visibles, certaines couleurs n'ont pas été acceptées par SMF, alors je les ai enlevés):

Aliceblue/Antiquewhite/Aqua/Aquamarine/Azure
Beige/Bisque/Black/Blue/Blueviolet/Brown/Burlywood
Cadetblue/Chartreuse/ChocolateCoral/Cornsilk/Crimson/Cyan
Darkblue/Darkcyan/Darkgray/Darkgreen/Darkgrey/Darkkhaki/Darkmagenta/Darkorange/Darkorchid/Darkred/Darksalmon/Darkseagreen/Deeppink/Deepskyblue/Dimgray/Dimgrey/Dodgerblue
Firebrick/Floralwhite/Forestgreen/Fuchsia
GainsboroGhostwhite/Gold/Goldenrod/Gray/Green/Greenyellow/Grey
Honeydew/Hotpink
Indianred/Indigo/Ivory
Khaki
Lavender/Lawngreen/Lemonchiffon/Lightblue/Lightcoral/Lightcyan/Lightgray/Lightgreen/Lightgrey/Lightpink/Lightsalmon/Lightskyblue/Lightyellow/Lime/Limegreen/Linen
Magenta/Maroon/Mediumblue/Mediumorchid/Mediumpurple/Midnightblue/Mintcream/Mistyrose/Moccasin
Navajowhite/Navy
Oldlace/Olive/Olivedrab/Orange/Orangered/Orchid
Palegreen/Papayawhip/Peachpuff/Peru/Pink/Plum/Powderblue/Purple
Red/Rosybrown/Royalblue
Saddlebrown/Salmon/Sandrybrown/Seagreen/Seashell/Sienna/Silver/Skyblue/Slateblue/Slategray/Slategrey/Snow/Springgreen/Steelblue
Tan/Teal/Thistle/Tomato/Turquoise
Violet
Wheat/White/Whitesmoke
Yellow/Yellowgreen

Voilà. Alors, il y en a bien plus qu'on le croit :)

C'est très interessant, Sani'
Et c'est quand même moins compliqué que le code héxadécimal  ^_^
Visitez Zelda Soluce ! Merci de laisser un ptit mot sur le livre d'or, ça fait toujours plaisir :)

Citation de: SaniOKh le 23 Juin 2005 à 18:13
Encore un tuyau pas souvent utilisé, mais connu quand même... vous saviez que certains mots servent de "raccourcis" pour les couleurs? Par exemple, #FF0000 peut très bien être remplacé par red (beh tiens, les tags BBCode de ce forum, les couleurs qu'il sort quand on les choisit dans le menu dérouleur peuvent très bien être utilisées à la place des couleurs héxadécimales) .
Voici la liste que j'ai pu avoir grâce à the GIMP ^^ (surlignez pour certaines couleurs peu visibles, certaines couleurs n'ont pas été acceptées par SMF, alors je les ai enlevés):

Aliceblue/Antiquewhite/Aqua/Aquamarine/Azure
Beige/Bisque/Black/Blue/Blueviolet/Brown/Burlywood
Cadetblue/Chartreuse/ChocolateCoral/Cornsilk/Crimson/Cyan
Darkblue/Darkcyan/Darkgray/Darkgreen/Darkgrey/Darkkhaki/Darkmagenta/Darkorange/Darkorchid/Darkred/Darksalmon/Darkseagreen/Deeppink/Deepskyblue/Dimgray/Dimgrey/Dodgerblue
Firebrick/Floralwhite/Forestgreen/Fuchsia
GainsboroGhostwhite/Gold/Goldenrod/Gray/Green/Greenyellow/Grey
Honeydew/Hotpink
Indianred/Indigo/Ivory
Khaki
Lavender/Lawngreen/Lemonchiffon/Lightblue/Lightcoral/Lightcyan/Lightgray/Lightgreen/Lightgrey/Lightpink/Lightsalmon/Lightskyblue/Lightyellow/Lime/Limegreen/Linen
Magenta/Maroon/Mediumblue/Mediumorchid/Mediumpurple/Midnightblue/Mintcream/Mistyrose/Moccasin
Navajowhite/Navy
Oldlace/Olive/Olivedrab/Orange/Orangered/Orchid
Palegreen/Papayawhip/Peachpuff/Peru/Pink/Plum/Powderblue/Purple
Red/Rosybrown/Royalblue
Saddlebrown/Salmon/Sandrybrown/Seagreen/Seashell/Sienna/Silver/Skyblue/Slateblue/Slategray/Slategrey/Snow/Springgreen/Steelblue
Tan/Teal/Thistle/Tomato/Turquoise
Violet
Wheat/White/Whitesmoke
Yellow/Yellowgreen

Voilà. Alors, il y en a bien plus qu'on le croit :)

Oui mais on ne va tout de même pas donner un nom au 16 millions de couleurs on en aurait pas fini :blink:

Les nombres héxedécimaux, ça se fait en Tle S, non ? Parce que les couleurs et les nombres vont ensemble dans la catégorie des héxadécimaux ?
Tetra Island : Encore des news et toujours des news : http://tetrazww.goldzoneweb.info/ !
J'aimerais contacter Helmasaur mais envoyer des mps pour contacter qqn est impossible et c'est un gros problème !
Merci d'avance !

Nan, on fait pas de l'hexadécimal en Terminale S. A moins que tu aies une option informatique "avancée" ^^.
Citation
Parce que les couleurs et les nombres vont ensemble dans la catégorie des héxadécimaux ?

Gnéééééééééé ?

Citation de: Noxneo le 27 Octobre 2006 à 20:11
Nan, on fait pas de l'hexadécimal en Terminale S. A moins que tu aies une option informatique "avancée" ^^.
Citation
Parce que les couleurs et les nombres vont ensemble dans la catégorie des héxadécimaux ?

Gnéééééééééé ?

Tu sais ce qu'est le savoir-vivre et la politesse pour parler aux autres sans parler à des chiens ? Parce qu'on se croit avec des joueurs de foot américain avec toi ! J'te parle pas comme ça, moi !  :angry: Non mais oh ! Et puis zut, je cherche pas à comprendre !
Tetra Island : Encore des news et toujours des news : http://tetrazww.goldzoneweb.info/ !
J'aimerais contacter Helmasaur mais envoyer des mps pour contacter qqn est impossible et c'est un gros problème !
Merci d'avance !

S'il y a des différents, ça serait pas mal de les résoudre par MP.
Merci.

Cela dit, je n'ai pas non plus compris ce que tu voulais dire.


Il n'y a aucun différent, juste ce cher membre qui me saute dessus alors que mon post n'avait rien d'offensant.

Ben t'es "prof" ! LOL ! Bon en fait, j'ai dit ça avec les héxadécimaux car ma prof de maths en avait parlé en classe ! C'est pour ça ! Et que ça se faisait avec les nombres complexes en terminale !
Tetra Island : Encore des news et toujours des news : http://tetrazww.goldzoneweb.info/ !
J'aimerais contacter Helmasaur mais envoyer des mps pour contacter qqn est impossible et c'est un gros problème !
Merci d'avance !

Nombre complexes et notation hexadécimale n'ont strictement aucun rapport.

OK ! Merci pour l'info mais ce tuto pour les couleurs pourra toujours me servir...
Sinon, je n'ai rien contre toi mais c'est toi qui a commencé à me faire comprendre que je remontais les topics !
Tetra Island : Encore des news et toujours des news : http://tetrazww.goldzoneweb.info/ !
J'aimerais contacter Helmasaur mais envoyer des mps pour contacter qqn est impossible et c'est un gros problème !
Merci d'avance !

Deuxième fois :

S'il y a des différents, merci de continuer par MP.
N'est-ce pas Mario-Sephiroth ?


Citation de: Mario-Sephiroth le 27 Octobre 2006 à 20:25
Citation de: Noxneo le 27 Octobre 2006 à 20:11
Nan, on fait pas de l'hexadécimal en Terminale S. A moins que tu aies une option informatique "avancée" ^^.
Citation
Parce que les couleurs et les nombres vont ensemble dans la catégorie des héxadécimaux ?

Gnéééééééééé ?

Tu sais ce qu'est le savoir-vivre et la politesse pour parler aux autres sans parler à des chiens ? Parce qu'on se croit avec des joueurs de foot américain avec toi ! J'te parle pas comme ça, moi !  :angry: Non mais oh ! Et puis zut, je cherche pas à comprendre !


Ca doit etre pour cela que je suis si méchant  :rolleyes:


Sinon, non, les changements de bases algébriques ne sont pas du tout au programme de la terminale S, ou alors une brève introduction au binaire en spé maths, mais ça ne va pas plus loin.

Ca marant que je tombe sur le topic, car justement nous avons aujourd'hui "révisé" les conversions et les notations de base 10, binaires et hexadécimales. Je place mon "réviser" entre guillemets, car le professeur nous a assuré avoir déjà fait tout le cours là dessus, mais bizarement seize élèves n'avaient jamais vu ce cours...ah et puis nous sommes seize dans la classe. Bien qu'ayant approché plusieurs fois la conversion base10 <=> base2, la plupart de ses méthodes nous étaient inconnues.
Bref nous avons aujourd'hui vu toutes les méthodes pour passer facilement d'un nombre noté en n'importe quelle base en une autre base, et il se révèle qu'au final c'est plutôt simple, c'est juste des maths (vive les divisions !).
Cela ne vous fait sans doute ni chaud ni froid, mais j'apporte juste ma pierre à l'édifice de votre interrogation en ce qui concerne les classes dans lesquelles sont étudiées ces notations. Je suis en fait en premiere S, section SI (cela veut dire que c'est une première S classique, mais la matière SVT est remplacée par une autre : les sciences de l'ingénieur), et nous avons travaillé sur ces notations avec le professeur d'électronique.
Suivez mon défi fou : finir de nouveau chaque Zelda, à 100%, dans leur ordre chronologique afin de permettre une réécriture au fur et à mesure de la légende.