recursal/MDN huggingface dataset:
hsl()
=====

La notation fonctionnelle **`hsl()`** exprime une couleur sRGB selon ses composantes de *teinte* (*hue* en anglais), *saturation*, et *luminosité*. Une composante *alpha* optionnelle représente l'opacité de la couleur.

Exemple interactif
------------------

Il est facile d'utiliser des *couleurs complémentaires* avec `hsl()`, car celles-ci sont positionnées à l'opposé du cercle de couleur utilisé par la teinte. Ainsi, si `theta` est l'angle de la teinte d'une couleur, on pourra obtenir la couleur complémentaire avec l'angle `180deg-theta`.

Syntaxe
-------


```css
/\* Séparation des arguments par des espaces \*/
hsl(teinte saturation luminosite)
hsl(teinte saturation luminosite / alpha)

/\* Séparation des valeurs par des virgules \*/
hsl(teinte, saturation, luminosite)
hsl(teinte, saturation, luminosite, alpha)
```

### Valeurs

`teinte`

Un angle (type `<angle>`) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on a `red=0deg=360deg`, et les autres couleurs distribuées sur le cercle avec `green=120deg`, `blue=240deg`, etc. Sa valeur étant un `<angle>`, elle boucle sur elle-même et on a donc `-120deg=240deg`, `480deg=120deg`, `-1turn=1turn`, etc. Ce cercle chromatique pourra vous aider à trouver l'angle associé à une couleur donnée : 
 ![Un cercle chromatique indiquant l'angle de la teinte pour les couleurs primaires (rouge-vert-bleu) et secondaires (jaune-cyan-magenta).](/fr/docs/Web/CSS/color_value/hsl/hue-wheel.png)

`saturation`

Un pourcentage (type `<percentage>`) où `100%` indique une couleur complètement saturée et où `0%` indique une couleur complètement désaturée, c'est-à-dire un niveau de gris.

`luminosite`

Un pourcentage (type `<percentage>`) où `100%` fournit du blanc, où `0%` fournit du noir, et où `50%` fournit une couleur « normale ».

`alpha` Facultatif

`A` (alpha) peut être un nombre (type `<number>`) compris entre `0` et `1`, ou un pourcentage (type `<percentage>`), où `1` correspond à `100%` (opacité complète) et `0` à `0%` (transparence complète).

Exemples
--------

La fonction `hsl()` fonctionne bien avec la fonction `conic-gradient()`, les deux travaillant avec des angles.
```

<div></div>
```



```css
div {
  width: 100px;
  height: 100px;
  background: conic-gradient(
    hsl(360, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(0, 100%, 50%)
  );
  clip-path: circle(closest-side);
}
```

Spécifications
--------------

| Specification |
| --- |
| CSS Color Module Level 4 # the-hsl-notation |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La fonction `hsla()`, un synonyme historique pour cette fonction.
* Le type `<color>` qui permet de représenter n'importe quelle couleur en CSS.
* Un sélecteur de couleur HSL
device-cmyk()
=============

La notation fonctionnelle **`device-cmyk()`** permet d'exprimer des couleurs dans l'espace de couleurs CMJN (CMYK en anglais), en indiquant les composantes de cyan, de magenta, de jaune et de noir.

Cette approche colorimétrique peut s'avérer utile afin de créer des supports destinés à être imprimés sur une imprimante particulière, lorsque la sortie pour des combinaisons d'encres données est connue. Le moteur CSS peut tenter une approximation de la couleur, mais le résultat sera probablement différent de ce qui sera imprimé.

Syntaxe
-------


```css
device-cmyk(0 81% 81% 30%)
device-cmyk(0 81% 81% 30% / .5)
device-cmyk(0 81% 81% 30% / .5, rgb(178 34 34))
```

### Valeurs

`device-cmyk( <composante-cmjn>{4} [ / <alpha> ]? , <couleur>? )`

`<composante-cmjn>` est une liste de 4 valeurs numériques (type `<number>`) ou pourcentages (type `<percentage>`) qui indiquent respectivement les composantes cyan, magenta, jaune et noire de la 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).

`<couleur>` est une couleur alternative (type `<color>`) à utiliser si l'agent utilisateur ne sait pas comment passer de la couleur CMJN à la couleur RGB.

Spécifications
--------------

| Specification |
| --- |
| CSS Color Module Level 5 # device-cmyk |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
hwb()
=====

La notation fonctionnelle **`hwb()`** exprime une couleur donnée selon sa teinte, sa blancheur et sa noirceur. Une composante alpha optionnelle représente l'opacité de la couleur.

Exemple interactif
------------------

Syntaxe
-------


```css
hwb(194 0% 0%) /\* #00c3ff \*/
hwb(194 0% 0% / .5) /\* #00c3ff avec 50% d'opacité \*/
```

### Valeurs

**Note :** La fonction `hwb()` **n'utilise pas** de virgule pour séparer les valeurs des arguments, et la valeur alpha optionnelle doit être précédée d'une barre oblique (`/`) si elle est fournie.

`hwb(H W B[ / A])`

`H` (teinte, *hue* en anglais) est un angle (type `<angle>`) sur le cercle des couleurs. Lorsqu'il est écrit sans unité, il est interprété comme étant exprimé en degré. Par définition, on a `red=0deg=360deg`, et les autres couleurs distribuées sur le cercle avec `green=120deg`, `blue=240deg`, etc. Sa valeur étant un `<angle>`, elle boucle sur elle-même et on a donc `-120deg=240deg`, `480deg=120deg`, `-1turn=1turn`, etc.

`W` (blancheur, *whiteness* en anglais) indique la quantité de blanc dans la couleur, indiquée comme un pourcentage (type `<percentage>`), où `0%` indique aucune blancheur et où `100%` indique une blancheur complète.

`B` (noirceur, *blackness*) indique la quantité de noir dans la couleur, indiquée comme un pourcentage (type `<percentage>`), où `0%` indique aucune noirceur et où `100%` indique une noirceur complète.

`A` (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 4 # the-hwb-notation |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
lab()
=====

**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 **`lab()`** exprime une couleur donnée dans l'espace de couleur CIE L\*a\*b\*, qui représente l'intégralité des couleurs perceptibles par l'œil humain.

Syntaxe
-------


```css
lab(29.2345% 39.3825 20.0664)
lab(52.2345% 40.1645 59.9971)
lab(52.2345% 40.1645 59.9971 / .5)
```

### Valeurs

`lab(L a b [/ A])`

`L` indique la luminosité CIE sous la forme d'un pourcentage (type `<percentage>`) compris entre `0%`, pour le noir, et `100%`, pour le blanc.

Le deuxième argument, `a`, indique la distance sur l'axe `a` de l'espace de couleur Lab.

Le troisième argument, `b`, indique la distance sur l'axe `b` de l'espace de couleur Lab.

`A` (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 4 # lab-colors |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les couleurs LCH en CSS : qu'est-ce que c'est, pourquoi et comment ?
* Notes de version pour Safari Technology Preview 122 mentionnant `lab()` et `lch()`
color-mix()
===========

**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-mix()`** prend deux couleurs (deux valeurs de type `<color>`) et renvoie le résultat de leur mélange selon des proportions données, dans un espace de couleur donné.

Syntaxe
-------


```css
color-mix(in lch, peru 40%, lightgoldenrod)
color-mix(in srgb, #34c9eb 20%, white)
```

### Valeurs

`color-mix( in <espace-couleur> , [ <couleur> && <proportion>? ]#{2})`

`<espace-couleur>` est une valeur parmi `srgb`, `srgb-linear`, `lab`, `oklab`, `xyz`, `xyz-d50`, `xyz-d65`, `hsl`, `hwb`, `lch`, `oklch`. Il n'y a pas de valeur par défaut.

`<couleur>` est n'importe quelle couleur valide (voir `<color>`).

`<proportion>` est un pourcentage (type `<percentage>`) indiquant la proportion de la couleur dans le mélange.

Exemples
--------

### HTML


```html
<ul>
  <li>10% #34c9eb</li>
  <li>40% #34c9eb</li>
  <li>70% #34c9eb</li>
</ul>
```

### CSS
```

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid #34c9eb;
  padding: 10px;
}

li {
  padding: 10px;
}
```



```css
li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 10%, white);
}

li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 40%, white);
}

li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 70%, white);
}
```

### Résultat

Dans un navigateur qui prend en charge cette fonctionnalité, les trois carrés sont de plus en plus bleus, car la proportion de `#34c9eb` dans le mélange augmente.

Spécifications
--------------

| Specification |
| --- |
| CSS Color Module Level 5 # color-mix |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
color-contrast()
================

**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-contrast()`** prend une couleur et la compare à une liste d'autres couleurs (voir `<color>` pour les valeurs possibles) afin de sélectionner la valeur de la liste qui offre le contraste le plus important avec la première couleur.

Syntaxe
-------


```css
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)
```

### Valeurs

`color-contrast( <couleur> vs <couleur>#{2,} )`

`<couleur>` est une valeur de type `<color>`.

`<couleur>#{2,}` est une liste de couleurs (type `<color>`) séparées par des virgules, à comparer à la première.

Spécifications
--------------

| Specification |
| --- |
| CSS Color Module Level 6 # colorcontrast |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
oklch()
=======

**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 **`oklch()`** exprime une couleur donnée dans l'espace de couleur OKLCH. Cet espace utilise le même axe L (luminosité) que `oklab()`, mais utilise des coordonnées polaires C (chroma) et H (pour la teinte, *hue* en anglais).

Syntaxe
-------


```css
oklch(40.1% 0.123 21.57)
oklch(59.69% 0.156 49.77)
oklch(59.69% 0.156 49.77 / .5)
```

### Valeurs

`oklch(L C H [/ A])`

`L` indique la luminosité perçue et est exprimée comme un pourcentage (type `<percentage>`) compris entre `0%`, pour le noir, et `100%`, pour le blanc.

Le deuxième argument, `C`, indique la chroma (indiquant en quelque sorte la quantité de couleur). Sa valeur minimale est 0 et sa valeur maximale est théoriquement infinie, bien qu'elle n'excède pas `0.4` en pratique.

Le troisième argument, `H` correspond à l'angle pour la teinte (*hue* en anglais). `0deg` pointe selon l'axe positif "a" (un rouge pourpre), `90deg` pointe selon l'axe positif "b" (jaune moutarde), `180deg` pointe selon l'axe négatif "a" (un cyan vert), et `270deg` pointe selon l'axe négatif "b" (bleu ciel).

`A` (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 4 # ok-lab |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Un espace de couleur perceptif pour le traitement des images
* Notes de version pour Safari Technology Preview 137 mentionnant `oklch()` et `oklab()`
rgb()
=====

La notation fonctionnelle **`rgb()`** exprime une couleur selon ses composantes rouge, verte et bleue. Une composante alpha optionnelle représente l'opacité de la couleur.

Exemple interactif
------------------

**Note :** Le niveau 4 du module de spécification *CSS Color* a apporté certaines modifications à `rgb()`. Pour les navigateurs qui prennent en charge la notation standard `rgba()`, `rgb()` est désormais un synonyme de `rgba()`, les deux acceptent les mêmes paramètres et se comportent de la même façon.

Le niveau 4 de la spécification permet également de séparer les paramètres par des espaces en complément de la séparation avec des virgules.

Syntaxe
-------


```css
rgb(255, 255, 255) /\* blanc \*/
rgb(255, 255, 255, .5) /\* blanc avec 50% d'opacité \*/
rgb(255 255 255) /\* forme CSS Color 4 avec une séparation par des espaces des valeurs \*/
rgb(255 255 255 / .5) /\* blanc avec 50% d'opacité, en utilisant la séparation par des espaces \*/
```

### Valeurs

`rgb(R, G, B[, A])`

`R` (rouge), `G` (vert, G correspondant à *green* en anglais), et `B` (bleu) peuvent être ou des nombres (type `<number>`) ou des pourcentages (type `<percentage>`), où le nombre `255` correspond à `100%`. `A` (alpha) peut être un nombre (`<number>`) compris entre `0` et `1`, ou un pourcentage (`<percentage>`), où le nombre `1` correspond à `100%` (opacité complète).

`rgb(R G B[ / A])`

Cette forme de la notation fonctionnelle, avec la séparation des paramètres par des espaces, est ajoutée avec le module de spécification *CSS Color* de niveau 4.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
color()
=======

**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>` (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 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 4 # color-function |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Larges gamuts en CSS avec Display-p3
lch()
=====

**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 **`lch()`** exprime une couleur donnée dans l'espace de couleur LCH, qui utilise le même axe L (luminosité) que `lab()`, mais utilise des coordonnées polaires C (chroma) et H (pour la teinte, *hue* en anglais).

Syntaxe
-------


```css
lch(29.2345% 44.2 27)
lch(52.2345% 72.2 56.2)
lch(52.2345% 72.2 56.2 / .5)
```

### Valeurs

`lch(L C H [/ A])`

`L` indique la luminosité CIE sous la forme d'un pourcentage (type `<percentage>`) compris entre `0%`, pour le noir, et `100%`, pour le blanc.

Le deuxième argument, `C`, indique la chroma (indiquant en quelque sorte la quantité de couleur). Sa valeur minimale est 0 et sa valeur maximale est théoriquement infinie, bien qu'elle n'excède pas `0.4` en pratique.

Le troisième argument, `H` correspond à l'angle pour la teinte (*hue* en anglais). `0deg` pointe selon l'axe positif "a" (un rouge pourpre), `90deg` pointe selon l'axe positif "b" (jaune moutarde), `180deg` pointe selon l'axe négatif "a" (un cyan vert), et `270deg` pointe selon l'axe négatif "b" (bleu ciel).

`A` (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 4 # lab-colors |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les couleurs LCH en CSS : qu'est-ce que c'est, pourquoi et comment ?
* Notes de version pour Safari Technology Preview 122 mentionnant `lch()` et `lab()`
Utiliser la pseudo-classe :target dans un sélecteur
===================================================

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe `:target`.

Choisir une cible
-----------------

La pseudo-classe `:target` permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

Imaginons qu'on souhaite mettre en forme n'importe quel élément `<h2>` qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :


```css
h2:target {
  font-weight: bold;
}
```


On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire :


```css
#Exemple:target {
  border: 1px solid black;
}
```

Cibler tous les éléments
------------------------

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :


```css
:target {
  color: red;
}
```

Exemple
-------

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le `<h1 id="un">` devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.


```html
<h4 id="un">...</h4>
<p id="deux">...</p>
<div id="trois">...</div>
<a id="quatre">...</a> <em id="cinq">...</em>

<a href="#un">Premier</a>
<a href="#deux">Deuxième</a>
<a href="#trois">Troisième</a>
<a href="#quatre">Quatrième</a>
<a href="#cinq">Cinquième</a>
```

Conclusion
----------

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

Voir aussi
----------

* *CSS3 Selectors #target-pseudo* (en anglais)
* `:target`