Couleurs Hexadécimales

Table des Matières

Qu'est-ce que le Code de Couleur Hexadécimal ?
Transparence dans les Couleurs Hexadécimales
Tableau des Couleurs de Base avec Transparence
Utilisation du Code Hexadécimal en CSS
Tableau d'Opacité en Hexadécimal (0 % à 100 %)
Liste des Couleurs CSS Nommées et de leur Code Hexadécimal
Foire aux Questions

Qu'est-ce que le Code de Couleur Hexadécimal ?

Le code de couleur hexadécimal est une représentation compacte et largement utilisée pour définir des couleurs sur des pages web et dans d'autres environnements numériques. Il est composé de six caractères qui correspondent aux valeurs des couleurs rouge, vert et bleu (RGB), en utilisant le système de numérotation hexadécimale. Les couleurs sont représentées au format #RRGGBB, où chaque paire de caractères indique l'intensité d'un des trois composants de couleur.

Par exemple :

#FF0000 représente le rouge pur.
#00FF00 représente le vert pur.
#0000FF représente le bleu pur.

Transparence dans les Couleurs Hexadécimales

En plus des couleurs opaques définies par le format #RRGGBB, il existe une extension qui permet de définir la transparence en utilisant le format RGBA en hexadécimal. Ce format est #RRGGBBAA, où les deux derniers caractères (AA) indiquent le niveau d'opacité ou de transparence de la couleur.

00 représente complètement transparent.
FF représente complètement opaque.

Par exemple :

#FF000080 définit une couleur rouge avec 50 % de transparence.
#0000FF33 définit une couleur bleue avec 20 % d'opacité.

Ce format est particulièrement utile lorsque vous souhaitez définir des couleurs avec différents niveaux d'opacité dans des éléments web, améliorant ainsi le contrôle visuel dans les superpositions et les effets de transparence.

Tableau des Couleurs de Base avec Transparence

Voici quelques exemples de couleurs au format hexadécimal, à la fois opaques et avec différents niveaux de transparence :

Couleur	Hexadécimal (Opaque)	Hexadécimal (50% Transparent)	Hexadécimal (20% Transparent)
Rouge	#FF0000	#FF000080	#FF000033
Vert	#00FF00	#00FF0080	#00FF0033
Bleu	#0000FF	#0000FF80	#0000FF33

Utilisation du Code Hexadécimal en CSS

Le code de couleur hexadécimal est largement utilisé dans le CSS pour définir les couleurs d'arrière-plan, de bordure et de texte. Vous pouvez utiliser à la fois le format #RRGGBB pour les couleurs opaques et le format #RRGGBBAA pour définir directement l'opacité. Cela est idéal pour améliorer l'esthétique des sites web, en particulier lorsque vous travaillez avec des éléments nécessitant des couches ou une transparence ajustable.

Tableau d'Opacité en Hexadécimal (0 % à 100 %)

Dans le format à huit chiffres #RRGGBBAA, les deux derniers chiffres (AA) indiquent l’opacité : 00 est totalement transparent et FF totalement opaque. Pour le calculer, multipliez le pourcentage par 255, divisez par 100 et écrivez le résultat en hexadécimal. Par exemple, le rouge #FF0000 à 50 % d’opacité donne #FF000080, soit rgba(255, 0, 0, 0.5).

Tableau d'Opacité en Hexadécimal (0 % à 100 %)
Opacité	Valeur hex (AA)	Rouge avec cette opacité
100 %	`FF`	`#FF0000FF`
95 %	`F2`	`#FF0000F2`
90 %	`E6`	`#FF0000E6`
85 %	`D9`	`#FF0000D9`
80 %	`CC`	`#FF0000CC`
75 %	`BF`	`#FF0000BF`
70 %	`B3`	`#FF0000B3`
65 %	`A6`	`#FF0000A6`
60 %	`99`	`#FF000099`
55 %	`8C`	`#FF00008C`
50 %	`80`	`#FF000080`
45 %	`73`	`#FF000073`
40 %	`66`	`#FF000066`
35 %	`59`	`#FF000059`
30 %	`4D`	`#FF00004D`
25 %	`40`	`#FF000040`
20 %	`33`	`#FF000033`
15 %	`26`	`#FF000026`
10 %	`1A`	`#FF00001A`
5 %	`0D`	`#FF00000D`
0 %	`00`	`#FF000000`

Liste des Couleurs CSS Nommées et de leur Code Hexadécimal

CSS définit 141 couleurs nommées. Vous pouvez écrire le nom (tomato) ou son code hexadécimal (#FF6347) : le résultat est identique. Quand chaque paire de chiffres se répète, vous pouvez aussi utiliser la forme courte à trois chiffres : #FFAA00 s’écrit #FA0. Les codes hexadécimaux ne sont pas sensibles à la casse.

Liste des Couleurs CSS Nommées et de leur Code Hexadécimal
Nom CSS	Hexadécimal	RGB
`aliceblue`	`#F0F8FF`	240, 248, 255
`antiquewhite`	`#FAEBD7`	250, 235, 215
`aqua`	`#00FFFF`	0, 255, 255
`aquamarine`	`#7FFFD4`	127, 255, 212
`azure`	`#F0FFFF`	240, 255, 255
`beige`	`#F5F5DC`	245, 245, 220
`bisque`	`#FFE4C4`	255, 228, 196
`black`	`#000000`	0, 0, 0
`blanchedalmond`	`#FFEBCD`	255, 235, 205
`blue`	`#0000FF`	0, 0, 255
`blueviolet`	`#8A2BE2`	138, 43, 226
`brown`	`#A52A2A`	165, 42, 42
`burlywood`	`#DEB887`	222, 184, 135
`cadetblue`	`#5F9EA0`	95, 158, 160
`chartreuse`	`#7FFF00`	127, 255, 0
`chocolate`	`#D2691E`	210, 105, 30
`coral`	`#FF7F50`	255, 127, 80
`cornflowerblue`	`#6495ED`	100, 149, 237
`cornsilk`	`#FFF8DC`	255, 248, 220
`crimson`	`#DC143C`	220, 20, 60
`cyan`	`#00FFFF`	0, 255, 255
`darkblue`	`#00008B`	0, 0, 139
`darkcyan`	`#008B8B`	0, 139, 139
`darkgoldenrod`	`#B8860B`	184, 134, 11
`darkgray`	`#A9A9A9`	169, 169, 169
`darkgreen`	`#006400`	0, 100, 0
`darkkhaki`	`#BDB76B`	189, 183, 107
`darkmagenta`	`#8B008B`	139, 0, 139
`darkolivegreen`	`#556B2F`	85, 107, 47
`darkorange`	`#FF8C00`	255, 140, 0
`darkorchid`	`#9932CC`	153, 50, 204
`darkred`	`#8B0000`	139, 0, 0
`darksalmon`	`#E9967A`	233, 150, 122
`darkseagreen`	`#8FBC8F`	143, 188, 143
`darkslateblue`	`#483D8B`	72, 61, 139
`darkslategray`	`#2F4F4F`	47, 79, 79
`darkturquoise`	`#00CED1`	0, 206, 209
`darkviolet`	`#9400D3`	148, 0, 211
`deeppink`	`#FF1493`	255, 20, 147
`deepskyblue`	`#00BFFF`	0, 191, 255
`dimgray`	`#696969`	105, 105, 105
`dodgerblue`	`#1E90FF`	30, 144, 255
`firebrick`	`#B22222`	178, 34, 34
`floralwhite`	`#FFFAF0`	255, 250, 240
`forestgreen`	`#228B22`	34, 139, 34
`fuchsia`	`#FF00FF`	255, 0, 255
`gainsboro`	`#DCDCDC`	220, 220, 220
`ghostwhite`	`#F8F8FF`	248, 248, 255
`gold`	`#FFD700`	255, 215, 0
`goldenrod`	`#DAA520`	218, 165, 32
`gray`	`#808080`	128, 128, 128
`green`	`#008000`	0, 128, 0
`greenyellow`	`#ADFF2F`	173, 255, 47
`honeydew`	`#F0FFF0`	240, 255, 240
`hotpink`	`#FF69B4`	255, 105, 180
`indianred`	`#CD5C5C`	205, 92, 92
`indigo`	`#4B0082`	75, 0, 130
`ivory`	`#FFFFF0`	255, 255, 240
`khaki`	`#F0E68C`	240, 230, 140
`lavender`	`#E6E6FA`	230, 230, 250
`lavenderblush`	`#FFF0F5`	255, 240, 245
`lawngreen`	`#7CFC00`	124, 252, 0
`lemonchiffon`	`#FFFACD`	255, 250, 205
`lightblue`	`#ADD8E6`	173, 216, 230
`lightcoral`	`#F08080`	240, 128, 128
`lightcyan`	`#E0FFFF`	224, 255, 255
`lightgoldenrodyellow`	`#FAFAD2`	250, 250, 210
`lightgray`	`#D3D3D3`	211, 211, 211
`lightgreen`	`#90EE90`	144, 238, 144
`lightpink`	`#FFB6C1`	255, 182, 193
`lightsalmon`	`#FFA07A`	255, 160, 122
`lightseagreen`	`#20B2AA`	32, 178, 170
`lightskyblue`	`#87CEFA`	135, 206, 250
`lightslategray`	`#778899`	119, 136, 153
`lightsteelblue`	`#B0C4DE`	176, 196, 222
`lightyellow`	`#FFFFE0`	255, 255, 224
`lime`	`#00FF00`	0, 255, 0
`limegreen`	`#32CD32`	50, 205, 50
`linen`	`#FAF0E6`	250, 240, 230
`magenta`	`#FF00FF`	255, 0, 255
`maroon`	`#800000`	128, 0, 0
`mediumaquamarine`	`#66CDAA`	102, 205, 170
`mediumblue`	`#0000CD`	0, 0, 205
`mediumorchid`	`#BA55D3`	186, 85, 211
`mediumpurple`	`#9370DB`	147, 112, 219
`mediumseagreen`	`#3CB371`	60, 179, 113
`mediumslateblue`	`#7B68EE`	123, 104, 238
`mediumspringgreen`	`#00FA9A`	0, 250, 154
`mediumturquoise`	`#48D1CC`	72, 209, 204
`mediumvioletred`	`#C71585`	199, 21, 133
`midnightblue`	`#191970`	25, 25, 112
`mintcream`	`#F5FFFA`	245, 255, 250
`mistyrose`	`#FFE4E1`	255, 228, 225
`moccasin`	`#FFE4B5`	255, 228, 181
`navajowhite`	`#FFDEAD`	255, 222, 173
`navy`	`#000080`	0, 0, 128
`oldlace`	`#FDF5E6`	253, 245, 230
`olive`	`#808000`	128, 128, 0
`olivedrab`	`#6B8E23`	107, 142, 35
`orange`	`#FFA500`	255, 165, 0
`orangered`	`#FF4500`	255, 69, 0
`orchid`	`#DA70D6`	218, 112, 214
`palegoldenrod`	`#EEE8AA`	238, 232, 170
`palegreen`	`#98FB98`	152, 251, 152
`paleturquoise`	`#AFEEEE`	175, 238, 238
`palevioletred`	`#DB7093`	219, 112, 147
`papayawhip`	`#FFEFD5`	255, 239, 213
`peachpuff`	`#FFDAB9`	255, 218, 185
`peru`	`#CD853F`	205, 133, 63
`pink`	`#FFC0CB`	255, 192, 203
`plum`	`#DDA0DD`	221, 160, 221
`powderblue`	`#B0E0E6`	176, 224, 230
`purple`	`#800080`	128, 0, 128
`rebeccapurple`	`#663399`	102, 51, 153
`red`	`#FF0000`	255, 0, 0
`rosybrown`	`#BC8F8F`	188, 143, 143
`royalblue`	`#4169E1`	65, 105, 225
`saddlebrown`	`#8B4513`	139, 69, 19
`salmon`	`#FA8072`	250, 128, 114
`sandybrown`	`#F4A460`	244, 164, 96
`seagreen`	`#2E8B57`	46, 139, 87
`seashell`	`#FFF5EE`	255, 245, 238
`sienna`	`#A0522D`	160, 82, 45
`silver`	`#C0C0C0`	192, 192, 192
`skyblue`	`#87CEEB`	135, 206, 235
`slateblue`	`#6A5ACD`	106, 90, 205
`slategray`	`#708090`	112, 128, 144
`snow`	`#FFFAFA`	255, 250, 250
`springgreen`	`#00FF7F`	0, 255, 127
`steelblue`	`#4682B4`	70, 130, 180
`tan`	`#D2B48C`	210, 180, 140
`teal`	`#008080`	0, 128, 128
`thistle`	`#D8BFD8`	216, 191, 216
`tomato`	`#FF6347`	255, 99, 71
`turquoise`	`#40E0D0`	64, 224, 208
`violet`	`#EE82EE`	238, 130, 238
`wheat`	`#F5DEB3`	245, 222, 179
`white`	`#FFFFFF`	255, 255, 255
`whitesmoke`	`#F5F5F5`	245, 245, 245
`yellow`	`#FFFF00`	255, 255, 0
`yellowgreen`	`#9ACD32`	154, 205, 50

Foire aux Questions

À quoi sert le code couleur hexadécimal ?

Le code couleur hexadécimal permet de représenter les couleurs en utilisant six caractères au format #RRGGBB, où chaque paire correspond à l’intensité du rouge, du vert et du bleu.

Comment ajouter de la transparence à une couleur hexadécimale ?

On utilise le format #RRGGBBAA, où les deux derniers caractères (AA) indiquent le niveau d’opacité : 00 est totalement transparent et FF totalement opaque.

Comment écrire une couleur transparente en hexadécimal ?

Ajoutez deux chiffres à la fin du code : #RRGGBBAA. Les deux derniers indiquent l’opacité : 00 est totalement transparent, 80 correspond à environ 50 % et FF est totalement opaque. Par exemple, #FF000080 est du rouge à 50 % d’opacité. Consultez le tableau d’opacité ci-dessus pour les autres valeurs.

Que signifient #FFFFFF et #000000 ?

#FFFFFF est le blanc : rouge, vert et bleu au maximum (FF = 255). #000000 est le noir : les trois canaux à zéro. Un gris a trois paires identiques, par exemple #808080.

Peut-on utiliser seulement trois chiffres dans un code hexadécimal ?

Oui, quand chaque canal répète son chiffre. La forme courte #RGB double chaque chiffre : #F80 équivaut à #FF8800 et #FFF équivaut à #FFFFFF.

Comment convertir une valeur décimale de couleur en hexadécimal ?

Divisez la valeur par 16 : le quotient est le premier chiffre et le reste est le second. Par exemple, 200 ÷ 16 = 12 reste 8, et comme 12 s’écrit C en hexadécimal, 200 donne C8. Répétez pour les trois canaux afin d’obtenir #RRGGBB.

Explorer Plus

Sélecteur de Couleurs Couleurs RGB Convertisseur Hexadécimal en RGB Convertisseur Hexadécimal en RGBA Convertisseur RGB en Hexadécimal Couleurs RGBA