<hue-interpolation-method>

Le type de donnée CSS <hue-interpolation-method> représente l'algorithme utilisé pour l'interpolation entre des valeurs de type <hue>. La méthode d'interpolation spécifie comment trouver un point médian entre deux valeurs de teinte en se basant sur une roue chromatique. Elle est utilisée comme composant du type de donnée <color-interpolation-method>.

Lors de l'interpolation de valeurs <hue>, l'algorithme d'interpolation de teinte utilise par défaut shorter.

Syntaxe

Une valeur <hue-interpolation-method> consiste en le nom d'un algorithme d'interpolation de teinte suivi du mot-clé littéral hue :

shorter hue
longer hue
increasing hue
decreasing hue

Valeurs

Toute paire d'angles de teinte correspond à deux rayons sur la roue chromatique, qui découpent la circonférence en deux arcs possibles pour l'interpolation. Les deux arcs commencent au premier rayon et se terminent au second, mais l'un va dans le sens horaire et l'autre dans le sens antihoraire.

Pour une paire d'angles de teinte θ1 et θ2 normalisés dans l'intervalle [0deg, 360deg), il existe quatre algorithmes pour déterminer quel arc est utilisé lors de l'interpolation de θ1 à θ2 :

shorter

Utilise l'arc le plus court. Lorsque les deux rayons coïncident, l'arc dégénère en un seul point. Lorsque les deux arcs ont la même longueur :

• Si θ1 < θ2, utiliser l'arc dans le sens horaire ;
• Si θ1 > θ2, utiliser l'arc dans le sens antihoraire.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:shorter with θ1 = 45deg and θ2 = 135deg]	[画像:shorter with θ1 = 135deg and θ2 = 45deg]

longer

Utilise l'arc le plus long. Lorsque les deux rayons coïncident :

• Si θ1 ≤ θ2, l'arc devient la circonférence complète dans le sens horaire.
• Si θ1 > θ2, l'arc devient la circonférence complète dans le sens antihoraire.

Lorsque les deux arcs ont la même longueur :

• Si θ1 < θ2, utiliser l'arc dans le sens horaire ;
• Si θ1 > θ2, utiliser l'arc dans le sens antihoraire.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:longer with θ1 = 45deg and θ2 = 135deg]	[画像:longer with θ1 = 135deg and θ2 = 45deg]

increasing

Utilise l'arc dans le sens horaire. Lorsque les deux rayons coïncident, l'arc dégénère en un seul point.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:increasing with θ1 = 45deg and θ2 = 135deg]	[画像:increasing with θ1 = 135deg and θ2 = 45deg]

decreasing

Utilise l'arc dans le sens antihoraire. Lorsque les deux rayons coïncident, l'arc dégénère en un seul point.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:decreasing with θ1 = 45deg and θ2 = 135deg]	[画像:decreasing with θ1 = 135deg and θ2 = 45deg]

Comme il n'y a que deux arcs possibles, ces algorithmes sont équivalents deux à deux dans certaines circonstances. Plus précisément :

• Si 0deg < θ2 - θ1 < 180deg ou θ2 - θ1 < -180deg, shorter et increasing sont équivalents, tandis que longer et decreasing sont équivalents.
• Si -180deg < θ2 - θ1 < 0deg ou θ2 - θ1 > 180deg, shorter et decreasing sont équivalents, tandis que longer et increasing sont équivalents.

Une particularité de increasing et decreasing est que lorsque la différence d'angle de teinte passe par 180deg lors d'une transition ou d'une animation, l'arc ne basculera pas de l'autre côté comme le font shorter et longer.

Syntaxe formelle

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

Exemples

Comparaison des algorithmes d'interpolation de teinte

L'exemple suivant montre l'effet de l'utilisation de différents algorithmes d'interpolation de teinte dans une fonction linear-gradient().

HTML

<div class="hsl">
 <p>HSL</p>
</div>
<div class="hsl-increasing">
 <p>HSL croissant</p>
</div>
<div class="hsl-decreasing">
 <p>HSL décroissant</p>
</div>
<div class="hsl-shorter">
 <p>HSL plus courte</p>
</div>
<div class="hsl-longer">
 <p>HSL plus longue</p>
</div>
<div class="hsl-named">
 <p>HSL nommé</p>
</div>
<div class="hsl-named-longer">
 <p>HSL nommé (plus longue)</p>
</div>

CSS

div {
 border: 1px solid black;
 height: 50px;
 margin: 10px;
 width: 90%;
}
p {
 color: white;
 margin: 6px;
}
/* Styles de repli */
.hsl,
.hsl-shorter,
.hsl-named {
 background: linear-gradient(
 to right,
 hsl(39 100% 50%),
 hsl(46 100% 50%),
 hsl(53 100% 50%),
 hsl(60 100% 50%)
 );
}
.hsl-increasing {
 background: linear-gradient(
 to right,
 hsl(190 100% 50%),
 hsl(225 100% 50%),
 hsl(260 100% 50%),
 hsl(295 100% 50%),
 hsl(330 100% 50%),
 hsl(365 100% 50%),
 hsl(400 100% 50%),
 hsl(435 100% 50%),
 hsl(470 100% 50%),
 hsl(505 100% 50%),
 hsl(540 100% 50%)
 );
}
.hsl-decreasing,
.hsl-longer,
.hsl-named-longer {
 background: linear-gradient(
 to right,
 hsl(399 100% 50%),
 hsl(368 100% 50%),
 hsl(337 100% 50%),
 hsl(307 100% 50%),
 hsl(276 100% 50%),
 hsl(245 100% 50%),
 hsl(214 100% 50%),
 hsl(183 100% 50%),
 hsl(152 100% 50%),
 hsl(122 100% 50%),
 hsl(91 100% 50%),
 hsl(60 100% 50%)
 );
}

.hsl {
 background: linear-gradient(
 to right in hsl,
 hsl(39deg 100% 50%),
 hsl(60deg 100% 50%)
 );
}
.hsl-increasing {
 background: linear-gradient(
 to right in hsl increasing hue,
 hsl(190deg 100% 50%),
 hsl(180deg 100% 50%)
 );
}
.hsl-decreasing {
 background: linear-gradient(
 to right in hsl decreasing hue,
 hsl(39deg 100% 50%),
 hsl(60deg 100% 50%)
 );
}
.hsl-shorter {
 background: linear-gradient(
 to right in hsl shorter hue,
 hsl(39deg 100% 50%),
 hsl(60deg 100% 50%)
 );
}
.hsl-longer {
 background: linear-gradient(
 to right in hsl longer hue,
 hsl(39deg 100% 50%),
 hsl(60deg 100% 50%)
 );
}
.hsl-named {
 background: linear-gradient(to right in hsl, orange, yellow);
}
.hsl-named-longer {
 background: linear-gradient(to right in hsl longer hue, orange, yellow);
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le type de donnée <color-interpolation-method>
• Le type de donnée <hue>