<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 legt fest, wie ein Mittelpunkt zwischen zwei Farbtonwerten basierend auf einem Farbkreis gefunden wird. Sie wird als Bestandteil des Datentyps <color-interpolation-method> verwendet.

Bei der Interpolation von <hue>-Werten verwendet der Farbton-Interpolationsalgorithmus standardmäßig 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 für die Interpolation aufteilen. Beide Bögen beginnen am ersten Radius und enden am zweiten Radius, wobei einer im Uhrzeigersinn und der andere gegen den Uhrzeigersinn verläuft.

Hinweis: Die folgenden Beschreibungen und Abbildungen basieren auf Farbkreisen, bei denen Farbtonwinkel im Uhrzeigersinn zunehmen. Beachten Sie, dass es Farbkreise gibt, bei denen eine Zunahme der Winkel gegen den Uhrzeigersinn erfolgt.

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 nach θ2 verwendet wird:

shorter

Verwendet den kürzeren Bogen. Wenn die beiden Radien zusammenfallen, degeneriert der Bogen zu einem einzigen Punkt. Wenn beide Bögen gleich lang sind:

  • Wenn θ1 < θ2, wird der Bogen im Uhrzeigersinn verwendet;
  • Wenn θ1 > θ2, wird der Bogen gegen den Uhrzeigersinn verwendet.
θ1 = 45deg, θ2 = 135deg θ1 = 135deg, θ2 = 45deg
shorter mit θ1 = 45deg und θ2 = 135deg shorter mit θ1 = 135deg und θ2 = 45deg
longer

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

  • Wenn θ1 ≤ θ2, wird der Bogen zum gesamten Umfang mit Uhrzeigersinn-Orientierung.
  • Wenn θ1 > θ2, wird der Bogen zum gesamten Umfang mit gegen den Uhrzeigersinn-Orientierung.

Wenn beide Bögen gleich lang sind:

  • Wenn θ1 < θ2, wird der Bogen im Uhrzeigersinn verwendet;
  • Wenn θ1 > θ2, wird der Bogen gegen den Uhrzeigersinn verwendet.
θ1 = 45deg, θ2 = 135deg θ1 = 135deg, θ2 = 45deg
longer mit θ1 = 45deg und θ2 = 135deg longer mit θ1 = 135deg und θ2 = 45deg
increasing

Verwendet den Bogen im Uhrzeigersinn. 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

Verwendet den Bogen gegen den Uhrzeigersinn. 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 unter bestimmten Umständen paarweise gleichwertig. Insbesondere:

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

Ein bemerkenswertes Merkmal von increasing und decreasing ist, dass, wenn der Farbtonwinkeldifferenz während einer 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 Farbton-Interpolationsalgorithmen

Das folgende Beispiel zeigt die Wirkung der Verwendung verschiedener Farbton-Interpolationsalgorithmen in einem linear-gradient().

HTML

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

css
.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

Specification
CSS Color Module Level 4
# hue-interpolation

Browser-Kompatibilität

css.types.color.color-mix

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color-mix()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

css.types.image.gradient.conic-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.conic-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.linear-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.linear-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.radial-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.radial-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.repeating-conic-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.repeating-linear-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method

No compatibility data found for css.types.image.gradient.repeating-radial-gradient.hue_interpolation_method.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

Siehe auch