Skip to content

Commit c2c5f8a

Browse files
tristanthebtristantheb
authored
fr: update Web/CSS/color_value/color (#29768)
updt(l10n): update of `Web/CSS/color_value/color`
1 parent 7937fbc commit c2c5f8a

File tree

1 file changed

+355
-14
lines changed
  • files/fr/web/css/color_value/color

1 file changed

+355
-14
lines changed

‎files/fr/web/css/color_value/color/index.md‎

Lines changed: 355 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,367 @@
22
title: color()
33
slug: Web/CSS/color_value/color
44
l10n:
5-
sourceCommit: 78a78cb2c94a5fd970fef00d4629c40c0b9437b7
5+
sourceCommit: a6d1fd388b053e6fc6ce21003348f34d0ef8115f
66
---
77

8-
{{CSSRef}}{{SeeCompatTable}}
8+
La [fonction de type `<color>`](/fr/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#les_fonctions_de_couleur) [CSS](/fr/docs/Web/CSS) **`color()`** permet de définir une couleur dans un {{Glossary("color space", "espace colorimétrique")}} particulier, au lieu de l'espace colorimétrique sRGB implicite utilisé par la plupart des autres fonctions de couleur.
99

10-
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.
11-
12-
La prise en charge d'un espace de couleur donné peut être détectée grâce à la caractéristique média [`color-gamut`](/fr/docs/Web/CSS/@media/color-gamut).
13-
14-
La [règle @](/fr/docs/Web/CSS/CSS_syntax/At-rule) [`@color-profile`](/fr/docs/Web/CSS/@color-profile) peut être utilisée afin de définir et de nommer un profil de couleur à utiliser dans la fonction `color()`.
10+
Vous pouvez détecter la prise en charge d'un espace colorimétrique particulier avec la fonctionnalité média CSS [`color-gamut`](/fr/docs/Web/CSS/@media/color-gamut).
1511

1612
## Syntaxe
1713

1814
```css
19-
color(display-p3 1 0.5 0)
20-
color(display-p3 1 0.5 0 / .5)
15+
/* Valeurs absolues */
16+
color(display-p3 1 0.5 0);
17+
color(display-p3 1 0.5 0 / .5);
18+
19+
/* Valeurs relatives */
20+
color(from green srgb r g b / 0.5)
21+
color(from #123456 xyz calc(x + 0.75) y calc(z - 0.35))
2122
```
2223

2324
### Valeurs
2425

25-
- `color( <identifiant>? [ <number-percentage>+ | <string> ] [ / <alpha> ]?)`
26-
- : `[<ident> | <dashed-ident>]` est un identifiant (type [`<ident>`](/fr/docs/Web/CSS/ident) ou [`<dashed-ident>`](/fr/docs/Web/CSS/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`](/fr/docs/Web/CSS/@color-profile).
26+
Vous trouverez ci-dessous la description des valeurs autorisées pour les couleurs absolues et [relatives](/fr/docs/Web/CSS/CSS_colors/Relative_colors).
27+
28+
#### Syntaxe de valeur absolue
29+
30+
```plain
31+
color(colorspace c1 c2 c3[ / A])
32+
```
33+
34+
Les paramètres sont les suivants&nbsp;:
35+
36+
- `colorspace`
37+
- : Un {{CSSXref("&lt;ident&gt;")}} indiquant un des espaces colorimétriques prédéfinis&nbsp;: `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `xyz`, `xyz-d50` ou `xyz-d65`.
38+
39+
- `c1`, `c2`, `c3`
40+
- : Chaque valeur peut être écrite comme un nombre ({{CSSXref("number")}}), un pourcentage ({{CSSXref("percentage")}}), ou le mot-clé `none` (équivalent à `0` dans ce cas). Ces valeurs représentent les composantes pour l'espace colorimétrique. Avec une valeur `<number>`, généralement, `0` à `1` représente les bornes de l'espace colorimétrique. Les valeurs hors de cette plage sont autorisées mais seront hors du {{Glossary("gamut")}} de l'espace colorimétrique donné. Avec une valeur en pourcentage, `100%` représente `1` et `0%` représente `0`.
41+
42+
- `A` {{optional_inline}}
43+
- : Une valeur {{CSSXref("&lt;alpha-value&gt;")}} représentant la valeur du canal alpha de la couleur, où le nombre `0` correspond à `0%` (totalement transparent) et `1` à `100%` (totalement opaque). Le mot-clé `none` peut aussi être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canal `A` n'est pas précisée, elle vaut par défaut 100%. Si elle est présente, elle est précédée d'un slash (`/`).
44+
45+
> [!NOTE]
46+
> Voir les [Composantes de couleur manquantes](#composantes_de_couleur_manquantes) pour plus d'informations sur l'effet de `none`.
47+
48+
#### Syntaxe de valeur relative
49+
50+
```plain
51+
color(from <color> colorspace c1 c2 c3[ / A])
52+
```
53+
54+
Les paramètres sont les suivants&nbsp;:
55+
56+
- `from <color>`
57+
- : Le mot-clé `from` est toujours présent lors de la définition d'une couleur relative, suivi d'une valeur {{cssxref("&lt;color&gt;")}} représentant la **couleur d'origine**. Il s'agit de la couleur de base sur laquelle la couleur relative est fondée. La couleur d'origine peut être n'importe quelle syntaxe {{cssxref("&lt;color&gt;")}} valide, y compris une autre couleur relative.
58+
- `colorspace`
59+
- : Un {{CSSXref("&lt;ident&gt;")}} indiquant l'{{Glossary("color space", "espace colorimétrique")}} de la couleur de sortie, généralement un des espaces prédéfinis&nbsp;: `srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`, `xyz`, `xyz-d50` ou `xyz-d65`.
60+
- `c1`, `c2`, `c3`
61+
- : Chaque valeur peut être écrite comme un nombre ({{CSSXref("number")}}), un pourcentage ({{CSSXref("percentage")}}), ou le mot-clé `none` (équivalent à `0` dans ce cas). Ces valeurs représentent les composantes de la couleur de sortie. Avec une valeur `<number>`, généralement `0` à `1` représente les bornes de l'espace colorimétrique. Les valeurs hors de cette plage sont autorisées mais seront hors du {{Glossary("gamut")}} de l'espace colorimétrique donné. Avec une valeur en pourcentage, `100%` représente `1` et `0%` représente `0`.
62+
- `A` {{optional_inline}}
63+
- : Un {{CSSXref("&lt;alpha-value&gt;")}} représentant la valeur du canal alpha de la couleur de sortie, où `0` correspond à `0%` (totalement transparent) et `1` à `100%` (totalement opaque). Le mot-clé `none` peut aussi être utilisé pour indiquer explicitement l'absence de canal alpha. Si la valeur du canal `A` n'est pas précisée, elle prend la valeur du canal alpha de la couleur d'origine. Si elle est présente, elle est précédée d'un slash (`/`).
64+
65+
#### Définir les composantes de sortie d'une couleur relative
66+
67+
Quand vous utilisez la syntaxe relative dans `color()`, le navigateur convertit la couleur d'origine dans l'espace colorimétrique définit (si ce n'est pas déjà le cas). La couleur est définie par trois valeurs de canaux de couleur distincts plus une valeur de canal alpha (`alpha`). Ces valeurs sont disponibles dans la fonction pour définir les composantes de la couleur de sortie&nbsp;:
68+
69+
- Les trois valeurs de canaux de la couleur d'origine sont résolues en `<number>`. Selon l'espace colorimétrique, elles seront&nbsp;:
70+
- `r`, `g`, `b`&nbsp;: pour les espaces colorimétriques RGB (`srgb`, `srgb-linear`, `display-p3`, `a98-rgb`, `prophoto-rgb`, `rec2020`)
71+
- `x`, `y`, `z`&nbsp;: pour les espaces XYZ (`xyz`, `xyz-d50`, `xyz-d65`)
72+
73+
> [!NOTE]
74+
> Ces valeurs sont généralement comprises entre `0` et `1` mais peuvent être hors de cette plage.
75+
76+
> [!NOTE]
77+
> Référencer `r`, `g`, `b` dans un espace XYZ, ou `x`, `y`, `z` dans un espace RGB, ou tout autre caractère, est invalide. Les canaux disponibles doivent correspondre au type d'espace colorimétrique définit.
78+
79+
- `alpha`&nbsp;: la valeur de transparence, résolue en `<number>` entre `0` et `1` inclus.
80+
81+
Pour définir une couleur relative, les différents canaux de la couleur de sortie peuvent être exprimés de plusieurs façons. Voici quelques exemples&nbsp;:
82+
83+
Dans les deux premiers exemples ci-dessous, nous utilisons la syntaxe de couleur relative. Cependant, le premier retourne la même couleur que la couleur d'origine et le second retourne une couleur qui n'est pas basée sur la couleur d'origine. Ils ne créent pas vraiment de couleurs relatives ! Il est peu probable que vous utilisiez ces exemples dans une base de code réelle, et vous utiliseriez probablement simplement une valeur de couleur absolue à la place. Nous avons inclus ces exemples comme point de départ pour apprendre la syntaxe relative de `color()`.
84+
85+
Commençons avec une couleur d'origine `hsl(0 100% 50%)` (équivalent à `red`). Bien qu'il soit peu probable que vous écriviez les fonctions suivantes car elles retournent la même couleur que la couleur d'origine, cela montre comment utiliser les valeurs de canal de la couleur d'origine comme valeurs de canal de sortie&nbsp;:
86+
87+
```css
88+
color(from hsl(0 100% 50%) srgb r g b)
89+
color(from hsl(0 100% 50%) xyz x y z)
90+
```
91+
92+
Les couleurs de sortie de ces fonctions sont respectivement `color(srgb 1 0 0)` et `color(xyz-d65 0.412426 0.212648 0.0193173)`.
93+
94+
Les fonctions suivantes utilisent des valeurs absolues pour les canaux de sortie, produisant des couleurs différentes de la couleur d'origine&nbsp;:
95+
96+
```css
97+
color(from hsl(0 100% 50%) srgb 0.749938 0 0.609579)
98+
/* Couleur calculée : color(srgb 0.749938 0 0.609579) */
99+
100+
color(from hsl(0 100% 50%) xyz 0.75 0.6554 0.1)
101+
/* Couleur calculée : color(xyz-d65 0.75 0.6554 0.1) */
102+
```
103+
104+
Les fonctions suivantes utilisent deux des valeurs de canal de couleur d'origine pour les valeurs de canal de couleur de sortie (`r` et `b`, et `x` et `y`, respectivement), mais utilisent une nouvelle valeur pour l'autre valeur de canal de sortie (`g` et `z`, respectivement), créant une couleur relative basée sur la couleur d'origine dans chaque cas&nbsp;:
105+
106+
```css
107+
color(from hsl(0 100% 50%) srgb r 1 b)
108+
/* Couleur calculée : color(srgb 1 1 0) */
109+
110+
color(from hsl(0 100% 50%) xyz x y 0.5)
111+
/* Couleur calculée : color(xyz-d65 0.412426 0.212648 0.5) */
112+
```
113+
114+
> [!NOTE]
115+
> Si le modèle de couleur de sortie diffère de celui de la couleur d'origine, la couleur d'origine est convertie en interne pour correspondre au modèle de sortie (mêmes canaux). Par exemple, la couleur {{cssxref("color_value/hsl", "hsl()")}} `hsl(0 100% 50%)` est convertie en `color(srgb 1 0 0)` dans le premier cas et `color(xyz 0.412426 0.212648 0.5)` dans le second.
116+
117+
Dans les exemples que nous avons vus jusqu'à présent dans cette section, les canaux alpha n'ont pas été explicitement spécifiés pour les couleurs d'origine ou de sortie. Lorsque le canal alpha de la couleur de sortie n'est pas spécifié, il prend la même valeur que le canal alpha de la couleur d'origine. Lorsque le canal alpha de la couleur d'origine n'est pas spécifié (et qu'il ne s'agit pas d'une couleur relative), il prend la valeur `1`. Par conséquent, les valeurs du canal alpha d'origine et de sortie sont `1` pour les exemples ci-dessus.
118+
119+
Voyons quelques exemples qui spécifient les valeurs du canal alpha d'origine et de sortie. Le premier spécifie que la valeur du canal alpha de sortie est la même que la valeur du canal alpha d'origine, tandis que le second spécifie une valeur différente du canal alpha de sortie, sans rapport avec la valeur du canal alpha d'origine.
120+
121+
```css
122+
color(from hsl(0 100% 50% / 0.8) srgb r g b / alpha)
123+
/* Couleur calculée : color(srgb 1 0 0 / 0.8) */
124+
125+
color(from hsl(0 100% 50% / 0.8) xyz x y z / 0.5)
126+
/* Couleur calculée : color(xyz-d65 0.412426 0.212648 0.0193173 / 0.5) */
127+
```
128+
129+
Les exemples suivants utilisent les fonctions {{cssxref("calc")}} pour calculer de nouvelles valeurs de canal pour les couleurs de sortie qui sont relatives aux valeurs de canal de couleur d'origine.
130+
131+
```css
132+
color(from hsl(0 100% 50%) srgb calc(r - 0.4) calc(g + 0.1) calc(b + 0.6) / calc(alpha - 0.1))
133+
/* Couleur calculée : color(srgb 0.6 0.1 0.6 / 0.9) */
134+
135+
color(from hsl(0 100% 50%) xyz calc(x - 0.3) calc(y + 0.3) calc(z + 0.3) / calc(alpha - 0.1))
136+
/* Couleur calculée : color(xyz-d65 0.112426 0.512648 0.319317 / 0.9) */
137+
```
138+
139+
> [!NOTE]
140+
> Parce que les valeurs de canal de couleur d'origine sont résolues en valeurs `<number>`, vous devez leur ajouter des nombres lorsque vous les utilisez dans des calculs, même dans les cas où un canal accepterait normalement `<percentage>`, `<angle>`, ou d'autres types de valeurs. Ajouter un `<percentage>` à un `<number>`, par exemple, ne fonctionne pas.
141+
142+
## Syntaxe formelle
143+
144+
{{CSSSyntax}}
145+
146+
## Exemples
147+
148+
### Utiliser les espaces colorimétriques prédéfinis avec `color()`
149+
150+
L'exemple suivant montre l'effet de la variation des valeurs de luminosité, d'axe a et d'axe b de la fonction `color()`.
151+
152+
#### HTML
153+
154+
```html
155+
<div data-color="red-a98-rgb"></div>
156+
<div data-color="red-prophoto-rgb"></div>
157+
<div data-color="green-srgb-linear"></div>
158+
<div data-color="green-display-p3"></div>
159+
<div data-color="blue-rec2020"></div>
160+
<div data-color="blue-srgb"></div>
161+
```
162+
163+
#### CSS
164+
165+
```css hidden
166+
div {
167+
width: 50px;
168+
height: 50px;
169+
padding: 5px;
170+
margin: 5px;
171+
display: inline-block;
172+
border: 1px solid black;
173+
}
174+
```
175+
176+
```css
177+
[data-color="red-a98-rgb"] {
178+
background-color: color(a98-rgb 1 0 0);
179+
}
180+
[data-color="red-prophoto-rgb"] {
181+
background-color: color(prophoto-rgb 1 0 0);
182+
}
183+
[data-color="green-srgb-linear"] {
184+
background-color: color(srgb-linear 0 1 0);
185+
}
186+
[data-color="green-display-p3"] {
187+
background-color: color(display-p3 0 1 0);
188+
}
189+
[data-color="blue-rec2020"] {
190+
background-color: color(rec2020 0 0 1);
191+
}
192+
[data-color="blue-srgb"] {
193+
background-color: color(srgb 0 0 1);
194+
}
195+
```
196+
197+
#### Résultat
198+
199+
{{EmbedLiveSample("utiliser_les_espaces_colorimétriques_prédéfinis_avec_color")}}
200+
201+
### Utiliser l'espace colorimétrique xyz avec `color()`
202+
203+
L'exemple suivant montre comment utiliser l'espace colorimétrique `xyz` pour définir une couleur.
204+
205+
#### HTML
206+
207+
```html
208+
<div data-color="red"></div>
209+
<div data-color="green"></div>
210+
<div data-color="blue"></div>
211+
```
212+
213+
#### CSS
214+
215+
```css hidden
216+
div {
217+
width: 50px;
218+
height: 50px;
219+
padding: 5px;
220+
margin: 5px;
221+
display: inline-block;
222+
border: 1px solid black;
223+
}
224+
```
225+
226+
```css
227+
[data-color="red"] {
228+
background-color: color(xyz 45 20 0);
229+
}
230+
231+
[data-color="green"] {
232+
background-color: color(xyz-d50 0.3 80 0.3);
233+
}
234+
235+
[data-color="blue"] {
236+
background-color: color(xyz-d65 5 0 50);
237+
}
238+
```
239+
240+
#### Résultat
241+
242+
{{EmbedLiveSample("utiliser_lespace_colorimétrique_xyz_avec_color")}}
243+
244+
### Utiliser les media queries `color-gamut` avec `color()`
245+
246+
Cet exemple montre comment utiliser la media query [`color-gamut`](/fr/docs/Web/CSS/@media/color-gamut) pour détecter la prise en charge d'un espace colorimétrique et l'utiliser pour définir une couleur.
247+
248+
#### HTML
249+
250+
```html
251+
<div></div>
252+
<div></div>
253+
<div></div>
254+
```
255+
256+
#### CSS
257+
258+
```css hidden
259+
div {
260+
width: 50px;
261+
height: 50px;
262+
padding: 5px;
263+
margin: 5px;
264+
display: inline-block;
265+
border: 1px solid black;
266+
}
267+
```
268+
269+
```css
270+
@media (color-gamut: p3) {
271+
div {
272+
background-color: color(display-p3 1 0 0);
273+
}
274+
}
275+
276+
@media (color-gamut: srgb) {
277+
div:nth-child(2) {
278+
background-color: color(srgb 1 0 0);
279+
}
280+
}
281+
282+
@media (color-gamut: rec2020) {
283+
div:nth-child(3) {
284+
background-color: color(rec2020 1 0 0);
285+
}
286+
}
287+
```
288+
289+
#### Résultat
290+
291+
{{EmbedLiveSample("utiliser_les_media_queries_color-gamut_avec_color")}}
292+
293+
### Utiliser les couleurs relatives avec `color()`
294+
295+
Cet exemple applique trois couleurs de fond différentes à des éléments {{htmlelement("div")}}. Celui du milieu utilise la couleur `--base-color` telle quelle, tandis que les deux autres utilisent des variantes éclaircies et assombries de cette couleur, définies avec des couleurs relatives.
296+
297+
Les variantes sont définies en passant la propriété personnalisée [--base-color](/fr/docs/Web/CSS/--*) à la fonction `color()`, puis en modifiant les canaux `g` et `b` via `calc()`. La couleur éclaircie ajoute 15% à ces canaux, la couleur assombrie en retire 15%.
298+
299+
```html hidden
300+
<div id="container">
301+
<div class="item" id="one"></div>
302+
<div class="item" id="two"></div>
303+
<div class="item" id="three"></div>
304+
</div>
305+
```
306+
307+
#### CSS
308+
309+
```css hidden
310+
#container {
311+
display: flex;
312+
width: 100vw;
313+
height: 100vh;
314+
box-sizing: border-box;
315+
}
316+
317+
.item {
318+
flex: 1;
319+
margin: 20px;
320+
}
321+
```
322+
323+
```css
324+
:root {
325+
--base-color: orange;
326+
}
327+
328+
#one {
329+
background-color: color(
330+
from var(--base-color) display-p3 r calc(g + 0.15) calc(b + 0.15)
331+
);
332+
}
333+
334+
#two {
335+
background-color: var(--base-color);
336+
}
337+
338+
#three {
339+
background-color: color(
340+
from var(--base-color) display-p3 r calc(g - 0.15) calc(b - 0.15)
341+
);
342+
}
343+
344+
/* Utiliser @supports pour l'ancienne syntaxe qui exige les valeurs r g b en pourcentage (avec unités) dans les calculs.
345+
Requis pour Safari 16.4+ */
346+
@supports (color: color(from red display-p3 r g calc(b + 30%))) {
347+
#one {
348+
background-color: color(
349+
from var(--base-color) display-p3 r calc(g + 15%) calc(b + 15%)
350+
);
351+
}
352+
353+
#three {
354+
background-color: color(
355+
from var(--base-color) display-p3 r calc(g - 15%) calc(b - 15%)
356+
);
357+
}
358+
}
359+
```
360+
361+
#### Résultat
27362

28-
`[ <number-percentage>+ | <string> ]` indique un ou plusieurs nombres (type [`<number>`](/fr/docs/Web/CSS/number)) ou pourcentages (type [`<percentage>`](/fr/docs/Web/CSS/percentage)) fournissant les valeurs que prend l'espace de couleur en entrée, ou une chaîne de caractères (type [`<string>`](/fr/docs/Web/CSS/string)) indiquant le nom d'une couleur définie dans l'espace de couleur.
363+
Le résultat est le suivant&nbsp;:
29364

30-
`/ <alpha>` peut être un nombre (type [`<number>`](/fr/docs/Web/CSS/number)) compris entre `0` et `1`, ou un pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)), où `1` correspond à `100%` (opacité complète).
365+
{{ EmbedLiveSample("utiliser_les_couleurs_relatives_avec_color", "100%", "200") }}
31366

32367
## Spécifications
33368

@@ -39,4 +374,10 @@ color(display-p3 1 0.5 0 / .5)
39374

40375
## Voir aussi
41376

42-
- [Larges gamuts en CSS avec Display-p3](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/)
377+
- La propriété {{CSSXref("color")}}
378+
- [Le type de donnée `<color>`](/fr/docs/Web/CSS/color_value) pour la liste de toutes les notations de couleur
379+
- [Utiliser les couleurs relatives](/fr/docs/Web/CSS/CSS_colors/Relative_colors)
380+
- [Outil de conversion de format de couleur](/fr/docs/Web/CSS/CSS_colors/Color_format_converter)
381+
- [Module des couleurs CSS](/fr/docs/Web/CSS/CSS_colors)
382+
- Fonctionnalité média [`color-gamut`](/fr/docs/Web/CSS/@media/color-gamut)
383+
- [Large gamme de couleurs en CSS avec Display-p3 <sup>(angl.)</sup>](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/)

0 commit comments

Comments
 (0)