The<hue-interpolation-method>CSSdata type represents the algorithm used for interpolation between<hue> values.The interpolation method specifies how to find a midpoint between two hue values based on a color wheel.It is used as a component of the<color-interpolation-method> data type.

When interpolating<hue> values, the hue interpolation algorithm defaults toshorter.

Syntax

A<hue-interpolation-method> value consists of the name of a hue interpolation algorithm followed by a literal tokenhue:

shorter huelonger hueincreasing huedecreasing hue

Values

Any pair of hue angles correspond to two radii on thecolor wheel, which cut the circumference into two possible arcs for interpolation. Both arcs start at the first radius and end at the second radius, but one goes clockwise and the other goes counterclockwise.

For a pair of hue anglesθ1 andθ2 normalized to the range[0deg, 360deg), there are four algorithms to determine which arc is used when interpolating fromθ1 toθ2:

shorter

Use the shorter arc. When the two radii coincide, the arc degenerates to a single point. When both arcs have the same lengths:

• Ifθ1 < θ2, use the clockwise arc;
• Ifθ1 > θ2, use the counterclockwise arc.

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

longer

Use the longer arc. When the two radii coincide:

• Ifθ1 ≤ θ2, the arc becomes the full circumference with a clockwise orientation.
• Ifθ1 > θ2, the arc becomes the full circumference with a counterclockwise orientation.

When both arcs have the same lengths:

• Ifθ1 < θ2, use the clockwise arc;
• Ifθ1 > θ2, use the counterclockwise arc.

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

increasing

Use the clockwise arc. When the two radii coincide, the arc degenerates to a single point.

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

decreasing

Use the counterclockwise arc. When the two radii coincide, the arc degenerates to a single point.

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

As there are only two arcs to choose from, these algorithms are pairwise equivalent under certain circumstances. Specifically:

• If0deg < θ2 - θ1 < 180deg orθ2 - θ1 < -180deg,shorter andincreasing are equivalent, whereaslonger anddecreasing are equivalent.
• If-180deg < θ2 - θ1 < 0deg orθ2 - θ1 > 180deg,shorter anddecreasing are equivalent, whereaslonger andincreasing are equivalent.

A notable feature ofincreasing anddecreasing is that when the hue angle difference passes through180deg during transition or animation, the arc will not flip to the other side likeshorter andlonger do.

Formal syntax

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

Examples

Comparing hue interpolation algorithms

The following example shows the effect of using different hue interpolation algorithms in alinear-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);}

Result

Specifications

Browser compatibility

See also

• <color-interpolation-method>
• <hue> data type