<hue-interpolation-method>

Der <hue-interpolation-method> CSS Datentyp repräsentiert den Algorithmus, der für die Interpolation zwischen <hue>-Werten verwendet wird. Die Interpolationsmethode gibt an, wie ein Mittelpunkt zwischen zwei Farbtonwerten basierend auf einem Farbkreis gefunden wird. Sie wird als Komponente des <color-interpolation-method>-Datentyps verwendet.

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

Syntax

Ein <hue-interpolation-method>-Wert besteht aus dem Namen eines Farbton-Interpolationsalgorithmus, gefolgt von einem literalen Token hue:

shorter hue
longer hue
increasing hue
decreasing hue

Werte

Jedes Paar von Farbtonwinkeln entspricht zwei Radien auf dem Farbkreis, die den Umfang in zwei mögliche Bögen zur Interpolation schneiden. 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, die auf den Bereich [0deg, 360deg) normalisiert sind, gibt es vier Algorithmen, um zu bestimmen, welcher Bogen bei der Interpolation von θ1 zu θ2 verwendet wird:

shorter

Verwende den kürzeren Bogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzelnen Punkt. Wenn beide Bögen die gleichen Längen haben:

• Wenn θ1 < θ2, verwenden Sie den Uhrzeigersinnbogen;
• Wenn θ1 > θ2, verwenden Sie den gegen den Uhrzeigersinn verlaufenden Bogen.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:shorter mit θ1 = 45deg und θ2 = 135deg]	[画像:shorter mit θ1 = 135deg und θ2 = 45deg]

longer

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

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

Wenn beide Bögen die gleichen Längen haben:

• Wenn θ1 < θ2, verwenden Sie den Uhrzeigersinnbogen;
• Wenn θ1 > θ2, verwenden Sie den gegen den Uhrzeigersinn verlaufenden Bogen.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:longer mit θ1 = 45deg und θ2 = 135deg]	[画像:longer mit θ1 = 135deg und θ2 = 45deg]

increasing

Verwende den Uhrzeigersinnbogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzigen Punkt.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:increasing mit θ1 = 45deg und θ2 = 135deg]	[画像:increasing mit θ1 = 135deg und θ2 = 45deg]

decreasing

Verwende den gegen den Uhrzeigersinn verlaufenden Bogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzigen Punkt.

θ1 = 45deg, θ2 = 135deg	θ1 = 135deg, θ2 = 45deg
[画像:decreasing mit θ1 = 45deg und θ2 = 135deg]	[画像:decreasing mit θ1 = 135deg und θ2 = 45deg]

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

• Wenn 0deg < θ2 - θ1 < 180deg oder θ2 - θ1 < -180deg, sind shorter und increasing äquivalent, während longer und decreasing äquivalent sind.
• Wenn -180deg < θ2 - θ1 < 0deg oder θ2 - θ1 > 180deg, sind shorter und decreasing äquivalent, während longer und increasing äquivalent sind.

Ein bemerkenswertes Merkmal von increasing und decreasing ist, dass, wenn der Farbtonwinkeldifferenz während der Transition oder Animation durch 180deg geht, der Bogen nicht wie bei shorter und longer 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 verschiedener Farbtoninterpolationsalgorithmen in einem linear-gradient().

HTML

<div class="hsl">
 <p>HSL</p>
</div>
<div class="hsl-increasing">
 <p>HSL increasing</p>
</div>
<div class="hsl-decreasing">
 <p>HSL decreasing</p>
</div>
<div class="hsl-shorter">
 <p>HSL shorter</p>
</div>
<div class="hsl-longer">
 <p>HSL longer</p>
</div>
<div class="hsl-named">
 <p>HSL named</p>
</div>
<div class="hsl-named-longer">
 <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