CSS Data Type - <hue-interpolation-method>

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

The default hue interpolation algorithm, while interpolating <hue> values, is shorter.

Possible Values

A pair of hue angles correspond to the two radii on the color wheel, which cuts the circumference into two possible arcs for interpolation. The arcs start at the first radius and end at the other one, but they both goes in opposite direction (clockwise and anti-clockwise).

There are four algorithms to determine the arc that is used to interpolate from the pair of hue angles. For example, for a pair of hue angles 01 and 02 normalized to the range [0deg, 360deg], the following algorithms determine the arc to be used when interpolating from 01 to 02:

Shorter

Shorter arc to be used. The arc degenerates to a point, when the two radii coincide. When both the arcs have same length:

  • when 01 < 02, then the clockwise arc to be used.

  • when 01 > 02, then the counterclockwise arc to be used.

Refer the diagrams for detail:

shorter-hue shorter-hue 2

Longer

Longer arc is used. When the two radii coincide:

  • when 01 ≤ 02, the arc changes to a full circumference with a clockwise direction.

  • when 01 > 02, the arc changes to a full circumference with a counterclockwise direction.

When both the arcs have the same lengths:

  • when 01 < 02, then the clockwise arc to be used.

  • when 01 > 02, then the counterclockwise arc is to be used.

Refer the diagrams for detail:

longer-hue longer-hue 2

Increasing

Clockwise arc is to be used. The arc degenerates to a single point, when the two radii coincide.

Refer the diagram for increasing algorithm:

increasing-hue

Decreasing

Counterclockwise arc is to be used. The arc degenerates to a single point, when the two radii coincide.

Refer the diagram for increasing algorithm:

decreasing-hue

Since there are only two arcs to select from, these algorithms are equivalent under some circumstances, such as:

  • when 0deg < 02 - 01 < 180deg or 02 - 01 < -180deg, shorter and increasing are equivalent and longer and decreasing are equivalent.

  • when -180deg < 02 - 01 < 0deg or 02 - 01 > 180deg, shorter and decreasing are equivalent and longer and increasing are equivalent.

An important point to note about increasing and decreasing interpolation algorithms, is, when the hue angle difference passes through 180deg during transition or animation, the arc does not get flipped to the other side like shorter and longer interpolation alogorithms.

Syntax

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

CSS <hue-interpolation-method> - Comparison of Algorithms

A linear-gradient() is used in the following example to demonstrate the comparison of different algorithms of hue interpolation method:

<html>
<head>
<style>  
   div {
      width: 200px;
      height: 30px;
   }

   .hsl-plain {
      background: linear-gradient(
         to right in hsl,
         hsl(76deg 100% 50%),
         hsl(20deg 100% 50%)
      );
   }

   .increasing-method {
      background: linear-gradient(
         to right in hsl increasing hue,
         hsl(250deg 100% 50%),
         hsl(30deg 100% 50%)
      );
   }

   .decreasing-method {
      background: linear-gradient(
         to right in hsl decreasing hue,
         hsl(9deg 100% 50%),
         hsl(160deg 100% 50%)
      );
   }

   .shorter-method {
      background: linear-gradient(
         to right in hsl shorter hue,
         hsl(49deg 100% 50%),
         hsl(180deg 100% 50%)
      );
   }
   
   .longer-method {
      background: linear-gradient(
         to right in hsl longer hue,
         hsl(39deg 100% 50%),
         hsl(60deg 100% 50%)
      );
   }
</style>
</head>
<body>
   <div class="hsl-plain">
      <p>HSL</p>
   </div>
   <div class="increasing-method">
      <p>HSL increasing</p>
   </div>
   <div class="decreasing-method">
      <p>HSL decreasing</p>
   </div>
   <div class="shorter-method">
      <p>HSL shorter</p>
   </div>
   <div class="longer-method">
      <p>HSL longer</p>
   </div>
</body>
</html>
Advertisements