Color() - Fonction CSS

Schéma syntaxique de color().

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• c est une couleur de référence éventuelle, introduite par le mot from.
• --id 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.

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 valeur color() peut être utilisée avec les propriétés suivantes :

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

• accent-color : Définit la couleur des élément actifs, cochés.
• background-color : Définit la couleur en arrière-plan.
• border-color : Définit la couleur des bordures.
• caret-color : Choisit la couleur du marqueur de texte (curseur clignotant).
• color : Définit la couleur de l'avant plan (texte essentiellement).
• column-rule-color : Définit la couleur des filets de séparation de colonnes, dans le contexte d'une mise en page multi-colonnes, d'un conteneur grille ou d'un conteneur flex.
• fill-color : Définit la couleur des remplissages en SVG.
• flood-color : Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
• lighting-color : Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.
• outline-color : Définit la couleur du contour (outline).
• scrollbar-color : Définit deux couleurs qui seront utilisées pour les barres de défilement.
• text-decoration-color : Définit la couleur du trait de décoration (souligné, rayure...).
• text-emphasis-color : Définit la couleur des caractères de mise en exergue.

Syntaxes de la fonction color().

• color: color(a98-rgb 50% 30% 50%); cs a b c

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

  1. cs : 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, sont des valeurs sans unité ou des pourcentages. Elles définissent la couleur dans l'espace choisi.
     Pour les espaces colorimétriques dont le nom contient les lettres rgb, ces valeurs correspondent au rouge, au vert et au bleu.
     Les valeurs comprises entre 0 et 1 ou 0% et 100% sont incluses dans le gamut du périphérique de sortie (écran, imprimante). Les valeurs négatives ou supérieures à 1 (ou 100%) sont valides mais ne sont pas restituables par le périphérique considéré : elles seront traduites par la couleur la plus proche compatible avec le périphérique.

  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.
  7. xyz : espace colorimétrique défini par le CIE.
  8. xyz-d50 : variante de l'espace colorimétrique ci-dessus.
  9. xyz-d65 : autre variante.

  L'exemple ci-dessous montre bien l'importance de l'espace de couleurs. C'est la seule chose qui a changé entre le premier exemple et le deuxième.

  background:
color(srgb 10% 100% 10%);

  background:
color(srgb-linear 10% 100% 10%);
• color: color(--id 50% 30% 50%); ec a b c

  --id est le nom d'un espace de couleurs personnalisé. Cet identifiant doit commercer par un double tiret. Reportez-vous à la directive @color-profile pour la définition d'un espace personnalisé.

  Lorsqu'un espace de couleurs personnalisé est utilisé, les paramètres a, b et c inférieurs à 0 (0%) ou supérieurs à 1 (100%) sont ramenés à 0 ou 1.

• 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.

  background:
color(srgb 10% 100% 10% / 50%);
• 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. Dans le cas d'un espace de couleurs rgb il est possible d'utiliser les valeurs r, g et b pour représenter la couleur initiale et d'utiliser la fonction calc() pour modifier ces valeurs.

  Exemple. Avec le code ci-dessous, on obtient la couleur #9020a0.

  color(from #8040a0 srgb calc(r + 10) calc(g / 2) b;

  Sur cet exemple, on part de la couleur rouge et on fixe le bleu à 100% : on obtient un violet.

  background:
color(from red srgb r g 100%);

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.

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.

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 avec la fonction color().

Le simulateur permet de tester la prise en charge des différentes syntaxes, comme l'utilisation de pourcentages ou les couleurs relatives (le mot clé from).
Les valeurs de la deuxième série affichent la couleur résultante des mêmes paramètres dans des espaces colorimétriques différents.

Support de la fonction color().

Les fonctionnalités offertes par la fonction color() sont maintenant bien prises en charge par la plupart des navigateurs modernes.

1

Fonction
color()

2

Couleurs
relatives

Estimation de la prise en charge globale.

93%

87%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Edge

Chrome pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Historique de la fonction color().

• Module CSS - Couleurs - Niveau 4

  CSS prend maintenant en charge d'autres espaces de couleurs que le sRGB. La fonction color() est introduite pour satisfaire cette exigence.
  

  05 Juillet 2016

  Document de travail.

  

  05 Juillet 2022

  Candidat à la recommandation.

  

  

• Module CSS - Couleurs - Niveau 5

  Introduction des couleurs définies par rapport à une autre couleur. Évolution de la fonction color() pour traiter ces couleurs relatives.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi : autres notions relatives aux couleurs.

La norme du W3C relative aux couleurs est décrite dans le module CSS Color Module. Ces autres définitions sont rassemblées dans ce module :

Propriétés :

Fonctions :

Directives :

Descripteurs :