Der<hue-interpolation-method>CSSDatentyp stellt den Algorithmus dar, der zur Interpolation zwischen<hue>-Werten verwendet wird.Der Interpolationsalgorithmus bestimmt, wie ein Mittelpunkt zwischen zwei Farbtonwerten basierend auf einem Farbkreis gefunden wird.Er wird als Bestandteil des Datentyps<color-interpolation-method> verwendet.

Bei der Interpolation von<hue>-Werten ist der Standardalgorithmus für die Farbtoninterpolationshorter.

Syntax

Ein<hue-interpolation-method>-Wert besteht aus dem Namen eines Farbtoninterpolationsalgorithmus, gefolgt von einem Literalhue:

shorter huelonger hueincreasing huedecreasing hue

Werte

Jedes Paar von Farbtonwinkeln entspricht zwei Radien auf demFarbkreis, der den Umfang in zwei mögliche Bögen für die Interpolation unterteilt. Beide Bögen beginnen am ersten Radius und enden am zweiten Radius, aber einer verläuft im Uhrzeigersinn und der andere gegen den Uhrzeigersinn.

Für ein Paar von Farbtonwinkelnθ1 undθ2, normalisiert auf den Bereich[0deg, 360deg), gibt es vier Algorithmen, um zu bestimmen, welcher Bogen bei der Interpolation vonθ1 zuθ2 verwendet wird:

shorter

Verwenden Sie den kürzeren Bogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzelnen Punkt. Wenn beide Bögen die gleiche Länge haben:

• Wennθ1 < θ2, verwenden Sie den Uhrzeigerbogen;
• Wennθ1 > θ2, verwenden Sie den gegen den Uhrzeigerbogen.

θ1 = 45deg,θ2 = 135deg	θ1 = 135deg,θ2 = 45deg

longer

Verwenden Sie den längeren Bogen. Wenn die beiden Radien zusammenfallen:

• Wennθ1 ≤ θ2, wird der Bogen zum vollen Umfang mit Uhrzeigerrichtung.
• Wennθ1 > θ2, wird der Bogen zum vollen Umfang mit gegen den Uhrzeigerrichtung.

Wenn beide Bögen die gleiche Länge haben:

• Wennθ1 < θ2, verwenden Sie den Uhrzeigerbogen;
• Wennθ1 > θ2, verwenden Sie den gegen den Uhrzeigerbogen.

θ1 = 45deg,θ2 = 135deg	θ1 = 135deg,θ2 = 45deg

increasing

Verwenden Sie den Uhrzeigerbogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzelnen Punkt.

θ1 = 45deg,θ2 = 135deg	θ1 = 135deg,θ2 = 45deg

decreasing

Verwenden Sie den gegen den Uhrzeigerbogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzelnen Punkt.

θ1 = 45deg,θ2 = 135deg	θ1 = 135deg,θ2 = 45deg

Da es nur zwei Bögen zur Auswahl gibt, sind diese Algorithmen unter bestimmten Umständen paarweise äquivalent. Speziell:

• Wenn0deg < θ2 - θ1 < 180deg oderθ2 - θ1 < -180deg, sindshorter undincreasing äquivalent, währendlonger unddecreasing äquivalent sind.
• Wenn-180deg < θ2 - θ1 < 0deg oderθ2 - θ1 > 180deg, sindshorter unddecreasing äquivalent, währendlonger undincreasing äquivalent sind.

Eine bemerkenswerte Eigenschaft vonincreasing unddecreasing ist, dass wenn der Unterschied in den Farbtonwinkeln während der Transition oder Animation die180deg durchläuft, der Bogen nicht wie beishorter undlonger auf die andere Seite wechselt.

Formale Syntax

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

Beispiele

Vergleich von Farbtoninterpolationsalgorithmen

Das folgende Beispiel zeigt die Wirkung der Verwendung unterschiedlicher Farbtoninterpolationsalgorithmen in einemlinear-gradient().

HTML

<div>  <p>HSL</p></div><div>  <p>HSL increasing</p></div><div>  <p>HSL decreasing</p></div><div>  <p>HSL shorter</p></div><div>  <p>HSL longer</p></div><div>  <p>HSL named</p></div><div>  <p>HSL named (longer)</p></div>

CSS

div {  border: 1px solid black;  height: 50px;  margin: 10px;  width: 90%;}p {  color: white;  margin: 6px;}/* Fallback styles */.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);}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <color-interpolation-method>
• <hue> Datentyp