@color-profile - Directive CSS
Résumé des caractéristiques de la directive @color-profile
color().Description de la directive @color-profile.
La directive @color-profile permet de définir un profil colorimétrique personnalisé et de lui attribuer un nom. Celui-ci pourra être utilisé
avec la fonction color().
Exemple d'utilisation : définition d'un profil colorimétrique nommé --nomprofil dont les couleurs seront définies par trois valeurs
désignées symboliquement par a, b et c.
@color-profile --nomprofil {
src: url('...');
rendering-intent:perceptual;
components: a, b, c;
}
Utilisation de ce profil personnalisé pour spécifier une couleur d'arrière-plan:
#item {
background-color: color(--nomprofil 15% 20% 90%);
}
Pour plus de précisions, vous pouvez vous reportez à la page sur la fonction color() et à notre tutoriel sur les espaces de couleurs.
Syntaxe générale.
- @color-profile --nomprofil { ...; }
Cette syntaxe définit le nom pour l'espace de couleurs personnalisé. Ce nom doit commencer par un double tiret.
- @color-profile device-cmyk { ...; }
Le mot clé
device-cmykindique que cet espace est utilisable pour la conversion vers un périphériquecmyk(Cyan, Magenta, Yellow, Black);
Descripteurs pour @color-profile.
La directive accepte les descripteurs suivants :
- src : chemin et nom du fichier descripteur du profil.
- rendering-intent : méthode pour convertir un profil vers un autre.
- components : liste des valeurs nécessaires pour définir une couleur dans ce profil.
- @color-profile: --id { src:url('chemin/profil.icc'); ... }
Le descripteur
srcpermet de spécifier le chemin et le nom du fichier décrivant le profil colorimétrique. - @color-profile: --id { rendering-intent: relative-colorimetric; ... }
Le descripteur
rendering-intentdéfinit comment doivent être converties les couleurs lors du passage d'un espace de couleurs à un autre en général plus petit. Une conversion est nécessaire par exemple pour afficher une image sur un écran dont le gamut est plus restreint que l'espace de couleurs dans laquelle l'image est définie.rendering-intentaccepte une des quatre valeurs ci-dessous :relative-colorimetricetabsolute-colorimetric: les couleurs incluses dans l'espace de destination sont inchangées. Les couleurs hors de l'espace de destination sont converties. Ces deux méthodes offrent l'avantage d'une représentation non altérées des couleurs qui sont incluses dans l'espace colorimétrique de destination, mais peut entraîner un écrêtage des couleurs les plus vives situées en dehors de l'espace de destination.perceptual: toutes les couleurs sont converties afin que les couleurs les plus éloignées de l'espace de destination soient représentables, tout en conservant des nuances entre les couleurs. Cette méthode est celle qui donne la perception la plus naturelle des couleurs dans l'espace de destination.saturation: les couleurs sont converties de façon à être incluses dans l'espace colorimétrique de destination tout en conservant leur saturation.
- @color-profile: --id { components: a, b, c; ... }
Le descripteur
componentsdéfinit le nombre et les noms symboliques des valeurs nécessaires pour définir une couleur dans ce profil colorimétrique.
Par exemple un profil d'imprimerie nécessite généralement quatre quatre valeurs pour spécifier une couleur. Ces quatre valeurs sont le cyan, le magenta, le jaune et le noir. dans ce cas, l'écriture decomponentspourra être :components: c, m, j, n;Un profil classique en synthèse additive (pour un écran par exemple) nécessite trois valeurs pour définir une couleur (souvent le rouge, le vert et le bleu). Dans ce cas, le descripteur
componentssera :components: r, v, b;
Prise en charge par les navigateurs (compatibilité).
Les espaces colorimétriques autres que le sRGB commencent à être bien pris en charge par les navigateurs actuels.
Le tableau ci-dessous n'est pas spécifique à la directive @color-profile mais indique plutôt la prise en charge générale des
espaces colorimétriques.
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
UC Browser pour Androïd
Oméra mini
Voir aussi, dans le même module de standardisation que @color-profile.
Les spécifications CIE éditées par le W3C sont organisées en modules. @color-profile 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.
sRGB.L*a*b*.L*C*H*.L*a*b* avec une correction perceptive.L*C*H* avec une correction perceptive.