Couleurs en HTML: codes, noms + tableau

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).

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
explorarindianred#cd5c5crgb(205,92,92)hsl(0,54%,59%)
explorarlightcoral#f08080rgb(240,128,128)hsl(0,79%,73%)
explorarsalmon#fa8072rgb(250,128,114)hsl(7,94%,72%)
explorardarksalmon#e9967argb(233,150,122)hsl(16,72%,70%)
explorarlightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
explorarcrimson#dc143crgb(220,20,60)hsl(348,84%,48%)
explorarred#ff0000rgb(255,0,0)hsl(0,100%,50%)
explorarfirebrick#b22222rgb(178,34,34)hsl(0,68%,42%)
explorardarkred#8b0000rgb(139,0,0)hsl(0,100%,28%)
explorarcyan#00ffffrgb(0,255,255)hsl(180,100%,50%)
explorarlightcyan#e0ffffrgb(224,255,255)hsl(180,100%,94%)
explorarpaleturquoise#afeeeergb(175,238,238)hsl(180,65%,81%)
exploraraquamarine#7fffd4rgb(127,255,212)hsl(160,100%,75%)
explorarturquoise#40e0d0rgb(64,224,208)hsl(174,73%,57%)
explorarmediumturquoise#48d1ccrgb(72,209,204)hsl(178,60%,56%)
explorardarkturquoise#00ced1rgb(0,206,209)hsl(181,100%,41%)
explorarcadetblue#5f9ea0rgb(95,158,160)hsl(182,26%,50%)
explorarsteelblue#4682b4rgb(70,130,180)hsl(208,44%,50%)
explorarlightsteelblue#b0c4dergb(176,196,222)hsl(214,42%,79%)
explorarpowderblue#b0e0e6rgb(176,224,230)hsl(187,52%,80%)
explorarlightblue#add8e6rgb(173,216,230)hsl(195,54%,80%)
explorarskyblue#87ceebrgb(135,206,235)hsl(198,72%,73%)
explorarlightskyblue#87cefargb(135,206,250)hsl(203,92%,76%)
explorardeepskyblue#00bfffrgb(0,191,255)hsl(196,100%,50%)
explorardodgerblue#1e90ffrgb(30,144,255)hsl(210,100%,56%)
explorarcornflowerblue#6495edrgb(100,149,237)hsl(219,80%,67%)
explorarmediumslateblue#7b68eergb(123,104,238)hsl(249,80%,68%)
explorarroyalblue#4169e1rgb(65,105,225)hsl(225,73%,57%)
explorarblue#0000ffrgb(0,0,255)hsl(240,100%,50%)
explorarmediumblue#0000cdrgb(0,0,205)hsl(240,100%,41%)
explorardarkblue#00008brgb(0,0,139)hsl(240,100%,28%)
explorarmidnightblue#191970rgb(25,25,112)hsl(240,64%,27%)
explorargreenyellow#adff2frgb(173,255,47)hsl(84,100%,60%)
explorarchartreuse#7fff00rgb(127,255,0)hsl(91,100%,50%)
explorarlawngreen#7cfc00rgb(124,252,0)hsl(91,100%,50%)
explorarlime#00ff00rgb(0,255,0)hsl(120,100%,50%)
explorarlimegreen#32cd32rgb(50,205,50)hsl(120,61%,50%)
explorarpalegreen#98fb98rgb(152,251,152)hsl(120,93%,80%)
explorarlightgreen#90ee90rgb(144,238,144)hsl(120,74%,75%)
explorarmediumspringgreen#00fa9argb(0,250,154)hsl(157,100%,50%)
explorarspringgreen#00ff7frgb(0,255,127)hsl(150,100%,50%)
explorarmediumseagreen#3cb371rgb(60,179,113)hsl(147,50%,47%)
explorarseagreen#2e8b57rgb(46,139,87)hsl(147,51%,37%)
explorarforestgreen#228b22rgb(34,139,34)hsl(120,61%,34%)
explorargreen#008000rgb(0,128,0)hsl(120,100%,26%)
explorardarkgreen#006400rgb(0,100,0)hsl(120,100%,20%)
exploraryellowgreen#9acd32rgb(154,205,50)hsl(80,61%,50%)
explorarolivedrab#6b8e23rgb(107,142,35)hsl(80,61%,35%)
explorarolive#808000rgb(128,128,0)hsl(60,100%,26%)
explorardarkolivegreen#556b2frgb(85,107,47)hsl(82,39%,31%)
explorarmediumaquamarine#66cdaargb(102,205,170)hsl(160,51%,61%)
explorardarkseagreen#8fbc8frgb(143,188,143)hsl(120,26%,65%)
explorarlightseagreen#20b2aargb(32,178,170)hsl(177,70%,42%)
explorardarkcyan#008b8brgb(0,139,139)hsl(180,100%,28%)
explorarteal#008080rgb(0,128,128)hsl(180,100%,26%)
explorarpink#ffc0cbrgb(255,192,203)hsl(350,100%,88%)
explorarlightpink#ffb6c1rgb(255,182,193)hsl(351,100%,86%)
explorarhotpink#ff69b4rgb(255,105,180)hsl(330,100%,71%)
explorardeeppink#ff1493rgb(255,20,147)hsl(328,100%,54%)
explorarmediumvioletred#c71585rgb(199,21,133)hsl(323,81%,44%)
explorarpalevioletred#db7093rgb(219,112,147)hsl(341,60%,65%)
explorarcornsilk#fff8dcrgb(255,248,220)hsl(48,100%,94%)
explorarblanchedalmond#ffebcdrgb(255,235,205)hsl(36,100%,91%)
explorarbisque#ffe4c4rgb(255,228,196)hsl(33,100%,89%)
explorarwheat#f5deb3rgb(245,222,179)hsl(40,77%,84%)
explorarburlywood#deb887rgb(222,184,135)hsl(34,57%,70%)
explorartan#d2b48crgb(210,180,140)hsl(35,44%,69%)
explorarrosybrown#bc8f8frgb(188,143,143)hsl(0,26%,65%)
explorarsandybrown#f4a460rgb(244,164,96)hsl(28,88%,67%)
explorargoldenrod#daa520rgb(218,165,32)hsl(43,75%,50%)
explorardarkgoldenrod#b8860brgb(184,134,11)hsl(43,89%,39%)
explorarperu#cd853frgb(205,133,63)hsl(30,59%,53%)
explorarchocolate#d2691ergb(210,105,30)hsl(25,75%,48%)
explorarsaddlebrown#8b4513rgb(139,69,19)hsl(25,76%,31%)
explorarsienna#a0522drgb(160,82,45)hsl(20,57%,41%)
explorarbrown#a52a2argb(165,42,42)hsl(0,60%,41%)
explorarmaroon#800000rgb(128,0,0)hsl(0,100%,26%)
explorarlightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
explorarcoral#ff7f50rgb(255,127,80)hsl(17,100%,66%)
explorartomato#ff6347rgb(255,99,71)hsl(10,100%,64%)
explorarorangered#ff4500rgb(255,69,0)hsl(17,100%,50%)
explorardarkorange#ff8c00rgb(255,140,0)hsl(33,100%,50%)
explorarorange#ffa500rgb(255,165,0)hsl(39,100%,50%)
explorargold#ffd700rgb(255,215,0)hsl(51,100%,50%)
exploraryellow#ffff00rgb(255,255,0)hsl(60,100%,50%)
explorarlightyellow#ffffe0rgb(255,255,224)hsl(60,100%,94%)
explorarlightgoldenrodyellow#fafad2rgb(250,250,210)hsl(60,81%,91%)
explorarlemonchiffon#fffacdrgb(255,250,205)hsl(54,100%,91%)
explorarpapayawhip#ffefd5rgb(255,239,213)hsl(38,100%,92%)
explorarmoccasin#ffe4b5rgb(255,228,181)hsl(39,100%,86%)
explorarpeachpuff#ffdab9rgb(255,218,185)hsl(29,100%,87%)
explorarpalegoldenrod#eee8aargb(238,232,170)hsl(55,67%,80%)
explorarkhaki#f0e68crgb(240,230,140)hsl(54,77%,75%)
explorardarkkhaki#bdb76brgb(189,183,107)hsl(56,39%,59%)
explorarlavender#e6e6fargb(230,230,250)hsl(240,67%,95%)
explorarthistle#d8bfd8rgb(216,191,216)hsl(300,25%,80%)
explorarplum#dda0ddrgb(221,160,221)hsl(300,48%,75%)
explorarviolet#ee82eergb(238,130,238)hsl(300,77%,73%)
explorarorchid#da70d6rgb(218,112,214)hsl(303,59%,65%)
explorarfuchsia#ff00ffrgb(255,0,255)hsl(300,100%,50%)
explorarmagenta#ff00ffrgb(255,0,255)hsl(300,100%,50%)
explorarmediumorchid#ba55d3rgb(186,85,211)hsl(289,59%,59%)
explorarmediumpurple#9370dbrgb(147,112,219)hsl(260,60%,65%)
explorarblueviolet#8a2be2rgb(138,43,226)hsl(272,76%,53%)
explorardarkviolet#9400d3rgb(148,0,211)hsl(283,100%,42%)
explorardarkorchid#9932ccrgb(153,50,204)hsl(281,61%,50%)
explorardarkmagenta#8b008brgb(139,0,139)hsl(300,100%,28%)
explorarpurple#800080rgb(128,0,128)hsl(300,100%,26%)
explorarindigo#4b0082rgb(75,0,130)hsl(275,100%,26%)
explorarslateblue#6a5acdrgb(106,90,205)hsl(249,54%,58%)
explorardarkslateblue#483d8brgb(72,61,139)hsl(249,39%,40%)
explorargainsboro#dcdcdcrgb(220,220,220)hsl(0,0%,87%)
explorarlightgrey#d3d3d3rgb(211,211,211)hsl(0,0%,83%)
explorarsilver#c0c0c0rgb(192,192,192)hsl(0,0%,76%)
explorardarkgray#a9a9a9rgb(169,169,169)hsl(0,0%,67%)
explorargray#808080rgb(128,128,128)hsl(0,0%,51%)
explorardimgray#696969rgb(105,105,105)hsl(0,0%,42%)
explorarlightslategray#778899rgb(119,136,153)hsl(210,15%,54%)
explorarslategray#708090rgb(112,128,144)hsl(210,13%,51%)
explorardarkslategray#2f4f4frgb(47,79,79)hsl(180,26%,25%)
explorarblack#000000rgb(0,0,0)hsl(0,0%,0%)
explorarwhite#ffffffrgb(255,255,255)hsl(0,0%,100%)
explorarsnow#fffafargb(255,250,250)hsl(0,100%,100%)
explorarhoneydew#f0fff0rgb(240,255,240)hsl(120,100%,98%)
explorarmintcream#f5fffargb(245,255,250)hsl(150,100%,99%)
explorarazure#f0ffffrgb(240,255,255)hsl(180,100%,98%)
exploraraliceblue#f0f8ffrgb(240,248,255)hsl(208,100%,98%)
explorarghostwhite#f8f8ffrgb(248,248,255)hsl(240,100%,99%)
explorarwhitesmoke#f5f5f5rgb(245,245,245)hsl(0,0%,97%)
explorarseashell#fff5eergb(255,245,238)hsl(25,100%,97%)
explorarbeige#f5f5dcrgb(245,245,220)hsl(60,56%,92%)
exploraroldlace#fdf5e6rgb(253,245,230)hsl(40,86%,95%)
explorarfloralwhite#fffaf0rgb(255,250,240)hsl(40,100%,98%)
explorarivory#fffff0rgb(255,255,240)hsl(60,100%,98%)
explorarantiquewhite#faebd7rgb(250,235,215)hsl(35,78%,92%)
explorarlinen#faf0e6rgb(250,240,230)hsl(30,67%,95%)
explorarlavenderblush#fff0f5rgb(255,240,245)hsl(340,100%,98%)
explorarmistyrose#ffe4e1rgb(255,228,225)hsl(7,100%,95%)