Couleurs en HTML: codes, noms + tableau

☝ Les codes de couleurs en HTML sont des triplets hexadécimaux qui représentent les couleurs rouge, vert et bleu (#RRGGBB).

Couleurs en HTML: codes, noms + tableau

Les codes de couleur en HTML sont des combinaisons de trois couleurs au format hexadécimal qui représentent les couleurs rouge, verte et bleue (#RRGGBB). Ces codes sont largement utilisés dans la création de pages Web pour changer la couleur de l'arrière-plan, du texte et des tableaux, ainsi que dans des programmes de retouche d'image tels qu'Adobe Photoshop.

Dans cet article, nous parlerons des codes de couleur et des noms HTML, de leur formation et de leur fonctionnement.

Tableau de couleurs

Noms de couleurs en HTML

En plus des codes de couleur hexadécimaux, HTML prend également en charge plusieurs noms de couleurs prédéfinis qui peuvent être utilisés à la place des codes.

Certains des noms de couleurs courants sont : "red" (rouge) , "green" (vert) , "blue" (bleu) , "yellow" (jaune) , "white" (blanc) , "black" (noir) et "gray" (gris) .

Par exemple, au lieu d'utiliser le code #FF0000 pour la couleur rouge, vous pouvez utiliser le nom de couleur en anglais "red" en HTML et CSS. Ce format est plus facile à retenir que les codes hexadécimaux et peut être utile dans des situations où vous avez besoin d'une couleur spécifique.

Format des codes de couleur en HTML

Chaque code de couleur en HTML est composé du symbole "#" suivi de six lettres ou chiffres. Ces chiffres sont en notation hexadécimale, ce qui signifie que chaque lettre ou chiffre représente une valeur numérique de 0 à 15.

Par exemple, la lettre "A" en hexadécimal représente le chiffre 10 en décimal, tandis que la lettre "F" représente le chiffre 15. Ainsi, la combinaison de lettres et de chiffres dans un code de couleur hexadécimal peut représenter n'importe quelle valeur numérique entre 0 et 255 dans chacun des composants de couleur (rouge, vert et bleu).

Comprendre les Couleurs Hexadécimales

Les couleurs hexadécimales sont une manière de représenter les couleurs dans les systèmes numériques, en particulier sur le web. Ce système utilise une base 16, qui inclut les chiffres de 0 à 9 et les lettres de A à F, pour exprimer les valeurs de couleur dans trois composants : rouge, vert et bleu (RVB). Chaque couleur est représentée par un code de six chiffres précédé du symbole '#'. Par exemple, le noir est représenté par #000000 et le blanc par #FFFFFF.

La Structure des Couleurs Hexadécimales

Pour approfondir le concept des couleurs en hexadécimal, il est crucial de comprendre leur structure. Chaque paire de chiffres dans le code représente l'intensité des couleurs rouge, vert et bleu, dans cet ordre. Par conséquent, le code est divisé en trois parties : #RRGGBB. L'intensité de chaque couleur peut varier entre 00 (minimum) et FF (maximum), ce qui permet plus de 16 millions de combinaisons de couleurs possibles. Cette large gamme de couleurs rend la palette de couleurs hexadécimale extrêmement versatile pour la conception web et graphique.

Fonctionnement de la théorie des codes de couleurs HTML

Chaque code de couleur en HTML représente la combinaison de trois valeurs numériques qui représentent l'intensité des couleurs rouge, verte et bleue. Ces valeurs sont combinées pour créer la couleur souhaitée.

Par exemple, le code de couleur #FF0000 représente l'intensité maximale de la couleur rouge et l'absence totale des couleurs verte et bleue. En conséquence, la couleur affichée est le rouge pur.

De la même manière, le code de couleur #00FF00 représente l'intensité maximale de la couleur verte, et l'absence totale des couleurs rouge et bleue. En conséquence, la couleur affichée est le vert pur.

Tableau des couleurs HTML

🔗 Tons de rouge🔗 Tons de bleu🔗 Tons de vert🔗 Tons de rose🔗 Tons de violet🔗 Tons de gris
indianred#cd5c5crgb(205,92,92)hsl(0,54%,59%)
lightcoral#f08080rgb(240,128,128)hsl(0,79%,73%)
salmon#fa8072rgb(250,128,114)hsl(7,94%,72%)
darksalmon#e9967argb(233,150,122)hsl(16,72%,70%)
lightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
crimson#dc143crgb(220,20,60)hsl(348,84%,48%)
red#ff0000rgb(255,0,0)hsl(0,100%,50%)
firebrick#b22222rgb(178,34,34)hsl(0,68%,42%)
darkred#8b0000rgb(139,0,0)hsl(0,100%,28%)
cyan#00ffffrgb(0,255,255)hsl(180,100%,50%)
lightcyan#e0ffffrgb(224,255,255)hsl(180,100%,94%)
paleturquoise#afeeeergb(175,238,238)hsl(180,65%,81%)
aquamarine#7fffd4rgb(127,255,212)hsl(160,100%,75%)
turquoise#40e0d0rgb(64,224,208)hsl(174,73%,57%)
mediumturquoise#48d1ccrgb(72,209,204)hsl(178,60%,56%)
darkturquoise#00ced1rgb(0,206,209)hsl(181,100%,41%)
cadetblue#5f9ea0rgb(95,158,160)hsl(182,26%,50%)
steelblue#4682b4rgb(70,130,180)hsl(208,44%,50%)
lightsteelblue#b0c4dergb(176,196,222)hsl(214,42%,79%)
powderblue#b0e0e6rgb(176,224,230)hsl(187,52%,80%)
lightblue#add8e6rgb(173,216,230)hsl(195,54%,80%)
skyblue#87ceebrgb(135,206,235)hsl(198,72%,73%)
lightskyblue#87cefargb(135,206,250)hsl(203,92%,76%)
deepskyblue#00bfffrgb(0,191,255)hsl(196,100%,50%)
dodgerblue#1e90ffrgb(30,144,255)hsl(210,100%,56%)
cornflowerblue#6495edrgb(100,149,237)hsl(219,80%,67%)
mediumslateblue#7b68eergb(123,104,238)hsl(249,80%,68%)
royalblue#4169e1rgb(65,105,225)hsl(225,73%,57%)
blue#0000ffrgb(0,0,255)hsl(240,100%,50%)
mediumblue#0000cdrgb(0,0,205)hsl(240,100%,41%)
darkblue#00008brgb(0,0,139)hsl(240,100%,28%)
midnightblue#191970rgb(25,25,112)hsl(240,64%,27%)
greenyellow#adff2frgb(173,255,47)hsl(84,100%,60%)
chartreuse#7fff00rgb(127,255,0)hsl(91,100%,50%)
lawngreen#7cfc00rgb(124,252,0)hsl(91,100%,50%)
lime#00ff00rgb(0,255,0)hsl(120,100%,50%)
limegreen#32cd32rgb(50,205,50)hsl(120,61%,50%)
palegreen#98fb98rgb(152,251,152)hsl(120,93%,80%)
lightgreen#90ee90rgb(144,238,144)hsl(120,74%,75%)
mediumspringgreen#00fa9argb(0,250,154)hsl(157,100%,50%)
springgreen#00ff7frgb(0,255,127)hsl(150,100%,50%)
mediumseagreen#3cb371rgb(60,179,113)hsl(147,50%,47%)
seagreen#2e8b57rgb(46,139,87)hsl(147,51%,37%)
forestgreen#228b22rgb(34,139,34)hsl(120,61%,34%)
green#008000rgb(0,128,0)hsl(120,100%,26%)
darkgreen#006400rgb(0,100,0)hsl(120,100%,20%)
yellowgreen#9acd32rgb(154,205,50)hsl(80,61%,50%)
olivedrab#6b8e23rgb(107,142,35)hsl(80,61%,35%)
olive#808000rgb(128,128,0)hsl(60,100%,26%)
darkolivegreen#556b2frgb(85,107,47)hsl(82,39%,31%)
mediumaquamarine#66cdaargb(102,205,170)hsl(160,51%,61%)
darkseagreen#8fbc8frgb(143,188,143)hsl(120,26%,65%)
lightseagreen#20b2aargb(32,178,170)hsl(177,70%,42%)
darkcyan#008b8brgb(0,139,139)hsl(180,100%,28%)
teal#008080rgb(0,128,128)hsl(180,100%,26%)
pink#ffc0cbrgb(255,192,203)hsl(350,100%,88%)
lightpink#ffb6c1rgb(255,182,193)hsl(351,100%,86%)
hotpink#ff69b4rgb(255,105,180)hsl(330,100%,71%)
deeppink#ff1493rgb(255,20,147)hsl(328,100%,54%)
mediumvioletred#c71585rgb(199,21,133)hsl(323,81%,44%)
palevioletred#db7093rgb(219,112,147)hsl(341,60%,65%)
cornsilk#fff8dcrgb(255,248,220)hsl(48,100%,94%)
blanchedalmond#ffebcdrgb(255,235,205)hsl(36,100%,91%)
bisque#ffe4c4rgb(255,228,196)hsl(33,100%,89%)
wheat#f5deb3rgb(245,222,179)hsl(40,77%,84%)
burlywood#deb887rgb(222,184,135)hsl(34,57%,70%)
tan#d2b48crgb(210,180,140)hsl(35,44%,69%)
rosybrown#bc8f8frgb(188,143,143)hsl(0,26%,65%)
sandybrown#f4a460rgb(244,164,96)hsl(28,88%,67%)
goldenrod#daa520rgb(218,165,32)hsl(43,75%,50%)
darkgoldenrod#b8860brgb(184,134,11)hsl(43,89%,39%)
peru#cd853frgb(205,133,63)hsl(30,59%,53%)
chocolate#d2691ergb(210,105,30)hsl(25,75%,48%)
saddlebrown#8b4513rgb(139,69,19)hsl(25,76%,31%)
sienna#a0522drgb(160,82,45)hsl(20,57%,41%)
brown#a52a2argb(165,42,42)hsl(0,60%,41%)
maroon#800000rgb(128,0,0)hsl(0,100%,26%)
lightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
coral#ff7f50rgb(255,127,80)hsl(17,100%,66%)
tomato#ff6347rgb(255,99,71)hsl(10,100%,64%)
orangered#ff4500rgb(255,69,0)hsl(17,100%,50%)
darkorange#ff8c00rgb(255,140,0)hsl(33,100%,50%)
orange#ffa500rgb(255,165,0)hsl(39,100%,50%)
gold#ffd700rgb(255,215,0)hsl(51,100%,50%)
yellow#ffff00rgb(255,255,0)hsl(60,100%,50%)
lightyellow#ffffe0rgb(255,255,224)hsl(60,100%,94%)
lightgoldenrodyellow#fafad2rgb(250,250,210)hsl(60,81%,91%)
lemonchiffon#fffacdrgb(255,250,205)hsl(54,100%,91%)
papayawhip#ffefd5rgb(255,239,213)hsl(38,100%,92%)
moccasin#ffe4b5rgb(255,228,181)hsl(39,100%,86%)
peachpuff#ffdab9rgb(255,218,185)hsl(29,100%,87%)
palegoldenrod#eee8aargb(238,232,170)hsl(55,67%,80%)
khaki#f0e68crgb(240,230,140)hsl(54,77%,75%)
darkkhaki#bdb76brgb(189,183,107)hsl(56,39%,59%)
lavender#e6e6fargb(230,230,250)hsl(240,67%,95%)
thistle#d8bfd8rgb(216,191,216)hsl(300,25%,80%)
plum#dda0ddrgb(221,160,221)hsl(300,48%,75%)
violet#ee82eergb(238,130,238)hsl(300,77%,73%)
orchid#da70d6rgb(218,112,214)hsl(303,59%,65%)
fuchsia#ff00ffrgb(255,0,255)hsl(300,100%,50%)
magenta#ff00ffrgb(255,0,255)hsl(300,100%,50%)
mediumorchid#ba55d3rgb(186,85,211)hsl(289,59%,59%)
mediumpurple#9370dbrgb(147,112,219)hsl(260,60%,65%)
blueviolet#8a2be2rgb(138,43,226)hsl(272,76%,53%)
darkviolet#9400d3rgb(148,0,211)hsl(283,100%,42%)
darkorchid#9932ccrgb(153,50,204)hsl(281,61%,50%)
darkmagenta#8b008brgb(139,0,139)hsl(300,100%,28%)
purple#800080rgb(128,0,128)hsl(300,100%,26%)
indigo#4b0082rgb(75,0,130)hsl(275,100%,26%)
slateblue#6a5acdrgb(106,90,205)hsl(249,54%,58%)
darkslateblue#483d8brgb(72,61,139)hsl(249,39%,40%)
gainsboro#dcdcdcrgb(220,220,220)hsl(0,0%,87%)
lightgrey#d3d3d3rgb(211,211,211)hsl(0,0%,83%)
silver#c0c0c0rgb(192,192,192)hsl(0,0%,76%)
darkgray#a9a9a9rgb(169,169,169)hsl(0,0%,67%)
gray#808080rgb(128,128,128)hsl(0,0%,51%)
dimgray#696969rgb(105,105,105)hsl(0,0%,42%)
lightslategray#778899rgb(119,136,153)hsl(210,15%,54%)
slategray#708090rgb(112,128,144)hsl(210,13%,51%)
darkslategray#2f4f4frgb(47,79,79)hsl(180,26%,25%)
black#000000rgb(0,0,0)hsl(0,0%,0%)
white#ffffffrgb(255,255,255)hsl(0,0%,100%)
snow#fffafargb(255,250,250)hsl(0,100%,100%)
honeydew#f0fff0rgb(240,255,240)hsl(120,100%,98%)
mintcream#f5fffargb(245,255,250)hsl(150,100%,99%)
azure#f0ffffrgb(240,255,255)hsl(180,100%,98%)
aliceblue#f0f8ffrgb(240,248,255)hsl(208,100%,98%)
ghostwhite#f8f8ffrgb(248,248,255)hsl(240,100%,99%)
whitesmoke#f5f5f5rgb(245,245,245)hsl(0,0%,97%)
seashell#fff5eergb(255,245,238)hsl(25,100%,97%)
beige#f5f5dcrgb(245,245,220)hsl(60,56%,92%)
oldlace#fdf5e6rgb(253,245,230)hsl(40,86%,95%)
floralwhite#fffaf0rgb(255,250,240)hsl(40,100%,98%)
ivory#fffff0rgb(255,255,240)hsl(60,100%,98%)
antiquewhite#faebd7rgb(250,235,215)hsl(35,78%,92%)
linen#faf0e6rgb(250,240,230)hsl(30,67%,95%)
lavenderblush#fff0f5rgb(255,240,245)hsl(340,100%,98%)
mistyrose#ffe4e1rgb(255,228,225)hsl(7,100%,95%)