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

css
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> ou <dashed-ident>) 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 exemple display-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 entre 0 et 1, ou un pourcentage (type <percentage>), où 1 correspond à 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

Voir aussi