color() - Fonction CSS
Résumé des caractéristiques de la fonction color()
sRGB
.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 :
accent-color
: Définit la couleur des élément actifs, cochés.background-color
: Définit la couleur de l'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 lignes de séparation de colonnes.outline-color
: Définit la couleur de l'encadrement (outline).scrollbar-color
: Définit deux couleurs qui seront appliquées sur les barres de défilement.text-decoration-color
: Définit la couleur du trait de décoration.text-emphasis-color
: Définit la couleur des caractères de mise en exergue.
Syntaxe de color()
.
color
est une couleur de référence éventuelle, introduite par le motfrom
.colorspace
est le nom d'un espace de couleurs personnalisé.a
,b
etc
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.
- color: color(a98-rgb 50% 30% 50%); ec a b c
La fonction
color()
attend quatre paramètres au minimum, tous obligatoires :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
.a
,b
,c
, : des valeurs sans unité comprises entre0
et1
ou des pourcentages compris entre0%
et100%
. 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 parxyz
.
Les espaces de couleurs prédéfinis sont :
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.)srgb-linear
a la même étendue que l'espacesrgb
mais ne fait pas intervenir la fonction gamma.display-p3
.a98-rgb
.prophoto-rgb
.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ètresa
,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.
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.
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.
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.
color()
et donc possibilité d'afficher des couleurs dans un espace colorimétrique différent
de srgb
.
from
de la fonction color()
}.
color()
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.
Fonctions.
L*a*b*
.L*C*H*
.L*a*b*
avec une correction perceptive.L*C*H*
avec une correction perceptive.Directives.
color()
.