Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

color() - Fonction CSS

color()

Résumé des caractéristiques de la fonction color()

Description rapide
Définit une couleur dans un espace de couleurs autre que sRGB.
Statut
Problèmes de compatibilité
Module W3C
Module CSS - Couleurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: WD (document de travail)

Description de la fonction color().

La fonction color() définit une couleur dans un espace de couleurs choisi.

Toutes les autres fonctions CSS qui permettent de définir une couleur travaillent dans l'espace de couleurs standard dénommé sRGB (rgb(), hsl(), hwb(), etc.). C'est également le cas pour la notation hexadécimale du genre #FF481A. La fonction color() apporte donc une réelle nouveauté.

Si vous n'êtes pas familiarisé avec la notion d'espace de couleurs, vous pouvez consulter un mini tutoriel sur les espaces de couleurs plus bas sur cette page.

Vous pouvez également consulter la page sur la directive @color-profile qui permet de définir un espace de couleurs personnalisé.

La fonction color() peut être utilisée avec :

La fonction color() peut être utilisée partout où une couleur est attendue, c'est à dire, entre autres, avec les propriétés suivantes :

Syntaxe de color().

  • color est une couleur de référence éventuelle, introduite par le mot from.
  • colorspace est le nom d'un espace de couleurs personnalisé.
  • a, b et c sont les trois valeurs qui définissent la couleur dans l'espace colorimétrique spécifié.
  • α est l'opacité de la couleur (canal alpha), introduite par un caractère slash.
Schéma syntaxique de la fonction color()Syntaxe de la fonction color() en CSS. from color from color srgb srgb display-p3 display-p3 a98-rgb a98-rgb rec2020 rec2020 colorspace colorspace a b c a b c / α / αcolor()color()
  • color: color(a98-rgb 50% 30% 50%); ec a b c

    La fonction color() attend quatre paramètres au minimum, tous obligatoires :

    1. ec : l'espace de couleurs dans lequel la couleur doit être traduite. Il peut s'agir d'un espace de couleurs prédéfini (voir ci-dessous) ou d'un espace de couleurs personnalisé, défini par la directive @color-profile.
    2. a, b, c, : des valeurs sans unité comprises entre 0 et 1 ou des pourcentages compris entre 0% et 100%. Ces valeurs définissent la couleur dans l'espace choisi.
      Pour la plupart des espaces colorimétriques, ces valeurs correspondent au rouge, au vert et au bleu, sauf pour les espaces dont le nom commence par xyz.

    Les espaces de couleurs prédéfinis sont :

    1. srgb : c'est l'espace de couleurs le plus répandu (et le moins performant). Tous les écrans sont capables de le retranscrire : il pose donc peu de problèmes de compatibilité.
      C'est l'espace de couleurs traité par toutes les autres fonctions relatives aux couleurs (rgb(), hsl(), etc.)
    2. srgb-linear a la même étendue que l'espace srgb mais ne fait pas intervenir la fonction gamma.
    3. display-p3.
    4. a98-rgb.
    5. prophoto-rgb.
    6. rec2020.
  • color: color(a98-rgb 50% 30% 50% / 50%); ec a b c α

    Un paramètre supplémentaire α peut être ajouté, en le faisant précéder par un slash (/). Il traduit l'opacité de la couleur, 100% correspondant à une couleur totalement opaque.

    Lorsque ce paramètre n'est pas spécifié, la couleur est considérée comme totalement opaque.

  • color: color(from #FF4874 a98-rgb 50% 30% 50% / 50%); coul ec a b c α

    Cette syntaxe présente un nouveau paramètre, introduit par le mot from qui est une couleur de départ. Les autres paramètres a, b, c et α sont alors des valeurs de modification de la couleur de départ.

Introduction à la notion d'espace de couleurs.

Qu'est ce qu'un espace de couleurs ? L'espace sRGB.

On représente souvent l'ensemble des couleurs par un schéma comme ci-dessous. En fait il ne s'agit pas de toutes les couleurs existantes, mais d'une partie raisonnablement complète de toutes les couleurs existantes.

Ensemble des couleurs existantes

En informatique, comme en vidéo, comme en télévision, et ce depuis le début de la télévision en couleurs, on a toujours obtenu les couleurs en mélangeant trois couleurs de base, qui sont le rouge, le vert et le bleu. On appelle ça la synthèse additive, et c'est une méthode qui a fait ses preuves.

Mais pour ces couleurs de base, de quel rouge parle-t-on ? Et de quel bleu et de quel vert ? Si on choisit les trois couleurs présentées ci-dessous à gauche, on ne pourra restituer que les couleurs du dessin de droite. On voit bien qu'on est loin d'être capable de restituer toutes les couleurs existantes. Ce triangle, formé par les trois couleurs de base, s'appelle un espace de couleurs ou espace colorimétrique.

Couleurs de base pour l'espace sRGB
L'espace sRGB

Alors pourquoi ne pas choisir des couleurs de base situées plus à l'extérieur, qui permettrait d'englober pratiquement toutes les couleurs existantes ? Tout simplement parce qu'il faut aussi que les périphériques, les écrans, les imprimantes, soient capables de restituer ces couleurs. Le choix des couleurs de base qui a été fait il y a de nombreuses années était réaliste : il permettait à pratiquement tous les périphériques de l'époque de traduire ces couleurs. Cet espace de couleur modeste mais réaliste, s'appelle sRGB. Tous les périphériques actuels (moniteurs, écrans de portable, imprimantes, etc.) sont capables d'en restituer toutes les couleurs. Pour cette raison, le sRGB est l'espace de couleurs le plus utilisé sur Internet, car on peut être sûr d'être compatible avec les écrans de tous les internautes.

Mais attention ! Cela ne veut pas dire que tous les écrans vont donner la même couleur. Cela veut juste dire qu'ils sont capables de le faire, mais pour être sûr qu'ils donnent la bonne couleur, il faudrait les calibrer. C'est une opération qui peut se réaliser avec une sonde colorimétrique. Mais très peu de gens calibrent leur écran, à part les graphistes ou autres professionnels de l'image.

Mais ceci est un autre problème. Il faut juste retenir que 99% des périphériques sont capables de restituer l'ensemble des couleurs de l'espace sRGB.

La nécessité d'autres espaces colorimétriques.

L'inconvénient de l'espace sRGB est qu'un périphérique de haut de gamme ne fera pas mieux que les autres, puisque, dans l'espace sRGB, on ne trouve que les couleurs que tous les périphériques savent restituer. Il serait donc intéressant de définir des espaces de couleurs plus larges, qui ne seront bien sûr pas compatibles avec tous les périphériques, mais qui permettront aux périphériques haut de gamme une restitution plus complète des couleurs (et par là de justifier leur prix).

Les logiciels de traitement graphique comme Photoshop effectuent des calculs qu peuvent "éjecter" une couleur en dehors de l'espace sRGB. Même si un le calcul suivant ramène la couleur dans l'espace colorimétrique, on aura perdu des nuances : deux couleurs proches se retrouvent identiques si on les pousse en dehors de leur espace colorimétrique. Afin d'éviter de problème, tous ces logiciels utilisent en interne un espace colorimétrique le plus grand possible.

Enfin, dans les métiers de l'imprimerie on n'utilise pas la synthèse additive et les couleurs de base qui ont été choisies sont le cyan, le magenta et le jaune. Là aussi il y a donc nécessité d'autres espaces colorimétriques que le sRGB.

Des espaces colorimétriques plus étendus que le sRGB existent. Les deux plus connus sont Adobe RGB98 et ProPhoto RGB.

Les espaces de couleurs et CSS.

Pendant longtemps CSS n'a pris en charge que l'espace de couleurs sRGB mais le niveau 4 du module de spécification des couleurs a introduit la notion d'espace de couleurs, en particulier avec la fonction color() décrite sur cette page, et de nombreux espaces colorimétriques prédéfinis : a98-rgb, prophoto-rgb, srgb-linear, etc.

Le niveau 5 du même module étend les possibilités de la fonction color() et ajoute la directive @color-profile qui permet de définir un espace de couleurs personnalisé.

Simulateur.

Le simulateur montre l'usage des pourcentages avec la fonction color(), et affiche également la couleur résultante des mêmes paramètres dans des espaces colorimétriques différents.

background-color :

Compatibilité des navigateurs.

Safari traite les espaces de couleurs depuis 2021, mais c'est le seul navigateur à le faire (2022). La fonction color() n'est donc pas utilisable pour le moment.

Colonne 1
Prise en charge de la fonction color() et donc possibilité d'afficher des couleurs dans un espace colorimétrique différent de srgb.
Colonne 2
Possibilité de définir une couleur relativement à une autre (paramètre from de la fonction color()}.
1
color()
2
Rerlative colors
Estimation de la prise en charge en pourcentage du parc actuel.
89%
66%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

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.

Définit la couleur de l'avant plan (texte essentiellement).
Opacité (ou transparence).

Fonctions.

Détermine une couleur à partir des paramètres Teinte (Hue), Saturation et Luminosité.
Détermine une couleur et sa transparence à partir des paramètres Teinte (Hue), Saturation, Luminosité et Alpha.
Définit une couleur à partir de sa teinte et d'une dose de noir et de blanc.
Définit une couleur dans le système L*a*b*.
Définit une couleur dans le système L*C*H*.
Définit une couleur dans le système L*a*b* avec une correction perceptive.
Définit une couleur dans le système L*C*H* avec une correction perceptive.
Détermine une couleur à partir des valeurs de Rouge, de Vert et de Bleu.
Détermine une couleur et sa transparence à partir des valeurs de Rouge, de Vert, de Bleu et de la valeur Alpha.

Directives.

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