@color-profile

Résumé des caractéristiques de la directive `@color-profile`

Description rapide

Spécifie un profil colorimétrique qui pourra ensuite être utilisé par la fonction color().

Statut

Standard

Module W3C

Module CSS - Couleurs

Références (W3C)

CSS Color Module Level 5

Statut du document: WD (document de travail)

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-cmyk indique que cet espace est utilisable pour la conversion vers un périphérique cmyk (Cyan, Magenta, Yellow, Black);

Descripteurs pour `@color-profile`.

La directive @color-profile 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 src permet 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-intent dé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-intent accepte une des quatre valeurs ci-dessous :
- relative-colorimetric et absolute-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 components dé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 de components pourra ê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 components sera :

components: r, v, b;

`@color-profile` et Javascript.

Définir la directive `@color-profile` avec Javascript.

La directive @color-profile peut être définie avec un code Javascript. En voici un exemple :


	let oldStyle=document.getElementById('style1');
	try{document.head.removeChild(oldStyle);} catch(e){}
	
	const newStyle = document.createElement('style');
	newStyle.id='style1';
	newStyle.innerHTML = "@color-profile --demo {src: url('...'); rendering-intent:perceptual; components: a, b, c;}";
	document.head.appendChild(newStyle);

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.

Colonne 1

Support de la fonction color() et donc d'afficher des couleurs dans un espace colorimétrique autre que le sRGB.

Espaces
colorimétriques

Estimation de la prise en charge globale.

93%

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

Évolution de la directive `@color-profile`.

Module CSS - Couleurs - Niveau 5

Introduction de la directive @color-profile, en corrélation avec la prise en charge d'espaces colorimétriques différents de sRGB.

03 Mars 2020
Document de travail.

Voir aussi, concernant la gestion des couleurs.

Les spécifications CSS éditées par le W3C sont organisées en modules. La directive @color-profile fait partie du module "Module CSS - Couleurs" (CSS Color Module).
Les définitions suivantes sont également décrites dans ce même module.