<hue-interpolation-method>

CSS 数据类型 <hue-interpolation-method> 表示用于在 <hue> 值之间插值的算法。此插值方法指定了如何根据色轮求两个色相值之间的中点。此数据类型用作数据类型 <color-interpolation-method> 的分量。

在对 <hue> 值进行插值时,色相插值算法默认为 shorter

语法

<hue-interpolation-method> 值由色相插值算法的名称后接字面标记 hue 所构成:

shorter hue
longer hue
increasing hue
decreasing hue

取值

任意一对色相角 θ1θ2 对应色轮上的两条半径,且将圆周切为两段可用于插值的弧。两段弧均起于第一条半径并止于第二条半径,但一段为顺时针方向而另一段为逆时针方向。

备注: 下列描述和图示均基于色相角沿顺时针方向递增的色轮。注意在其他某些色轮中色相角递增对应逆时针操作。

有四种确定所用弧的算法:

shorter

使用劣弧。当两条半径重合时,此弧退化为单点。当两段弧长度相等时:

  • θ1 < θ2,则使用顺时针弧;
  • θ1 > θ2,则使用逆时针弧。
θ1 = 45degθ2 = 135deg θ1 = -225degθ2 = 45deg
shorter,θ1 = 45deg 且 θ2 = 135deg shorter,θ1 = -225deg 且 θ2 = 45deg
longer

使用优弧。当两条半径重合时:

  • θ1 ≤ θ2,则此弧变为顺时针定向的整个圆周。
  • θ1 > θ2,则此弧变为逆时针定向的整个圆周。

当两段弧长度相等时:

  • θ1 < θ2,则使用顺时针弧。
  • θ1 > θ2,则使用逆时针弧。
θ1 = 45degθ2 = -225deg θ1 = 135degθ2 = 45deg
longer,θ1 = 45deg 且 θ2 = -225deg longer,θ1 = 135deg 且 θ2 = 45deg
increasing

使用顺时针弧。当两条半径重合时:

  • θ1 < θ2,则此弧变为顺时针定向的整个圆周。
  • θ1 ≥ θ2,则此弧退化为单点。
θ1 = 45degθ2 = 135deg θ1 = 495degθ2 = 45deg
increasing,θ1 = 45deg 且 θ2 = 135deg increasing,θ1 = 495deg 且 θ2 = 45deg
decreasing

使用逆时针弧。当两条半径重合时:

  • θ1 ≤ θ2,则此弧退化为单点。
  • θ1 > θ2,则此弧变为逆时针定向的整个圆周。
θ1 = 45degθ2 = 495deg θ1 = 135degθ2 = 45deg
decreasing,θ1 = 45deg 且 θ2 = 495deg decreasing,θ1 = 135deg 且 θ2 = 45deg

形式语法

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

示例

比较各种色相插值算法

下列示例展示了在 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-longer">
  <p>HSL longer</p>
</div>
<div class="hsl-named">
  <p>HSL 具名颜色</p>
</div>
<div class="hsl-named-longer">
  <p>HSL 具名颜色(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-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);
}

结果

规范

Specification
CSS Color Module Level 4
# hue-interpolation

浏览器兼容性

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.

参见