Les formats de codes couleurs HTML.

En HTML ou en CSS, il existe plusieurs manières de spécifier une couleur :

En utilisant son nom parmi les 140 codes couleur HTML nommées :: rgb(65,105,225)
En utilisant le format de couleur Hexadécimal :: #4169E1
En utilisant, le format de couleur RGB soit Red Green Blue (Rouge Vert Bleu) :: rgb(65,105,225)
En utilisant, le format de couleur HSL soit Hue Saturation Lightness (Teinte Saturation Luminosité):: hsl(225,73%,57%)

Les codes HSL() et RGB() ont été définis en Css2, Css3 et sont acceptés sur les navigateurs depuis quelques années maintenant.

Ajouter une transparence à la couleur.

Il est maintenant aussi possible depuis Css3 de spécifier une couleur incluant la transparence avec les formats RGBa, HSLa et bientôt #RRGGBBaa.

Un chapitre est consacré à la compatibilité des formats de codes couleurs Web avec les navigateurs Web.

Nom royalblue Hexa #4169E1 RGB 65,105,225 HSL 225,73%,57%

Ajouter transparence

Liste des couleurs Web nommées

Couleur Web "lightsalmon (saumon clair) / #FFA07A" — **Nom** `lightsalmon (saumon clair)` **Hexa.** `#FFA07A` **RGB** `rgb(255,160,122)` **HSL** `hsl(17,100%,74%)`

Couleur Web "salmon (saumon) / #FA8072" — **Nom** `salmon (saumon)` **Hexa.** `#FA8072` **RGB** `rgb(250,128,114)` **HSL** `hsl(6,93%,71%)`

Couleur Web "darksalmon (saumon foncé) / #E9967A" — **Nom** `darksalmon (saumon foncé)` **Hexa.** `#E9967A` **RGB** `rgb(233,150,122)` **HSL** `hsl(15,72%,70%)`

Couleur Web "lightcoral (corail clair) / #F08080" — **Nom** `lightcoral (corail clair)` **Hexa.** `#F08080` **RGB** `rgb(240,128,128)` **HSL** `hsl(0,79%,72%)`

Couleur Web "indianred (rouge indien) / #CD5C5C" — **Nom** `indianred (rouge indien)` **Hexa.** `#CD5C5C` **RGB** `rgb(205,92,92)` **HSL** `hsl(0,53%,58%)`

Couleur Web "crimson (cramoisi) / #DC143C" — **Nom** `crimson (cramoisi)` **Hexa.** `#DC143C` **RGB** `rgb(220,20,60)` **HSL** `hsl(348,83%,47%)`

Couleur Web "firebrick (brique de feu) / #B22222" — **Nom** `firebrick (brique de feu)` **Hexa.** `#B22222` **RGB** `rgb(178,34,34)` **HSL** `hsl(0,68%,42%)`

Couleur Web "darkred (rouge foncé) / #8B0000" — **Nom** `darkred (rouge foncé)` **Hexa.** `#8B0000` **RGB** `rgb(139,0,0)` **HSL** `hsl(0,100%,27%)`

Couleur Web "red (rouge) / #FF0000" — **Nom** `red (rouge)` **Hexa.** `#FF0000` **RGB** `rgb(255,0,0)` **HSL** `hsl(0,100%,50%)`

Couleur Web "pink (rose) / #FFC0CB" — **Nom** `pink (rose)` **Hexa.** `#FFC0CB` **RGB** `rgb(255,192,203)` **HSL** `hsl(350,100%,88%)`

Couleur Web "lightpink (rose clair) / #FFB6C1" — **Nom** `lightpink (rose clair)` **Hexa.** `#FFB6C1` **RGB** `rgb(255,182,193)` **HSL** `hsl(351,100%,86%)`

Couleur Web "hotpink (rose vif) / #FF69B4" — **Nom** `hotpink (rose vif)` **Hexa.** `#FF69B4` **RGB** `rgb(255,105,180)` **HSL** `hsl(330,100%,71%)`

Couleur Web "deeppink (rose profond) / #FF1493" — **Nom** `deeppink (rose profond)` **Hexa.** `#FF1493` **RGB** `rgb(255,20,147)` **HSL** `hsl(328,100%,54%)`

Couleur Web "palevioletred (violet pâle rouge) / #DB7093" — **Nom** `palevioletred (violet pâle rouge)` **Hexa.** `#DB7093` **RGB** `rgb(219,112,147)` **HSL** `hsl(340,60%,65%)`

Couleur Web "mediumvioletred (violet moyen rouge) / #C71585" — **Nom** `mediumvioletred (violet moyen rouge)` **Hexa.** `#C71585` **RGB** `rgb(199,21,133)` **HSL** `hsl(322,81%,43%)`

Couleur Web "orangered (rouge orange) / #FF4500" — **Nom** `orangered (rouge orange)` **Hexa.** `#FF4500` **RGB** `rgb(255,69,0)` **HSL** `hsl(16,100%,50%)`

Couleur Web "tomato (tomate) / #FF6347" — **Nom** `tomato (tomate)` **Hexa.** `#FF6347` **RGB** `rgb(255,99,71)` **HSL** `hsl(9,100%,64%)`

Couleur Web "coral (corail) / #FF7F50" — **Nom** `coral (corail)` **Hexa.** `#FF7F50` **RGB** `rgb(255,127,80)` **HSL** `hsl(16,100%,66%)`

Couleur Web "darkorange (orange foncé) / #FF8C00" — **Nom** `darkorange (orange foncé)` **Hexa.** `#FF8C00` **RGB** `rgb(255,140,0)` **HSL** `hsl(33,100%,50%)`

Couleur Web "orange (orange) / #FFA500" — **Nom** `orange (orange)` **Hexa.** `#FFA500` **RGB** `rgb(255,165,0)` **HSL** `hsl(39,100%,50%)`

Couleur Web "lightyellow (jaune clair) / #FFFFE0" — **Nom** `lightyellow (jaune clair)` **Hexa.** `#FFFFE0` **RGB** `rgb(255,255,224)` **HSL** `hsl(60,100%,94%)`

Couleur Web "yellow (jaune) / #FFFF00" — **Nom** `yellow (jaune)` **Hexa.** `#FFFF00` **RGB** `rgb(255,255,0)` **HSL** `hsl(60,100%,50%)`

Couleur Web "lemonchiffon / #FFFACD" — **Nom** `lemonchiffon` **Hexa.** `#FFFACD` **RGB** `rgb(255,250,205)` **HSL** `hsl(54,100%,90%)`

Couleur Web "lightgoldenrodyellow / #FAFAD2" — **Nom** `lightgoldenrodyellow` **Hexa.** `#FAFAD2` **RGB** `rgb(250,250,210)` **HSL** `hsl(60,80%,90%)`

Couleur Web "papayawhip (fouet de papaye) / #FFEFD5" — **Nom** `papayawhip (fouet de papaye)` **Hexa.** `#FFEFD5` **RGB** `rgb(255,239,213)` **HSL** `hsl(37,100%,92%)`

Couleur Web "moccasin / #FFE4B5" — **Nom** `moccasin` **Hexa.** `#FFE4B5` **RGB** `rgb(255,228,181)` **HSL** `hsl(38,100%,85%)`

Couleur Web "peachpuff / #FFDAB9" — **Nom** `peachpuff` **Hexa.** `#FFDAB9` **RGB** `rgb(255,218,185)` **HSL** `hsl(28,100%,86%)`

Couleur Web "palegoldenrod / #EEE8AA" — **Nom** `palegoldenrod` **Hexa.** `#EEE8AA` **RGB** `rgb(238,232,170)` **HSL** `hsl(55,67%,80%)`

Couleur Web "khaki (kaki) / #F0E68C" — **Nom** `khaki (kaki)` **Hexa.** `#F0E68C` **RGB** `rgb(240,230,140)` **HSL** `hsl(54,77%,75%)`

Couleur Web "darkkhaki (kaki foncé) / #BDB76B" — **Nom** `darkkhaki (kaki foncé)` **Hexa.** `#BDB76B` **RGB** `rgb(189,183,107)` **HSL** `hsl(56,38%,58%)`

Couleur Web "gold (or) / #FFD700" — **Nom** `gold (or)` **Hexa.** `#FFD700` **RGB** `rgb(255,215,0)` **HSL** `hsl(51,100%,50%)`

Couleur Web "lavender (lavande) / #E6E6FA" — **Nom** `lavender (lavande)` **Hexa.** `#E6E6FA` **RGB** `rgb(230,230,250)` **HSL** `hsl(240,67%,94%)`

Couleur Web "thistle (rouge chardon) / #D8BFD8" — **Nom** `thistle (rouge chardon)` **Hexa.** `#D8BFD8` **RGB** `rgb(216,191,216)` **HSL** `hsl(300,24%,80%)`

Couleur Web "plum (rouge prune) / #DDA0DD" — **Nom** `plum (rouge prune)` **Hexa.** `#DDA0DD` **RGB** `rgb(221,160,221)` **HSL** `hsl(300,47%,75%)`

Couleur Web "violet (violet) / #EE82EE" — **Nom** `violet (violet)` **Hexa.** `#EE82EE` **RGB** `rgb(238,130,238)` **HSL** `hsl(300,76%,72%)`

Couleur Web "orchid (rouge orchidée) / #DA70D6" — **Nom** `orchid (rouge orchidée)` **Hexa.** `#DA70D6` **RGB** `rgb(218,112,214)` **HSL** `hsl(302,59%,65%)`

Couleur Web "fuchsia (rouge fuchsia) / #FF00FF" — **Nom** `fuchsia (rouge fuchsia)` **Hexa.** `#FF00FF` **RGB** `rgb(255,0,255)` **HSL** `hsl(300,100%,50%)`

Couleur Web "mediumorchid (rouge orchidée moyen) / #BA55D3" — **Nom** `mediumorchid (rouge orchidée moyen)` **Hexa.** `#BA55D3` **RGB** `rgb(186,85,211)` **HSL** `hsl(288,59%,58%)`

Couleur Web "mediumpurple (rouge pourpre moyen) / #9370DB" — **Nom** `mediumpurple (rouge pourpre moyen)` **Hexa.** `#9370DB` **RGB** `rgb(147,112,219)` **HSL** `hsl(260,60%,65%)`

Couleur Web "blueviolet (bleu violet) / #8A2BE2" — **Nom** `blueviolet (bleu violet)` **Hexa.** `#8A2BE2` **RGB** `rgb(138,43,226)` **HSL** `hsl(271,76%,53%)`

Couleur Web "darkviolet (violet foncé) / #9400D3" — **Nom** `darkviolet (violet foncé)` **Hexa.** `#9400D3` **RGB** `rgb(148,0,211)` **HSL** `hsl(282,100%,41%)`

Couleur Web "darkorchid (rouge orchidée foncé) / #9932CC" — **Nom** `darkorchid (rouge orchidée foncé)` **Hexa.** `#9932CC` **RGB** `rgb(153,50,204)` **HSL** `hsl(280,61%,50%)`

Couleur Web "darkmagenta (rouge magenta foncé) / #8B008B" — **Nom** `darkmagenta (rouge magenta foncé)` **Hexa.** `#8B008B` **RGB** `rgb(139,0,139)` **HSL** `hsl(300,100%,27%)`

Couleur Web "purple (rouge pourpre) / #800080" — **Nom** `purple (rouge pourpre)` **Hexa.** `#800080` **RGB** `rgb(128,0,128)` **HSL** `hsl(300,100%,25%)`

Couleur Web "indigo (rouge indigo) / #4B0082" — **Nom** `indigo (rouge indigo)` **Hexa.** `#4B0082` **RGB** `rgb(75,0,130)` **HSL** `hsl(275,100%,25%)`

Couleur Web "darkslateblue (bleu ardoise foncé) / #483D8B" — **Nom** `darkslateblue (bleu ardoise foncé)` **Hexa.** `#483D8B` **RGB** `rgb(72,61,139)` **HSL** `hsl(248,39%,39%)`

Couleur Web "slateblue (bleu ardoise) / #6A5ACD" — **Nom** `slateblue (bleu ardoise)` **Hexa.** `#6A5ACD` **RGB** `rgb(106,90,205)` **HSL** `hsl(248,53%,58%)`

Couleur Web "mediumslateblue / #7B68EE" — **Nom** `mediumslateblue` **Hexa.** `#7B68EE` **RGB** `rgb(123,104,238)` **HSL** `hsl(249,80%,67%)`

Couleur Web "darkolivegreen (vert olive foncé) / #556B2F" — **Nom** `darkolivegreen (vert olive foncé)` **Hexa.** `#556B2F` **RGB** `rgb(85,107,47)` **HSL** `hsl(82,39%,30%)`

Couleur Web "olive (olive) / #808000" — **Nom** `olive (olive)` **Hexa.** `#808000` **RGB** `rgb(128,128,0)` **HSL** `hsl(60,100%,25%)`

Couleur Web "olivedrab (olivatre) / #6B8E23" — **Nom** `olivedrab (olivatre)` **Hexa.** `#6B8E23` **RGB** `rgb(107,142,35)` **HSL** `hsl(80,60%,35%)`

Couleur Web "yellowgreen (jaune vert) / #9ACD32" — **Nom** `yellowgreen (jaune vert)` **Hexa.** `#9ACD32` **RGB** `rgb(154,205,50)` **HSL** `hsl(80,61%,50%)`

Couleur Web "limegreen (vert citron) / #32CD32" — **Nom** `limegreen (vert citron)` **Hexa.** `#32CD32` **RGB** `rgb(50,205,50)` **HSL** `hsl(120,61%,50%)`

Couleur Web "lime (citron vert) / #00FF00" — **Nom** `lime (citron vert)` **Hexa.** `#00FF00` **RGB** `rgb(0,255,0)` **HSL** `hsl(120,100%,50%)`

Couleur Web "lawngreen (vert pelouse ) / #7CFC00" — **Nom** `lawngreen (vert pelouse )` **Hexa.** `#7CFC00` **RGB** `rgb(124,252,0)` **HSL** `hsl(90,100%,49%)`

Couleur Web "chartreuse (vert chartreuse) / #7FFF00" — **Nom** `chartreuse (vert chartreuse)` **Hexa.** `#7FFF00` **RGB** `rgb(127,255,0)` **HSL** `hsl(90,100%,50%)`

Couleur Web "greenyellow (vert jaune) / #ADFF2F" — **Nom** `greenyellow (vert jaune)` **Hexa.** `#ADFF2F` **RGB** `rgb(173,255,47)` **HSL** `hsl(84,100%,59%)`

Couleur Web "springgreen (vert printanier) / #00FF7F" — **Nom** `springgreen (vert printanier)` **Hexa.** `#00FF7F` **RGB** `rgb(0,255,127)` **HSL** `hsl(150,100%,50%)`

Couleur Web "mediumspringgreen (vert printanier moyen) / #00FA9A" — **Nom** `mediumspringgreen (vert printanier moyen)` **Hexa.** `#00FA9A` **RGB** `rgb(0,250,154)` **HSL** `hsl(157,100%,49%)`

Couleur Web "lightgreen (vert clair) / #90EE90" — **Nom** `lightgreen (vert clair)` **Hexa.** `#90EE90` **RGB** `rgb(144,238,144)` **HSL** `hsl(120,73%,75%)`

Couleur Web "palegreen (vert pâle) / #98FB98" — **Nom** `palegreen (vert pâle)` **Hexa.** `#98FB98` **RGB** `rgb(152,251,152)` **HSL** `hsl(120,93%,79%)`

Couleur Web "darkseagreen (vert mer foncé) / #8FBC8F" — **Nom** `darkseagreen (vert mer foncé)` **Hexa.** `#8FBC8F` **RGB** `rgb(143,188,143)` **HSL** `hsl(120,25%,65%)`

Couleur Web "mediumaquamarine (aquamarine moyen) / #66CDAA" — **Nom** `mediumaquamarine (aquamarine moyen)` **Hexa.** `#66CDAA` **RGB** `rgb(102,205,170)` **HSL** `hsl(160,51%,60%)`

Couleur Web "mediumseagreen / #3CB371" — **Nom** `mediumseagreen` **Hexa.** `#3CB371` **RGB** `rgb(60,179,113)` **HSL** `hsl(147,50%,47%)`

Couleur Web "seagreen (vert mer) / #2E8B57" — **Nom** `seagreen (vert mer)` **Hexa.** `#2E8B57` **RGB** `rgb(46,139,87)` **HSL** `hsl(146,50%,36%)`

Couleur Web "forestgreen (vert forêt) / #228B22" — **Nom** `forestgreen (vert forêt)` **Hexa.** `#228B22` **RGB** `rgb(34,139,34)` **HSL** `hsl(120,61%,34%)`

Couleur Web "green (vert) / #008000" — **Nom** `green (vert)` **Hexa.** `#008000` **RGB** `rgb(0,128,0)` **HSL** `hsl(120,100%,25%)`

Couleur Web "darkgreen (vert foncé) / #006400" — **Nom** `darkgreen (vert foncé)` **Hexa.** `#006400` **RGB** `rgb(0,100,0)` **HSL** `hsl(120,100%,20%)`

Couleur Web "aqua (bleu eau) / #00FFFF" — **Nom** `aqua (bleu eau)` **Hexa.** `#00FFFF` **RGB** `rgb(0,255,255)` **HSL** `hsl(180,100%,50%)`

Couleur Web "cyan (cyan) / #2BFAFA" — **Nom** `cyan (cyan)` **Hexa.** `#2BFAFA` **RGB** `rgb(43,250,250)` **HSL** `hsl(180,95%,57%)`

Couleur Web "lightcyan (cyan clair) / #E0FFFF" — **Nom** `lightcyan (cyan clair)` **Hexa.** `#E0FFFF` **RGB** `rgb(224,255,255)` **HSL** `hsl(180,100%,94%)`

Couleur Web "paleturquoise (turquoise clair) / #AFEEEE" — **Nom** `paleturquoise (turquoise clair)` **Hexa.** `#AFEEEE` **RGB** `rgb(175,238,238)` **HSL** `hsl(180,65%,81%)`

Couleur Web "aquamarine (aigue-marine) / #7FFFD4" — **Nom** `aquamarine (aigue-marine)` **Hexa.** `#7FFFD4` **RGB** `rgb(127,255,212)` **HSL** `hsl(160,100%,75%)`

Couleur Web "turquoise (turquoise) / #40E0D0" — **Nom** `turquoise (turquoise)` **Hexa.** `#40E0D0` **RGB** `rgb(64,224,208)` **HSL** `hsl(174,72%,56%)`

Couleur Web "mediumturquoise (turquoise moyen) / #41D1CC" — **Nom** `mediumturquoise (turquoise moyen)` **Hexa.** `#41D1CC` **RGB** `rgb(65,209,204)` **HSL** `hsl(178,61%,54%)`

Couleur Web "darkturquoise (turquoise foncé) / #00CED1" — **Nom** `darkturquoise (turquoise foncé)` **Hexa.** `#00CED1` **RGB** `rgb(0,206,209)` **HSL** `hsl(181,100%,41%)`

Couleur Web "lightseagreen (vert mer clair) / #20B2AA" — **Nom** `lightseagreen (vert mer clair)` **Hexa.** `#20B2AA` **RGB** `rgb(32,178,170)` **HSL** `hsl(177,70%,41%)`

Couleur Web "cadetblue (bleu cadet) / #5F9EA0" — **Nom** `cadetblue (bleu cadet)` **Hexa.** `#5F9EA0` **RGB** `rgb(95,158,160)` **HSL** `hsl(182,25%,50%)`

Couleur Web "darkcyan (cyan foncé) / #008B8B" — **Nom** `darkcyan (cyan foncé)` **Hexa.** `#008B8B` **RGB** `rgb(0,139,139)` **HSL** `hsl(180,100%,27%)`

Couleur Web "teal (bleu sarcelle) / #008080" — **Nom** `teal (bleu sarcelle)` **Hexa.** `#008080` **RGB** `rgb(0,128,128)` **HSL** `hsl(180,100%,25%)`

Couleur Web "lightsteelblue (bleu acier clair) / #B0C4DE" — **Nom** `lightsteelblue (bleu acier clair)` **Hexa.** `#B0C4DE` **RGB** `rgb(176,196,222)` **HSL** `hsl(214,41%,78%)`

Couleur Web "powderblue (bleu poudre) / #B0E0E6" — **Nom** `powderblue (bleu poudre)` **Hexa.** `#B0E0E6` **RGB** `rgb(176,224,230)` **HSL** `hsl(187,52%,80%)`

Couleur Web "lightblue (bleu clair) / #ADD8E6" — **Nom** `lightblue (bleu clair)` **Hexa.** `#ADD8E6` **RGB** `rgb(173,216,230)` **HSL** `hsl(195,53%,79%)`

Couleur Web "skyblue (bleu ciel) / #87CEEB" — **Nom** `skyblue (bleu ciel)` **Hexa.** `#87CEEB` **RGB** `rgb(135,206,235)` **HSL** `hsl(197,71%,73%)`

Couleur Web "lightskyblue (bleu ciel clair) / #87CEFA" — **Nom** `lightskyblue (bleu ciel clair)` **Hexa.** `#87CEFA` **RGB** `rgb(135,206,250)` **HSL** `hsl(203,92%,75%)`

Couleur Web "deepskyblue (bleu ciel profond) / #00BFFF" — **Nom** `deepskyblue (bleu ciel profond)` **Hexa.** `#00BFFF` **RGB** `rgb(0,191,255)` **HSL** `hsl(195,100%,50%)`

Couleur Web "dodgerblue (bleu Dodger) / #1E90FF" — **Nom** `dodgerblue (bleu Dodger)` **Hexa.** `#1E90FF` **RGB** `rgb(30,144,255)` **HSL** `hsl(210,100%,56%)`

Couleur Web "cornflowerblue (bleu bleuet) / #6495ED" — **Nom** `cornflowerblue (bleu bleuet)` **Hexa.** `#6495ED` **RGB** `rgb(100,149,237)` **HSL** `hsl(219,79%,66%)`

Couleur Web "steelblue (bleu acier) / #4682B4" — **Nom** `steelblue (bleu acier)` **Hexa.** `#4682B4` **RGB** `rgb(70,130,180)` **HSL** `hsl(207,44%,49%)`

Couleur Web "royalblue (bleu roi) / #4169E1" — **Nom** `royalblue (bleu roi)` **Hexa.** `#4169E1` **RGB** `rgb(65,105,225)` **HSL** `hsl(225,73%,57%)`

Couleur Web "blue (bleu) / #0000FF" — **Nom** `blue (bleu)` **Hexa.** `#0000FF` **RGB** `rgb(0,0,255)` **HSL** `hsl(240,100%,50%)`

Couleur Web "mediumblue (bleu moyen) / #0000CD" — **Nom** `mediumblue (bleu moyen)` **Hexa.** `#0000CD` **RGB** `rgb(0,0,205)` **HSL** `hsl(240,100%,40%)`

Couleur Web "darkblue (bleu foncé) / #00008B" — **Nom** `darkblue (bleu foncé)` **Hexa.** `#00008B` **RGB** `rgb(0,0,139)` **HSL** `hsl(240,100%,27%)`

Couleur Web "navy (bleu marine) / #000080" — **Nom** `navy (bleu marine)` **Hexa.** `#000080` **RGB** `rgb(0,0,128)` **HSL** `hsl(240,100%,25%)`

Couleur Web "midnightblue (bleu nuit) / #191970" — **Nom** `midnightblue (bleu nuit)` **Hexa.** `#191970` **RGB** `rgb(25,25,112)` **HSL** `hsl(240,64%,27%)`

Couleur Web "cornsilk (soie de maïs) / #FFF8DC" — **Nom** `cornsilk (soie de maïs)` **Hexa.** `#FFF8DC` **RGB** `rgb(255,248,220)` **HSL** `hsl(48,100%,93%)`

Couleur Web "blanchedalmond / #FFEBCD" — **Nom** `blanchedalmond` **Hexa.** `#FFEBCD` **RGB** `rgb(255,235,205)` **HSL** `hsl(36,100%,90%)`

Couleur Web "navajowhite (blanc navajo) / #FFDEAD" — **Nom** `navajowhite (blanc navajo)` **Hexa.** `#FFDEAD` **RGB** `rgb(255,222,173)` **HSL** `hsl(36,100%,84%)`

Couleur Web "wheat / #F5DEB3" — **Nom** `wheat` **Hexa.** `#F5DEB3` **RGB** `rgb(245,222,179)` **HSL** `hsl(39,77%,83%)`

Couleur Web "burlywood (bois massif) / #DEB887" — **Nom** `burlywood (bois massif)` **Hexa.** `#DEB887` **RGB** `rgb(222,184,135)` **HSL** `hsl(34,57%,70%)`

Couleur Web "bisque (écrevisse) / #FFE4C4" — **Nom** `bisque (écrevisse)` **Hexa.** `#FFE4C4` **RGB** `rgb(255,228,196)` **HSL** `hsl(33,100%,88%)`

Couleur Web "tan (ocre) / #D2B48C" — **Nom** `tan (ocre)` **Hexa.** `#D2B48C` **RGB** `rgb(210,180,140)` **HSL** `hsl(34,44%,69%)`

Couleur Web "rosybrown / #BC8F8F" — **Nom** `rosybrown` **Hexa.** `#BC8F8F` **RGB** `rgb(188,143,143)` **HSL** `hsl(0,25%,65%)`

Couleur Web "sandybrown / #F4A460" — **Nom** `sandybrown` **Hexa.** `#F4A460` **RGB** `rgb(244,164,96)` **HSL** `hsl(28,87%,67%)`

Couleur Web "goldenrod / #DAA520" — **Nom** `goldenrod` **Hexa.** `#DAA520` **RGB** `rgb(218,165,32)` **HSL** `hsl(43,74%,49%)`

Couleur Web "darkgoldenrod / #B8860B" — **Nom** `darkgoldenrod` **Hexa.** `#B8860B` **RGB** `rgb(184,134,11)` **HSL** `hsl(43,89%,38%)`

Couleur Web "peru / #CD853F" — **Nom** `peru` **Hexa.** `#CD853F` **RGB** `rgb(205,133,63)` **HSL** `hsl(30,59%,53%)`

Couleur Web "chocolate (chocolat) / #D2691E" — **Nom** `chocolate (chocolat)` **Hexa.** `#D2691E` **RGB** `rgb(210,105,30)` **HSL** `hsl(25,75%,47%)`

Couleur Web "saddlebrown / #8B4513" — **Nom** `saddlebrown` **Hexa.** `#8B4513` **RGB** `rgb(139,69,19)` **HSL** `hsl(25,76%,31%)`

Couleur Web "sienna (terre de sienne) / #A0522D" — **Nom** `sienna (terre de sienne)` **Hexa.** `#A0522D` **RGB** `rgb(160,82,45)` **HSL** `hsl(19,56%,40%)`

Couleur Web "brown (brun) / #A52A2A" — **Nom** `brown (brun)` **Hexa.** `#A52A2A` **RGB** `rgb(165,42,42)` **HSL** `hsl(0,59%,41%)`

Couleur Web "maroon (bordeaux) / #800000" — **Nom** `maroon (bordeaux)` **Hexa.** `#800000` **RGB** `rgb(128,0,0)` **HSL** `hsl(0,100%,25%)`

Couleur Web "white (blanc) / #FFFFFF" — **Nom** `white (blanc)` **Hexa.** `#FFFFFF` **RGB** `rgb(255,255,255)` **HSL** `hsl(0,0%,100%)`

Couleur Web "snow (blanc neige) / #FFFAFA" — **Nom** `snow (blanc neige)` **Hexa.** `#FFFAFA` **RGB** `rgb(255,250,250)` **HSL** `hsl(0,100%,99%)`

Couleur Web "honeydew / #F0FFF0" — **Nom** `honeydew` **Hexa.** `#F0FFF0` **RGB** `rgb(240,255,240)` **HSL** `hsl(120,100%,97%)`

Couleur Web "mintcream (menthe à la crème) / #F5FFFA" — **Nom** `mintcream (menthe à la crème)` **Hexa.** `#F5FFFA` **RGB** `rgb(245,255,250)` **HSL** `hsl(150,100%,98%)`

Couleur Web "azure (azur) / #F0FFFF" — **Nom** `azure (azur)` **Hexa.** `#F0FFFF` **RGB** `rgb(240,255,255)` **HSL** `hsl(180,100%,97%)`

Couleur Web "aliceblue (bleu Alice) / #F0F8FF" — **Nom** `aliceblue (bleu Alice)` **Hexa.** `#F0F8FF` **RGB** `rgb(240,248,255)` **HSL** `hsl(208,100%,97%)`

Couleur Web "ghostwhite (blanc fantôme) / #F8F8FF" — **Nom** `ghostwhite (blanc fantôme)` **Hexa.** `#F8F8FF` **RGB** `rgb(248,248,255)` **HSL** `hsl(240,100%,99%)`

Couleur Web "whitesmoke (fumée blanche) / #F5F5F5" — **Nom** `whitesmoke (fumée blanche)` **Hexa.** `#F5F5F5` **RGB** `rgb(245,245,245)` **HSL** `hsl(0,0%,96%)`

Couleur Web "seashell (blanc coquillage) / #FFF5EE" — **Nom** `seashell (blanc coquillage)` **Hexa.** `#FFF5EE` **RGB** `rgb(255,245,238)` **HSL** `hsl(25,100%,97%)`

Couleur Web "beige (beige) / #F5F5DC" — **Nom** `beige (beige)` **Hexa.** `#F5F5DC` **RGB** `rgb(245,245,220)` **HSL** `hsl(60,56%,91%)`

Couleur Web "oldlace (blanc vieille dentelle) / #FDF5E6" — **Nom** `oldlace (blanc vieille dentelle)` **Hexa.** `#FDF5E6` **RGB** `rgb(253,245,230)` **HSL** `hsl(39,85%,95%)`

Couleur Web "floralwhite (blanc floral) / #FFFAF0" — **Nom** `floralwhite (blanc floral)` **Hexa.** `#FFFAF0` **RGB** `rgb(255,250,240)` **HSL** `hsl(40,100%,97%)`

Couleur Web "ivory (blanc ivoire) / #FFFFF0" — **Nom** `ivory (blanc ivoire)` **Hexa.** `#FFFFF0` **RGB** `rgb(255,255,240)` **HSL** `hsl(60,100%,97%)`

Couleur Web "antiquewhite (blanc antique) / #FAEBD7" — **Nom** `antiquewhite (blanc antique)` **Hexa.** `#FAEBD7` **RGB** `rgb(250,235,215)` **HSL** `hsl(34,78%,91%)`

Couleur Web "linen (blanc lin) / #FAF0E6" — **Nom** `linen (blanc lin)` **Hexa.** `#FAF0E6` **RGB** `rgb(250,240,230)` **HSL** `hsl(30,67%,94%)`

Couleur Web "lavenderblush / #FFF0F5" — **Nom** `lavenderblush` **Hexa.** `#FFF0F5` **RGB** `rgb(255,240,245)` **HSL** `hsl(340,100%,97%)`

Couleur Web "mistyrose (misty rose) / #FFE4E1" — **Nom** `mistyrose (misty rose)` **Hexa.** `#FFE4E1` **RGB** `rgb(255,228,225)` **HSL** `hsl(6,100%,94%)`

Couleur Web "gainsboro (gris étain) / #DCDCDC" — **Nom** `gainsboro (gris étain)` **Hexa.** `#DCDCDC` **RGB** `rgb(220,220,220)` **HSL** `hsl(0,0%,86%)`

Couleur Web "lightgray | lightgrey (gris clair) / #D3D3D3" — **Nom** `lightgray (gris clair)` **Hexa.** `#D3D3D3` **RGB** `rgb(211,211,211)` **HSL** `hsl(0,0%,83%)`

Couleur Web "silver (gris argent) / #C0C0C0" — **Nom** `silver (gris argent)` **Hexa.** `#C0C0C0` **RGB** `rgb(192,192,192)` **HSL** `hsl(0,0%,75%)`

Couleur Web "darkgray | darkgrey (gris très foncé) / #A9A9A9" — **Nom** `darkgray (gris très foncé)` **Hexa.** `#A9A9A9` **RGB** `rgb(169,169,169)` **HSL** `hsl(0,0%,66%)`

Couleur Web "gray | grey (gris) / #808080" — **Nom** `gray (gris)` **Hexa.** `#808080` **RGB** `rgb(128,128,128)` **HSL** `hsl(0,0%,50%)`

Couleur Web "dimgray | dimgrey (gris mat) / #696969" — **Nom** `dimgray (gris mat)` **Hexa.** `#696969` **RGB** `rgb(105,105,105)` **HSL** `hsl(0,0%,41%)`

Couleur Web "lightslategray | lightslategrey (gris ardoise clair) / #778899" — **Nom** `lightslategray (gris ardoise clair)` **Hexa.** `#778899` **RGB** `rgb(119,136,153)` **HSL** `hsl(210,14%,53%)`

Couleur Web "slategray | slategrey (gris ardoise) / #708090" — **Nom** `slategray (gris ardoise)` **Hexa.** `#708090` **RGB** `rgb(112,128,144)` **HSL** `hsl(210,13%,50%)`

Couleur Web "darkslategray | darkslategrey (gris ardoise foncé) / #2F4F4F" — **Nom** `darkslategray (gris ardoise foncé)` **Hexa.** `#2F4F4F` **RGB** `rgb(47,79,79)` **HSL** `hsl(180,25%,25%)`

Couleur Web "black (noir) / #000000" — **Nom** `black (noir)` **Hexa.** `#000000` **RGB** `rgb(0,0,0)` **HSL** `hsl(0,0%,0%)`

Exemples de codes CSS avec la couleur royalblue (#4169E1) .

La couleur royalblue dans une classe CSS

.textcolor { color : royalblue; } .bordercolor { border : 5px solid royalblue; } .backgroundcolor { background-color : royalblue; } .trianglecolor { display : inline-block; height : 0; width : 0; border-right : 7px solid transparent; border-bottom : 14px solid royalblue;border-left : 8px solid transparent;}
La couleur Css de ce texte est royalblue
Ma classe est ".textcolor"
La couleur CSS de la bordure est royalblue
Ma classe est ".bordercolor"
La couleur Css de l'arrière plan est royalblue
Ma classe est ".backgroundcolor"
Triangle de couleur CSS royalblue
Ma classe est ".trianglecolor"

La couleur royalblue avec la Css color

<span style="color:royalblue"> Texte </div> La couleur CSS de ce texte est royalblue

La couleur royalblue avec la Css background-color

<div style="background-color : royalblue"> Contenu </div> La couleur CSS de l'arrière plan est royalblue

La couleur royalblue avec la Css border-color

<div style="border : 5px solid royalblue"> Contenu </div> La couleur CSS de la bordure est royalblue

La couleur royalblue en Triangle Css

<div style="display : inline-block; height : 0; width : 0; border-right : 7px solid transparent; border-bottom : 14px solid royalblue; border-left : 8px solid transparent;"> </div> Triangle de couleur CSS royalblue

L'Accessibilité Web et le contraste entre les couleurs.

Pour l'Accessibilité Web vous devez faire en sorte que le contraste entre la couleur d'un texte et la couleur de son arrière-plan soit suffisamment grand pour que le texte soit correctement lu par une personne affectée par une perception des couleurs déficiente.
Les règles sont définîtes dans les recommandations WCAG 2.0.

Tester le contraste entre les couleurs.

Le tableau ci-dessous, vous montre si le contrate d'un texte en blanc ou en noir sur un arrière-plan de couleur #4169E1 passe les règles 1.4.3 ou 1.4.6 du WCAG 2.0.

Couleur texte	Exemple	Règles 1.4.3⁽²⁾ et 1.4.6⁽⁴⁾	Règles 1.4.3⁽¹⁾ et 1.4.6⁽³⁾
Texte noir Ratio : 4.3:1	Textenoir	WCAG AA (4.5:1): Echec WCAG AAA (7:1): Echec	WCAG AA (3:1): Passe WCAG AAA (4.5:1): Echec
Texte blanc Ratio : 4.8:1	Texteblanc	WCAG AA (4.5:1): Passe WCAG AAA (7:1): Echec	WCAG AA (3:1): Passe WCAG AAA (4.5:1): Passe

Informations complémentaires.

*Couleur nommée

Cours sur le format de couleur Web "nommée" en Css et Html.
Code couleur nommé

*Couleur Hexadécimale

Cours sur le format de couleur Web "Hexadécimale" en Css et Html.
Code couleur HEXA.

*Couleur RGB

Cours sur le format de couleur Web "RGB" et "RGBA" en Css et Html.
Code couleur RGB

*Couleur HSL

Cours sur le format de couleur Web "HSL" et "HSLA" en Css et Html.
Code couleur Web HSL

*color

La propriété color CSS permet de spécifier une couleur de de texte.
color

*border-color

La propriété border-color CSS permet de spécifier une couleur de bordure.
border-color

*background-color

La propriété background-color CSS permet de spécifier une couleur d'arrière plan.
background-color

*Classe Css

La Classe CSS permet de regrouper des propriétés Css.
Assigner la propriété css

*Cours : couleur du texte

Cours sur les différentes manières de changer la couleur d'un texte.
Modifier la couleur d'un texte en Css

*Cours : couleur des bordures

Cours sur les différentes manières de changer la couleur des bordures.
Modifier la couleur des bordures en Css

*Cours : couleur de fond

Cours sur les différentes manières de changer la couleur des arrières plans.
Modifier la couleur des fonds en Css

*Triangle CSSS

Technique CSS basée sur les bordures qui permet de faire un triangle de couleur.
créer un triangle en CSS