在 CSS 中，我們可以很輕易的實(shí)現(xiàn)一個(gè)漸變，比如下面是一個(gè)從黃色到藍(lán)色的漸變。

background: linear-gradient(to right, yellow, blue)

效果如下：

有沒有發(fā)現(xiàn)有什么問題？

沒錯(cuò)，在黃色和藍(lán)色的中間，出現(xiàn)了灰色，看著整體顏色非?！芭K”，也就是設(shè)計(jì)中常說的 “灰色死亡地帶”（gray dead zone）

有沒有辦法規(guī)避這種情況呢？這就需要用到今天要介紹的顏色插值算法[1]和色相插值算法[2]了，快速了解一下吧

一、顏色插值算法

顏色插值算法（color-interpolation-method）可以指定顏色用哪一種「色彩空間」用于插值算法，不同的色彩空間在計(jì)算顏色變化時(shí)表現(xiàn)不同，也就是插值算法不同。

「在漸變中的體現(xiàn)就是顏色的過渡狀態(tài)」，也就是表示顏色是怎么從一種顏色過渡到另一種顏色的，想想看，我們只規(guī)定了黃色和藍(lán)色，為什么就能生成完整的漸變呢？中間的其他顏色怎么來的？就是通過插值算法得來的。

雖然不用管具體是怎么計(jì)算的，但是現(xiàn)在我們可以手動(dòng)去指定系統(tǒng)自帶的幾種色彩空間，那么，有哪些色彩空間呢？

色彩空間可以分成兩種類型，分別是「直角坐標(biāo)顏色空間」（rectangular-color-space）和「極坐標(biāo)顏色空間」（polar-color-space），其實(shí)就是根據(jù)表示方式區(qū)分的。

• 直角坐標(biāo)顏色空間

可以取值 srgb、srgb-linear、lab、oklab、xyz、xyz-d50 或 xyz-d65 。

• 極坐標(biāo)顏色空間

可以取值 hsl、hwb、lch 或 oklch。

下面是srgb和hsl兩種色彩空間的顏色模型

截圖來自于 https://facelessuser.github.io/coloraide/colors/srgb/。

這里就不多描述了，只需要知道有這樣一個(gè)概念就行了。

二、漸變中的顏色空間

前面介紹了顏色插值算法以及色彩空間，有什么作用呢？

別急，還記得文章開頭的例子嗎，可以在漸變中改變色彩空間，從而避免“灰色死亡區(qū)間”。

在漸變中指定顏色空間也非常簡(jiǎn)單，只需要在最前面加上in <color-space>就行了，例如

background: linear-gradient( in srgb to right, yellow, blue)

效果如下，可以看到，漸變中默認(rèn)的顏色空間就是srgb（MDN上有誤？）

我們換一個(gè)色彩空間，比如極坐標(biāo)中的hsl。

background: linear-gradient( in hsl to right, yellow, blue)

效果如下，完全變成了不同的漸變效果（是不是已經(jīng)沒有灰色了？）

這里做了一個(gè)在線演示，可以自行選擇色彩空間，方便觀察不同的效果。

• CSS color-space (juejin.cn)[3]
• CSS color-space (codepen.io)[4]

三、色相插值算法

大家不知有沒有注意到，前面的極坐標(biāo)顏色空間中，每個(gè)值都包含了一個(gè)字母：「h」。

在色彩空間中，「h」表示的就是「色相」（hue），也叫做「色調(diào)」。

色相指的是色彩的外相，是在不同波長的光照射下，人眼所感覺不同的顏色。

這也是最直觀的顏色表示方法，具體的規(guī)則是以紅色為0度（360度）；黃色為60度；綠色為120度；青色為180度；藍(lán)色為240度；洋紅色為300度，最后再回到紅色360度，形成了一個(gè)完整的環(huán)。

既然是一個(gè)環(huán)形，就涉及到旋轉(zhuǎn)方向的問題了，也就是「色相插值算法」（hue-interpolation-method），它可以規(guī)定色相的指向，一共有 4 個(gè)值，分別是

• shorter：短?。踊。J(rèn)）
• longer：長弧（優(yōu)?。?/li>
• increasing：順時(shí)針弧
• decreasing：逆時(shí)針弧

用法是這樣的，在色彩空間后跟上就行了。

in hsl shorter hue
in hsl longer hue
in hsl increasing hue
in hsl decreasing hue

乍一看好像不知什么意思，這里舉個(gè)例子，比如有個(gè)紅色到黃色的漸變，用 hsl色彩空間。

background: linear-gradient( in hsl to right, red, yellow)

我們直接在色相環(huán)上找到兩個(gè)顏色的位置。

默認(rèn)情況下，漸變會(huì)找“近路”，也就是找那邊比較短的?。╯horter），因此效果是這樣的。

如果設(shè)置為longer，它就會(huì)繞“遠(yuǎn)路”，找比較長的弧，如下：

然后是increasing，增加，表示順時(shí)針方向，不管弧線是長是短，如下：

最后是decreasing，減少，表示逆時(shí)針方向，不管弧線是長是短，如下：

相信大家都明白了吧！

下面是一個(gè)在線顏色，可以觀察每個(gè)值的差異。

• CSS hue-interpolation (juejin.cn)[5]
• CSS hue-interpolation (codepen.io)[6]

四、色相插值的特殊用途

色相插值還有一個(gè)非常實(shí)用的用途。

例如，我們只用一個(gè)顏色實(shí)現(xiàn)一個(gè)漸變。

background:  linear-gradient(to right, red 0 0)

這樣可以得到一個(gè)紅色的漸變。

其實(shí)就是紅色→紅色的漸變。

現(xiàn)在，我們可以改變色相插值，讓整個(gè)色相環(huán)轉(zhuǎn)一圈，也就是取較長的?。╨onger）。

background:  linear-gradient(in hsl longer hue to right, red 0 0)

效果如下：

看到?jīng)]，僅僅只有一個(gè)顏色，就完整的實(shí)現(xiàn)所有顏色的漸變，是不是非常方便？

如果用錐形漸變(conic-gradient)，就能輕易實(shí)現(xiàn)一個(gè)色相環(huán)，無需定義一堆中間顏色。

background: conic-gradient(in hsl longer hue, red 0 0)

效果如下：

這下實(shí)現(xiàn)顏色選擇器又有新的方式了~

你可以查看以下鏈接訪問：

• CSS color-pane (juejin.cn)[7]
• CSS color-pane (codepen.io)[8]

五、兼容性和總結(jié)

這個(gè)是新推出的特性，兼容性要求 Chrome 111+，完整如下：

不兼容也沒有關(guān)系，有 postcss 可以進(jìn)行轉(zhuǎn)換。

https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method。

其實(shí)就是提前將顏色中間的差值計(jì)算好，轉(zhuǎn)換成傳統(tǒng)的 CSS。

.example {
	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

:root {
	--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}

/* becomes */

.example {
	background-image: linear-gradient(rgb(245, 137, 137) 0%, rgb(248, 146, 114), rgb(244, 158, 94), rgb(235, 171, 82), rgb(220, 185, 81), rgb(201, 199, 95), rgb(177, 211, 118), rgb(151, 221, 146), rgb(125, 229, 177), rgb(103, 235, 208), rgb(94, 237, 237) 100%);
	background-image: linear-gradient(in oklch, hsl(0deg 85% 75%) 0%, hsl(180deg 80% 65%) 100%);
}

:root {
	--background-image: linear-gradient(rgb(56, 87, 35) 0%, rgb(64, 83, 46), rgb(70, 79, 54), rgb(76, 74, 62), rgb(82, 69, 68), rgb(86, 64, 75), rgb(91, 58, 81), rgb(95, 51, 87), rgb(99, 44, 93), rgb(103, 34, 98), rgb(106, 21, 104) 100%);
}

@supports (background: linear-gradient(in oklch, red 0%, red 0% 1%, red 2%)) {
:root {
	--background-image: linear-gradient(in oklab, hsl(96, 42%, 24%) 0%, hsl(302, 67%, 25%) 100%);
}
}

由于需要提前計(jì)算，因此這個(gè)插件不支持 CSS 變量，酌情使用！

下面來總結(jié)一下

• 普通的漸變很容易出現(xiàn)灰色，讓顏色整體看起來很臟。
• 顏色插值算法可以指定顏色用哪一種「色彩空間」用于插值算法，在漸變中的體現(xiàn)就是顏色的過渡狀態(tài)。
• 色彩空間可以分成兩種類型，分別是「直角坐標(biāo)顏色空間」（rectangular-color-space）和「極坐標(biāo)顏色空間」（polar-color-space）。
• 通過改變漸變的色彩空間，可以避免灰色區(qū)間的出現(xiàn)。
• 色相指的是色彩的外相，是在不同波長的光照射下，人眼所感覺不同的顏色，是最直觀的顏色表示方式。
• 色相以紅色為0度（360度）；黃色為60度；綠色為120度；青色為180度；藍(lán)色為240度；洋紅色為300度，最后再回到紅色360度，形成了一個(gè)完整的環(huán)。
• 色相插值算法（hue-interpolation-method）可以規(guī)定色相的指向，有 4 個(gè)關(guān)鍵詞。
• shorter表示比較短的弧（劣?。?/li>
• longer表示比較長的?。▋?yōu)?。?/li>
• increasing表示增加，順時(shí)針方向。
• decreasing表示減少，逆時(shí)針方向。
• 利用色相插值還可以簡(jiǎn)單反向?qū)崿F(xiàn)色相環(huán)效果。

對(duì)了，顏色插值算法還可以用在color-mix()[9] 中，類似于這樣。

background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );

[1]顏色插值空間： https://developer.mozilla.org/zh-CN/docs/Web/CSS/color-interpolation-method。

[2]色相插值算法： https://developer.mozilla.org/zh-CN/docs/Web/CSS/hue-interpolation-method。

[3]CSS color-space (juejin.cn)： https://code.juejin.cn/pen/7263747493115265061。

[4]CSS color-space (codepen.io)： https://codepen.io/xboxyan/pen/PoxLarG。

[5]CSS hue-interpolation (juejin.cn)： https://code.juejin.cn/pen/7263767800723734569。

[6]CSS hue-interpolation (codepen.io)： https://codepen.io/xboxyan/pen/XWyGYwx。

[7]CSS color-pane (juejin.cn)： https://code.juejin.cn/pen/7263784258894823439。

[8]CSS color-pane (codepen.io)： https://codepen.io/xboxyan/pen/QWJoxRq。

[9]color-mix()： https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix。