Les couleurs en CSS

Généralités.

Les couleurs CSS sont les mêmes que celles de HTML mais la syntaxe pour désigner une couleur est plus diversifiée : CSS reconnaît en effet les codes hexadécimaux, la décomposition RGB, la décomposition HSL et surtout les couleurs nommées.

Espace de couleurs.

CSS utilise par défaut l'espace sRGB qui est le plus facile à restituer, même sur du matériel ancien. Il est cependant possible de choisir un autre espace de couleurs avec la directive @color-profile .

Codification des couleurs.

Voici toutes les syntaxes pour désigner une couleur.

• lightblue

  Le nom d'une couleur. Il y a 132 noms de couleurs normalisés par le W3C (voir le nuancier ci-dessous). Le nom ne doit pas être entre guillemets, ni entre apostrophes ; il n'est pas sensible à la casse. Ces noms sont maintenant reconnus par tous les navigateurs.

• transparent

  La couleur totalement transparente, donc invisible. Équivalent à #0000.

• currentcolor

  Ce terme désigne la couleur courante, celle du texte, définie par la propriété color.
  Il peut être utile pour définir la couleur d'autre chose que le texte (par exemple une bordure) lorsque cette dernière a été modifiée au préalable et que l'on souhaite revenir à la même couleur que le texte.

• #rrggbb

  Le code hexadécimal de la couleur sur 6 digits, précédés d'un dièse ( # ). Les deux premiers digits (rr) représentent la valeur de rouge, les deux suivants le vert (gg) et les deux derniers le bleu (bb).
  Ces trois valeurs peuvent évoluer de 00 à ff. En mélangeant dans des proportions différentes ces trois couleurs de base, on peut obtenir n'importe laquelle des couleurs.
  Cette notation hexadécimale est parfaitement reconnue par tous les navigateurs. Malheureusement, les codes ne sont pas très faciles à lire. Pour vous faciliter la tâche, vous pouvez vous reporter au nuancier ci-dessous.

• #rgb

  Le code hexadécimal de la couleur sur 3 digits, précédés d'un dièse ( # ). Cette notation est une version simplifiée de la précédente, qui offre cependant moins de nuances de couleurs puisqu'on attribue un seul digit à chacune des couleurs.
  #f00 est équivalent à #ff0000.
  #0a0 est équivalent à #00aa00.

• #rrggbbaa

  Le code hexadécimal de la couleur sur 8 digits, précédés d'un dièse ( # ). Les deux derniers digits (aa) traduisent l'opacité de la couleur, 00 correspondant à une couleur totalement transparente (donc invisible) et ff une couleur totalement opaque.
  #ff0000ff est du rouge totalement opaque (non transparent).
  #0000ff80 est du bleu semi-transparent.

• #rgba

  Variante de la notation précédente mais en n'affectant qu'un seul digit à chacune des composantes.
  0f0f est un vert totalement opaque.
  00f8 est un bleu semi-transparent.

• rgb(r,g,b) rgba(r,g,b,a) hsl(h,s,l) hsla(h,s,l,a) hwb(h,w,b) ⚠ hwba(h,w,b,a) ⚠ lab(l,a,b) ⚠ lch(l,c,h) ⚠

  Toutes ces fonctions définissent une couleur à partir de 3 composantes, et éventuellement, d'un quatrième qui est la transparence, mais chacune dans un référentiel différent.
  Les deux premières, rgb() et rgba(), utilisent le référentiel bien connu rouge, vert, bleu.
  hsl() et hsla() travaillent dans le référentiel Teinte, Luminosité, Saturation.
  hwb() et hwb(), encore peu connues, construisent une couleur à partir d'une teinte, et en ajoutant une dose de blanc (w) et de noir (b).

  Voici une présentation rapide des paramètres nécessaires à ces fonctions :

  1. r, g et b correspondent aux couleurs rouge, verte et bleue. Ce sont trois nombres de 0 à 255.
  2. a est le taux de transparence : un pourcentage de 0 à 100%.
  3. h est la teinte de la couleur souhaitée. C'est un nombre de 0 à 360 suivi d'une des unités CSS d'angle. Exemple : 214deg.
  4. s est la saturation de la couleur : un pourcentage de 0% à 100%.
  5. l est la luminosité de la couleur : un pourcentage de 0% à 100%.
  6. w est le taux de blanc : un pourcentage de 0% à 100%.
  7. b est le taux de noir : un pourcentage de 0% à 100%.

  Reportez-vous à la description de ces fonctions pour des explications plus complètes : rgb(), rgba(), hsl(), hsla(), hwb(), et hwba().

Nuancier : toutes les couleurs nommées.

Ces noms de couleur sont maintenant standardisés : tous les navigateurs devraient les reconnaître.

Trier les couleurs par : Noms des couleurs Luminance standard Luminance perçue

remarques.

• La couleur rebeccapurple a été nommée ainsi en hommage à la fille de Eric Meyer, décédée à 6 ans d'une tumeur au cerveau. Eric Meyer, peu connu du grand public, est un consultant américain qui a beaucoup fait pour la mise en place de normes sur Internet, et particulièrement pour le CSS.

• Remarque : plusieurs appellations existent parfois pour une même couleur :

  Fuchsia / Magenta
  

  Gray / Grey
  Et tous les dérivés

  Aqua / Cyan
• Le nom de couleur transparent correspond au code hexadécimal 00000000, autrement dit il s'agit d'un noir transparent. Cela n'a que peu d'importance car, dans le cas d'une couleur totalement transparente, les 6 premiers digits du code n'ont pas d'effet.

Couleurs système. ✗

Ces noms de couleurs étaient initialement disponibles pour faciliter l'intégration d'une page dans la charte du système d'exploitation. Cette fonctionnalité est maintenant déclarée obsolète : évitez de l'utiliser.

Voir aussi, dans le même module de standardisation que color.

Les spécifications CSS éditées par le W3C sont organisées en modules. color fait partie du Module CSS - Couleurs (CSS Color Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

• opacity
Opacité (ou transparence).

Fonctions.

• color()
Définit une couleur dans un espace de couleurs autre que sRGB.
• hsl()
Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
• hsla()
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
• hwb()
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
• lab()
Définit une couleur dans le système L*a*b*.
• lch()
Définit une couleur dans le système L*C*H*.
• oklab()
Définit une couleur dans le système L*a*b* avec une correction perceptive.
• oklch()
Définit une couleur dans le système L*C*H* avec une correction perceptive.
• rgb()
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
• rgba()
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives.

• @color-profile
Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().