## Les couleurs

Une couleur peut être définie de nombreuses façons différentes :

- notation hexadécimale
- fonction `rgb()`
- fonction `rgba()`
- fonction `hsl()`
- fonction `hsla()`
- mot clé,
- couleur système
- propriété opacity
- valeur `transparent`
- valeur `currentColor`

### Notation hexadécimale

notation hexadécimale

La notation hexadécimale est basée sur le modèle colorimétrique RGB (Red - Green - Blue). Chacune des couleurs est réprésentée par une valeur de 0 à 255 exprimée en hexadécimal (00 à FF). La valeur de la couleur ainsi obtenue doit être précédée par le signe #.

modèle RVB

Tester la notation héxadécimale

Quand les valeurs du rouge, du bleu et du vert sont toutes les 3 composées de doublons, on peut utiliser un raccourci. Par exemple `#FFCC00` peut être raccourci en `#FC0`, `#000000` en `#000`, `#EE5588` en `#E58`, etc.

### Fonction rgb()

fonction rgb() avec valeurs entières
fonction rgb() avec valeurs en pourcentage

La fonction `rbg()` est basée sur le modèle colorimétrique RGB (Red - Green - Blue).

La fonction accepte 3 paramètres définissant respectivement la valeur du rouge, du vert et du bleu. Les valeurs peuvent être exprimées sous la forme d'un nombre entier de 0 à 255, ou sous la forme d'un pourcentage de 0 à 100. Les 3 paramètres doivent être du même type (ie on ne peut pas mélanger des entiers et des pourcentages).

Tester la function rgb()

### Fonction rgba()

fonction rgba() avec valeurs entières
fonction rgba() avec valeurs en pourcentage

La fonction `rbga()` est basée sur le modèle colorimétrique RGB (Red - Green - Blue) auquel on a ajouté la gestion de la transparence de la couleur.

La transparence est définie par le quatriéme paramètre de la function. La valeur peut être une valeur décimale de 0 (complétement transparent) à 1 (complétement opaque) ou un pourcentage de 0 à 100.

Tester la fonction rgba()

### Fonction hsl()

fonction hsl()
roue des couleurs

Le modèle colorimétrique HSL (Hue, Saturation, Lightness) est basé sur une teinte (hue) exprimée en degré (de 0 à 360) dans le spectre des couleurs symbolisé sous la forme d'un cercle ou d'une roue.

La saturation représente l'intensité et la pureté de la couleur. Elle est exprimée en pourcentage : 0 = pas d'intensité (gris), 100 = couleur pure.

La luminosité (lightness) est exprimée en pourcentage : 0 = pas de lumière, 100 = lumière blanche.

Tester la fonction hsl()

### Fonction hsla()

fonction hsla()

La fonction `hsla()` est basée sur le modèle colorimétrique HSL (Hue, Saturation, Lightness) auquel on a ajouté la gestion de la transparence de la couleur.

La transparence est définie par le quatriéme paramètre de la function. La valeur peut être une valeur décimale de 0 (complétement transparent) à 1 (complétement opaque) ou un pourcentage de 0 à 100.

Tester la fonction hsla()

### Mots clés

Les mots clés suivants peuvent être utilisés pour référencer 147 couleurs prédéfinies.

Noir, gris, blanc

- black
  #000000
  0,0,0
- dimgray
  #696969
  105,105,105
- dimgrey
  #696969
  105,105,105
- gray
  #808080
  128,128,128
- grey
  #808080
  128,128,128
- lightslategray
  #778899
  119,136,153
- lightslategrey
  #778899
  119,136,153
- slategray
  #708090
  112,128,144
- slategrey
  #708090
  112,128,144
- darkgray
  #a9a9a9
  169,169,169
- darkgrey
  #a9a9a9
  169,169,169
- gainsboro
  #dcdcdc
  220,220,220
- ghostwhite
  #f8f8ff
  248,248,255
- lightgray
  #d3d3d3
  211,211,211
- lightgrey
  #d3d3d3
  211,211,211
- silver
  #c0c0c0
  192,192,192
- snow
  #fffafa
  255,250,250
- white
  #ffffff
  255,255,255
- whitesmoke
  #f5f5f5
  245,245,245

Jaune, beige

- antiquewhite
  #faebd7
  250,235,215
- beige
  #f5f5dc
  245,245,220
- bisque
  #ffe4c4
  255,228,196
- blanchedalmond
  #ffebcd
  255,235,205
- burlywood
  #deb887
  222,184,135
- cornsilk
  #fff8dc
  255,248,220
- darkgoldenrod
  #b8860b
  184,134,11
- gold
  #fffff0
  255,255,240
- goldenrod
  #fffacd
  255,250,205
- lightyellow
  #ffffe0
  255,255,224
- linen
  #faf0e6
  250,240,230
- moccasin
  #ffe4b5
  255,228,181
- navajowhite
  #ffdead
  255,222,173
- oldlace
  #fdf5e6
  253,245,230
- palegoldenrod
  #eee8aa
  238,232,170
- papayawhip
  #ffefd5
  255,239,213
- peachpuff
  #ffdab9
  255,218,185
- seashell
  #fff5ee
  255,245,238
- tan
  #d2b48c
  210,180,140
- wheat
  #f5deb3
  245,222,179
- yellow
  #ffff00
  255,255,0
- lightgoldenrodyellow
  #fafad2
  250,250,210
- floralwhite
  #fffaf0
  255,250,240

Rouge, orange, marron

- crimson
  #dc143c
  220,20,60
- brown
  #a52a2a
  165,42,42
- coral
  #ff7f50
  255,127,80
- chocolate
  #d2691e
  210,105,30
- darkorange
  #ff8c00
  255,140,0
- darkred
  #8b0000
  139,0,0
- darksalmon
  #e9967a
  233,150,122
- firebrick
  #b22222
  178,34,34
- indianred
  #cd5c5c
  205,92,92
- lightcoral
  #f08080
  240,128,128
- lightsalmon
  #ffa07a
  255,160,122
- maroon
  #800000
  128,0,0
- orange
  #ffa500
  255,165,0
- orangered
  #ff4500
  255,69,0
- peru
  #cd853f
  205,133,63
- red
  #ff0000
  255,0,0
- rosybrown
  #bc8f8f
  188,143,143
- saddlebrown
  #8b4513
  139,69,19
- salmon
  #fa8072
  250,128,114
- sandybrown
  #f4a460
  244,164,96
- sienna
  #a0522d
  160,82,45
- tomato
  #ff6347
  255,99,71

Violet, rose, pourpre

- blueviolet
  #8a2be2
  138,43,226
- darkmagenta
  #8b008b
  139,0,139
- darkorchid
  #9932cc
  153,50,204
- darkslateblue
  #483d8b
  72,61,139
- darkviolet
  #9400d3
  148,0,211
- deeppink
  #ff1493
  255,20,147
- fuchsia
  #ff00ff
  255,0,255
- hotpink
  #ff69b4
  255,105,180
- indigo
  #4b0082
  75,0,130
- lightpink
  #ffb6c1
  255,182,193
- magenta
  #ff00ff
  255,0,255
- mediumorchid
  #ba55d3
  186,85,211
- mediumpurple
  #9370db
  147,112,219
- mediumvioletred
  #c71585
  199,21,133
- mistyrose
  #ffe4e1
  255,228,225
- orchid
  #da70d6
  218,112,214
- palevioletred
  #db7093
  219,112,147
- pink
  #ffc0cb
  255,192,203
- plum
  #dda0dd
  221,160,221
- purple
  #800080
  128,0,128
- thistle
  #d8bfd8
  216,191,216
- violet
  #ee82ee
  238,130,238

Bleu, cyan, turquoise

- aliceblue
  #f0f8ff
  240,248,255
- aqua
  #00ffff
  0,255,255
- aquamarine
  #7fffd4
  127,255,212
- azure
  #f0ffff
  240,255,255
- blue
  #0000ff
  0,0,255
- cadetblue
  #5f9ea0
  95,158,160
- cornflowerblue
  #6495ed
  100,149,237
- cyan
  #00ffff
  0,255,255
- darkblue
  #00008b
  0,0,139
- darkcyan
  #008b8b
  0,139,139
- darkturquoise
  #00ced1
  0,206,209
- deepskyblue
  #00bfff
  0,191,255
- dodgerblue
  #1e90ff
  30,144,255
- lavender
  #e6e6fa
  230,230,250
- lavenderblush
  #fff0f5
  255,240,245
- lightblue
  #add8e6
  173,216,230
- lightcyan
  #e0ffff
  224,255,255
- lightseagreen
  #20b2aa
  32,178,170
- lightskyblue
  #87cefa
  135,206,250
- lightsteelblue
  #b0c4de
  176,196,222
- mediumaquamarine
  #66cdaa
  102,205,170
- mediumblue
  #0000cd
  0,0,205
- mediumslateblue
  #7b68ee
  123,104,238
- mediumturquoise
  #48d1cc
  72,209,204
- midnightblue
  #191970
  25,25,112
- navy
  #000080
  0,0,128
- paleturquoise
  #afeeee
  175,238,238
- powderblue
  #b0e0e6
  176,224,230
- royalblue
  #4169e1
  65,105,225
- skyblue
  #87ceeb
  135,206,235
- slateblue
  #6a5acd
  106,90,205
- steelblue
  #4682b4
  70,130,180
- teal
  #008080
  0,128,128
- turquoise
  #40e0d0
  64,224,208

Vert

- chartreuse
  #7fff00
  127,255,0
- darkgreen
  #006400
  0,100,0
- darkkhaki
  #bdb76b
  189,183,107
- darkolivegreen
  #556b2f
  85,107,47
- darkseagreen
  #8fbc8f
  143,188,143
- forestgreen
  #228b22
  34,139,34
- green
  #008000
  0,128,0
- greenyellow
  #adff2f
  173,255,47
- honeydew
  #f0fff0
  240,255,240
- khaki
  #f0e68c
  240,230,140
- lawngreen
  #7cfc00
  124,252,0
- lightgreen
  #90ee90
  144,238,144
- lime
  #00ff00
  0,255,0
- limegreen
  #32cd32
  50,205,50
- olive
  #808000
  128,128,0
- olivedrab
  #6b8e23
  107,142,35
- palegreen
  #98fb98
  152,251,152
- seagreen
  #2e8b57
  46,139,87
- springgreen
  #00ff7f
  0,255,127
- yellowgreen
  #9acd32
  154,205,50
- mediumseagreen
  #3cb371
  60,179,113
- mediumspringgreen
  #00fa9a
  0,250,154
- darkslategray
  #2f4f4f
  47,79,79
- darkslategrey
  #2f4f4f
  47,79,79
- mintcream
  #f5fffa
  245,255,250

### Couleurs système

Les mots clés suivants pouvaient être utilisés pour référencer une couleur de l'interface du système d'exploitation dans lequel se trouve le navigateur.

La dernière spécification du W3C les a déprécié et demande de ne plus les utiliser.

- ActiveBorder
- ActiveCaption
- AppWorkspace
- Background
- ButtonFace
- ButtonHighlight
- ButtonShadow
- ButtonText
- CaptionText
- GrayText
- Highlight
- HighlightText
- InactiveBorder
- InactiveCaption
- InactiveCaptionText
- InfoBackground
- InfoText
- Menu
- MenuText
- Scrollbar
- ThreeDDarkShadow
- ThreeDFace
- ThreeDHighlight
- ThreeDLightShadow
- ThreeDShadow
- Window
- WindowFrame
- WindowText

Spécifications W3