Les formats de codes couleurs HTML.

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

Par la couleur nommée.

Pour spécifier une couleur sur votre site, vous pouvez utiliser le nom donné une couleur pour l'identifier. A ce jour (07/2022), il en existe 140 couleurs nommées.

Exemple d'une couleur au format nommé: royalblue

Par le code de couleur Hexadécimal.

Pour spécifier une couleur sur votre site, vous pouvez utiliser le code de couleur hexadécimal. Le code Hexadécimal détaille la quantité des trois couleurs primaires Rouge (Red), Vert (Green) et Bleu (Blue) qui va constituer votre couleur.

La quantité est un nombre constitué de chiffres hexadécimaux (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F).

Le code couleur hexadécimal commence toujours par un # et pourrait être représenté schématiquement comme cela: #RRGGBB

Exemple du code hexadécimal: #4169E1

La couleur en code hexadécimal, Hexadécimal avec transparence.

La couleur en code hexadécimal accepte aussi la possibilité d'ajouter une transparence (Alpha).
Le code de couleur hexadécimal pourrait être représenté schématiquement comme cela : #RRGGBAA

Exemple du code hexadécimal avec alpha (transparence): #4169E199

Par le code de couleur RGB (Red Green Blue).

Pour spécifier une couleur sur votre site, vous pouvez utiliser le code couleur RGB. Le code RGB détaille la quantité des trois couleurs primaires Rouge (Red), Vert (Green) et Bleu (Blue) qui va constituer votre couleur.

La quantité est un nombre compris entre 0 et 250.

Le code couleur RGB pourrait être représenté schématiquement comme cela : rgb(R, G, B)

Exemple du code RGB: rgb(65,105,225)

La couleur en RGBA (Red Green Blue Alpha) avec transparence.

La couleur en code RGB accepte aussi la possibilité d'ajouter une transparence (Alpha).
Le code de couleur RGBA pourrait être représenté schématiquement comme cela: rgb(R, G, B, A)

Exemple du code RGBA (avec alpha transparence): rgba(65,105,225,1)

Par le code de couleur HSL (Hue Saturation Lightness).

Pour spécifier une couleur sur votre site, vous pouvez utiliser le format de couleur HSL. Le code HSL détaille la quantité de teinte (Hue), de saturation (Saturation) et de luminosité (Lightness) qui constitue votre couleur.

La teinte (Hue) représente la couleur et sa quantité est un chiffre en degrés d'angle.
La saturation (Saturation) correspond à la pureté de la couleur et sa quantité est un chiffre pourcentage compris entre 0 et 100.
La luminosité (Lightness) quantifier la lumière dans la teinte et sa quantité est un chiffre pourcentage compris entre 0 et 100.

Le code couleur HSLA pourrait être représenté schématiquement comme cela : HSL(H, S, L)

Exemple du code HSL: hsl(225,73%,57%)

La couleur en HSLA (Hue Saturation Lightness Alpha), HSL avec transparence.

La couleur en code HSL accepte aussi la possibilité d'ajouter une transparence (Alpha).
Le code de couleur HSLA pourrait être représenté schématiquement comme cela: HSL(H, S, L, A)

Exemple du code HSLA (avec alpha transparence): hsla(225,73%,57%,1)

Ajouter une transparence (alpha) à la couleur.

Il est maintenant aussi possible depuis Css3 de spécifier une couleur incluant la transparence avec les formats RGBa, HSLa et #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 à la couleur "royalblue"

Liste des couleurs Web nommées

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Couleur Web "palegoldenrod (jaune pâle doré) / #EEE8AA" — **Nommé** `palegoldenrod` **Hexa.** `#EEE8AA` **RGB** `rgb(238,232,170)` **HSL** `hsl(55,67%,80%)`**Nom fr** `jaune pâle doré`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Couleur Web "mediumseagreen (vert d'eau moyen) / #3CB371" — **Nommé** `mediumseagreen` **Hexa.** `#3CB371` **RGB** `rgb(60,179,113)` **HSL** `hsl(147,50%,47%)`**Nom fr** `vert d'eau moyen`

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

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

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

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

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

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

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

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

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

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

Couleur Web "mediumturquoise (turquoise moyen) / #48D1CC" — **Nommé** `mediumturquoise` **Hexa.** `#48D1CC` **RGB** `rgb(72,209,204)` **HSL** `hsl(178,60%,55%)`**Nom fr** `turquoise moyen`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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é RGAA contraste entre les couleurs.

Pour l'Accessibilité RGAA, 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	Texte noir	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	Texte blanc	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.

*Code couleur nommé

Couleur dont on a donné un nom pour l'identifier.
NomCouleur = darkgoldenrod
Définition complète

*Code couleur Hexadécimal

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
#RRGGBB = #8B4513
Définition complète

*Code couleur RGB

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
RGB(R, G, B) = rgb(255, 248, 220)
Définition complète

*Code couleur HSL

Code de couleur qui détaille la quantité teinte, saturation et luminosité.
HSL(H, S, L) = hsl(0, 25%, 65%)
Définition complète

*Code couleur RGBA

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
RGB(R, G, B, A) = rgb(255, 248, 220, 0.6)
Définition complète

*Code couleur HSLA

Code de couleur qui détaille la quantité teinte, saturation et luminosité.
HSL(H, S, L, A) = hsl(0, 25%, 65%, 0.6)
Définition complète

*Code couleur Hexadécimal Alpha

Code de couleur qui détaille la quantité des trois couleurs primaires Rouge Vert et Bleu qui constitue la couleur.
#RRGGBBAA = #8B451399
Définition complète

*Format des codes couleur CSS

Informations complémentaires sur les codes couleur utilisés pour les CSS

Définition complète

*color

La propriété color CSS permet de spécifier une couleur 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