color()
Baseline 2023
Newly available
Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La notation fonctionnelle color() permet d'exprimer une couleur dans un espace de couleur donné, plutôt que dans l'espace de couleur implicite sRGB, utilisé par la plupart des fonctions manipulant des couleurs.
La prise en charge d'un espace de couleur donné peut être détectée grâce à la caractéristique média color-gamut.
La règle @ @color-profile peut être utilisée afin de définir et de nommer un profil de couleur à utiliser dans la fonction color().
Syntaxe
color(display-p3 1 0.5 0)
color(display-p3 1 0.5 0 / .5)
Valeurs
color( <identifiant>? [ <number-percentage>+ | <string> ] [ / <alpha> ]?)-
[<ident> | <dashed-ident>]est un identifiant (type<ident>(en-US) ou<dashed-ident>(en-US)) indiquant l'espace de couleur. S'il s'agit d'une valeur de type<ident>, elle indique un des espaces de couleur prédéfini (par exempledisplay-p3). S'il s'agit d'une valeur de type<dashed-ident>, elle indique un espace de couleur personnalisé, défini via une règle@color-profile.[ <number-percentage>+ | <string> ]indique un ou plusieurs nombres (type<number>) ou pourcentages (type<percentage>) fournissant les valeurs que prend l'espace de couleur en entrée, ou une chaîne de caractères (type<string>) indiquant le nom d'une couleur définie dans l'espace de couleur./ <alpha>peut être un nombre (type<number>) compris entre0et1, ou un pourcentage (type<percentage>), où1correspond à100%(opacité complète).
Spécifications
| Specification |
|---|
| CSS Color Module Level 5 # color-function |
| CSS Color Module Level 5 # relative-color-function |
| CSS Color Module Level 4 # color-function |
Compatibilité des navigateurs
BCD tables only load in the browser