<color-interpolation-method>

Syntaxe

<color-interpolation-method> précise si l'interpolation doit utiliser un espace colorimétrique rectangulaire ou polaire, avec éventuellement une méthode d'interpolation de la teinte :

in <rectangular-color-space>
// ou
in <polar-color-space>[ <hue-interpolation method>]

Valeurs

<rectangular-color-space>

L'un des mots-clés : srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50 ou xyz-d65.

<polar-color-space>

L'un des mots-clés : hsl, hwb, lch ou oklch.

<hue-interpolation-method> Facultatif

L'algorithme d'interpolation de la teinte. La valeur par défaut est shorter hue.

<custom-color-space>

Un <dashed-ident> faisant référence à un @color-profile personnalisé.

Syntaxe formelle

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<rectangular-color-space> = 
  srgb               |
  srgb-linear        |
  display-p3         |
  display-p3-linear  |
  a98-rgb            |
  prophoto-rgb       |
  rec2020            |
  lab                |
  oklab              |
  <xyz-space>        

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

Exemples

Comparaison des espaces colorimétriques d'interpolation avec des dégradés

L'exemple suivant montre l'effet de l'utilisation de différents espaces colorimétriques d'interpolation pour linear-gradient().

HTML

<div>sRVB&nbsp;:</div>
<div class="gradient srgb"></div>
<div>Oklab&nbsp;:</div>
<div class="gradient oklab"></div>
<div>Oklch (avec <code>longer hue</code>)&nbsp;:</div>
<div class="gradient oklch-longer"></div>

CSS

.gradient {
  height: 50px;
  width: 100%;
}
.srgb {
  background-image: linear-gradient(in srgb to right, blue, red);
}
.oklab {
  background-image: linear-gradient(in oklab to right, blue, red);
}
.oklch-longer {
  background-image: linear-gradient(in oklch longer hue to right, blue, red);
}

Résultat

Interpolation des couleurs dans les dégradés répétitifs

L'exemple suivant montre comment spécifier un espace colorimétrique lors de l'interpolation des couleurs dans des dégradés répétitifs. Trois boîtes présentent différents types de dégradés répétitifs utilisant les fonctions repeating-conic-gradient(), repeating-linear-gradient() et repeating-radial-gradient(). La première boîte utilise l'espace colorimétrique Lab pour interpoler entre deux valeurs de couleur. La deuxième et la troisième boîtes utilisent OkLCh et fournissent également un <hue-interpolation-method> pour spécifier la méthode d'interpolation de la teinte.

HTML

<div class="gradient conic">conique</div>
<div class="gradient linear">linéaire</div>
<div class="gradient radial">radial</div>

CSS

Nous avons utilisé les mêmes deux couleurs dans chaque dégradé pour illustrer les différents effets de <hue-interpolation-method> et espace colorimétrique sur l'interpolation des couleurs dans les dégradés.

.gradient {
  height: 200px;
  width: 200px;
  display: inline-block;
  font-family: monospace;
  margin: 10px;
  font-size: 16px;
}

.conic {
  background-image: repeating-conic-gradient(
    in lab,
    burlywood,
    blueviolet 120deg
  );
}

.linear {
  background-image: repeating-linear-gradient(
    in oklch,
    burlywood,
    blueviolet 75px
  );
}

.radial {
  background-image: repeating-radial-gradient(
    in oklch longer hue,
    blueviolet 50px,
    burlywood 100px
  );
}

Résultat

La comparaison entre la première et la deuxième boîte montre la différence d'interpolation entre deux couleurs dans des espaces colorimétriques différents. La comparaison entre la deuxième et la troisième boîte met en évidence la différence entre les <hue-interpolation-method>, la dégradé linéaire utilisant la méthode courte (par défaut) et la dégradé radiale utilisant la méthode longue.

Spécifications

Compatibilité des navigateurs

Voir aussi

• <color>, <gradient>
• <hue-interpolation-method>