代 CSS 顏色規范

新的 CSS Color Module 規范引入了多種新的顏色表示法. 可以支持多種色彩空間和顏色模型. 這解鎖了很多的玩法. 比如: 基于一個顏色生成更深或更淺的顏色; 根據背景自適應文本色; 使用廣色域顏色等等.

CSS Color Module Level 4 規范

引入了新的顏色表示法, 同時引入了多種色彩空間, 不再僅限于sRGB, 這些方法現代瀏覽器均已支持:

• 基于 sRGB 色彩空間的方法: hsl(), hwb(), rgb();
• 基于 CIELAB 色彩空間的方法: lab(), lch();
• 基于 Oklab 色彩空間的方法: oklab(), oklch();
• 其它色彩空間的方法: color()

再補充一點, 這些新方法中:

• 帶 h 的是使用極坐標的顏色空間: hsl, hwb, lch, oklch
• color()使用任意 color-gamut CSS 媒介功能支持的顏色空間
• 其它使用的是直角坐標系的顏色空間: rgb, lab, oklab

CSS Color Module Level 5 規范

• 引入工具方法: color-mix(), 現代瀏覽器均已支持.
• 擴展CSS Color Module Level 4 引入的新方法, 是它們支持相對顏色表示法. 相對顏色表示法絕大多數現代瀏覽器已支持.

CSS Color Module Level 6 規范

• 引入工具方法: color-contrast(), 目前還沒有瀏覽器支持, 但使用Level 4和Level 5中的工具和方法就可以實現.

在詳細介紹這些現代新方法之前有必要對一些術語進行解釋:

名詞解釋:

• 顏色模型(color model)

顏色模型是指顏色與坐標系之間的映射和編碼方式, 它定義維度分量與色彩空間的關系. 一個顏色模型就會有一個對應的色彩空間.

• 色彩空間(color space)

色彩空間是某一顏色模型所涵蓋的顏色的定義和命名. 每個顏色空間都由數學模型和關聯的規則集定義. 色彩空間是表示顏色的三維網格, 色彩空間中的每個顏色都由三個通道分量(維度)來表示. 每個顏色空間都有一個定義的色域。

• 色域(color gamut)

色域指的是它可以表示的特定顏色的范圍, 通常指設備可以顯示的顏色范圍. 如 sRGB, P3, Rec2020 等

可以看出三者有一些共性的東西, 通常來說, 當上下文中使用顏色空間時強調的是它的顏色模型和算法. 當使用色域時強調的是能不能顯示某些顏色

CSS Color Module Level 4 新引入的顏色方法統一了帶和不帶alpha通道的表示法

比如, 以前用的最多的rgb方法, 帶和不帶alpha通道是不同的方法: 不帶alpha通道的是: rgb(r, g, b), 而帶alpha通道的是: rgba(r, g, b, a)

現在可以統一使用: rgb(R G B [/ A]), alpha通道值是可選的. 注意為了區分舊方法, 新方法不使用逗號分隔分量, 而是用空格替代.

上面只是拿rgb方法舉了個例子, 其實Level 4 中的所有新方法都支持這種表示法. 如: oklch(L C H [/A])

CSS Color Module Level 5 相對顏色表示法

語法: rgb(from <color> R G B[ / A]), hsl(from <color> H S L [/A]), oklch(from <color> L C H [/A]), ...

相對顏色是指從一個指定顏色的色彩空間轉換到目標色彩空間, 通過對目標色彩空間中的維度變量進行微調后的結果作為輸出.

這聽起來比較繞, 簡單點說就是可以根據原色, 對維度變量進行微調后輸出. 主要特性:

1. 可以從任意色彩空間轉換到目標色彩空間, 甚至是CSS自定義屬性.
2. 轉換后可以使用目標色彩模型中的維度變量
3. 維度分量可以使用calc()等CSS函數計算

這3個特性解鎖了一些原本只能通過js才能實現的一些功能.

例子1: 鼠標覆蓋按鈕時加深背景色:

方法1: 使用Level 5 規范中的相對顏色表示法:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
}
.btn:hover {
  background-color: oklch(from var(--btn-bg) calc(l - 0.1) c h);
}

這個例子中--btn-bg自定義屬性可以更改為任意顏色, 本例中使用了oklch作為目標色彩空間, 因為oklch可以做到調整亮度而不會影響色相.

從這個例子中可以看出, CSS自定義屬性與相對顏色的結合使用, 可以創造出很多的新玩法.

方法2: 使用Level 5 規范中的color-mix()方法

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
}
.btn:hover {
  background-color: color-mix(in oklch, var(--btn-bg), black 10%);
}

color-mix()方法的意思是將顏色1和顏色2先轉換到in關鍵字指定的目標色彩空間, 然后按百分比混合它們后輸出.由于black只有L分量, 因此混合只影響了L分量, 因此就得到了不改變色相的情況下加深了顏色.

例子2: 根據不同背景色自適應高對比度的文本色

這個場景需要一種方式確定高對比度的算法模型. 通用的是WCAG 2.1, 但它不太準確, 還有一種是APCA, 它相對準確性更高, 參考性更大. 在APCA算法下, 采用oklch顏色模型下L分量在72%左右是一個比較好的對比度分界線. 72%以上采用黑色文本, 72%以下采用白色文本.

好了, 有了這個基礎, 現在可以使用純CSS實現自適應高對比度的文本色:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
  color: oklch(from var(--btn-bg) clamp(0, calc((0.72 - l) * 10000), 1) 0 0);
}

這個例子中--bg自定義屬性可以更改為任意顏色, 按鈕文本都可以自適應的高對比度顏色. 本例中使用了oklch作為目標色彩空間, 因為oklch可以做到亮度是可預測性.

這里稍微解釋這句:clamp(0, calc((0.72 - l)* 10000), 1), 意思是背景色的l維度分量 > 0.72說明背景是淺色的, 那么文本色的L分量就取0即黑色, 否則就說明背景是深色的,L分量就取1即白色. 如果不想純白或純黑, 適當調整各分量以及L的上下界即可.

這個例子還可以使用CSS Color Module Level 6中的color-contrast()實現相同的效果, 但目前還沒有瀏覽器支持, 留著將來備用:

.btn {
  --btn-bg: blue;
  background-color: var(--btn-bg);
  color: color-contrast(var(--btn-bg) vs white,black);
}

color-contrast()的意思是選擇vs關鍵字之后與第一個參數指定的顏色對比度最高的顏色作為輸出.

這么多CSS顏色新方法, 我應該使用哪個?

現代網頁中推薦使用oklch顏色模型, 使用 OKLCH 的好處:

• OKLCH 各分量是獨立的,互不影響的, 對一個分量的修改不會影響其它分量. 而 hsl()不是.
• OKLCH 使設計師無需手動選擇每種顏色。他們可以定義一個公式，選擇幾種顏色，并自動生成整個設計系統調色板。
• OKLCH 可用于任意色域, 標準色域 sRGB, 廣色域 P3, Rec2020 等。例如，新設備(如 Apple 的設備)可以顯示比舊 sRGB 顯示器更多的顏色，我們可以使用 OKLCH 來指定這些新顏色。而且超出色域瀏覽器會呈現最接近的顏色
• 與 hsl() 不同，OKLCH 更適合顏色修改和調色板生成。因為它使用的是感知亮度, 因此不會再出現意想不到的結果，比如在 Sass 中使用 darken() 產生的意外結果。
• 憑借其可預測的亮度 L, OKLCH 提供了更好的 a11y。
• 隨著 CSS 相對顏色函數的瀏覽器普及, 可以很方便的微調顏色(比如根據基色生成強調色, 只需修改 L 分量), 也將不再需要js偵測背景色的高對比度文本色. 根據 APAC 對比度算法,在感知亮度 L >=72% 時所有色相下黑色文本都不會產生對比度的可訪問性問題.
• 與 rgb() 或十六進制(#ca0000)不同，OKLCH 是人類可讀和可預測的。您只需查看數字即可快速輕松地知道 OKLCH 值代表哪種顏色。OKLCH 的工作方式類似于 HSL，但它對亮度的編碼比 HSL 更好。

OKLCH 顏色由亮度(明度)、色度(飽和度或純度)、色相三個維度組成, 這也是人類認知里的顏色的三個基本屬性.

• 亮度(lightness) 是感知亮度，取值: 0-1 或 0-100%，0為黑色，1或100%為白色，"感知"意味著它對我們的眼睛具有一致的亮度,并且是可預測的, 這與 hsl()中的 L 是不同的。
• 色度(chroma) 從灰色到最飽和的顏色, 對于 P3 和 sRGB 顏色空間應低于 0.37, Rec2020 顏色空間應低于 0.4
• 色相(hue) 在色環中的角度, 色環: 紅、橙、黃、綠、青、藍、紫。紅為20度左右, 每個顏色間隔50度左右.

詳細分析請看這篇文章: OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog

為了兼容性考慮或想在js中使用CSS相同的顏色功能怎么辦?

使用這個 colorjs.io npm包即可. 它完全支持CSS Color Module Level 4 和 Level 5 的規范

新的CSS Color Module規范產生的影響:

1. 瀏覽器原生的顏色選取器元素需要更新以支持新的顏色模型, 目前還沒有瀏覽器實現.
2. 現有第三方的顏色選取器組件都是基于sRGB的, 不能選取新的色彩空間中的顏色. 這些組件需要重構.

我們的正式開源輕量級的基于Tailwindcss的React 組件庫中的顏色選取組件正在重構中

言

如果網頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網頁，就如同多彩繽紛的世界。

在了解css顏色之前，我們回顧下計算機是如何顯示顏色的？計算機根據色光三原色的原理通過各種算法來顯示顏色。

css 顏色 —— color

網頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅，綠，藍三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

對于16進制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍，每種顏色取值從00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍色*/

對于rgb的表示法，由三個參數組成，分別是紅、綠、藍，每種顏色取值從0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍色*/

紅，綠，藍值從0到255的結合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。

但是現代大多數顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設置不能夠顯示的顏色，可以參考網頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

顏色除了有三原色紅綠藍組成，還有亮度層級，如下圖：

rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設置更加漂亮的顏色。

css 背景 —— background

通過background屬性可以設置元素的背景色、背景圖片，語法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一個聲明中設置所有的背景屬性，可以在這里設置如下屬性：

• background-color —— 背景顏色。
• background-image —— 使用的背景圖像
• background-position —— 背景圖像的位置
• background-size —— 背景圖片的大小
• background-repeat —— 如何重復背景圖像
• background-origin —— 背景圖片的定位區域
• background-clip —— 背景的繪制區域
• background-attachment —— 背景圖像是否固定或者隨著頁面的其余部分滾動。

各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。

建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當然你也可以分開使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景顏色 —— background-color

background-color 和之前講的的color 一樣，可以使用16進制、rgb、rgba等設置顏色。如下實例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下圖顯示：

注意：background-color: transparent; 指透明色，不顯示任何顏色。

2、背景圖片的使用——background-image

給html元素添加背景圖片，在早期網頁制作中被廣泛應用，如今已不建議大量使用。如下實例：

body {background-image:url(/static/bg.gif);}

這里使用了一個125*125大小的圖片，如下：

但是你會發現，整個網頁鋪滿了圖片，上面的代碼默認會鋪滿整個頁面從左到右，從上到下 。如果不想被平鋪，可以使用background-repeat 設置。

背景圖片同時可以設置多個背景圖片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。

如下效果：

3、背景重復方式 —— background-repeat

它有如下幾個屬性：

實例如下：

4、背景圖的位置 —— background-position

背景圖片默認顯示在左上角，語法如下：

background-position: x y; // x 距離左邊距離，y距離頂部距離

如果要改變它的位置，可以使用關鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分數值。

x 可以取值 百分比| 數值| left | center | right。

y 可以取值 百分比| 數值| top| center | bottom。

當只設置一個值的時候，另一個會缺省為 center。

使用關鍵字，將背景圖片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 

50% 50% 等同于 center center，顯示效果和上圖一樣。

還可以使用具體數值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 

顯示效果如下：

5、背景圖相對于容器的基準點 —— background-origin

就是設置背景圖片相對于html元素什么位置作為初始坐標點，語法：

background-origin: padding-box|border-box|content-box;

幾種值得含義：

如下實例：

6、背景圖片大小 —— background-size

默認會顯示背景圖原始尺寸，可以通過此屬性設置背景圖片在元素上的大小，語法：

background-size: width height;

寬度和高度可以使用 數值、百分比%、cover 及 contain ;

數值：可以使用任何單位的數字，比如 px、em、cm等。如果設置一個值，第二個為"auto(自動)"。

百分比%：相對于其所在html原始寬度和高度，如果設置一個值，第二個為"auto(自動)"。

cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

如下示例：

7、背景圖像是否固定或者隨著頁面的其余部分滾動

background-attachment 屬性有以下幾個值：

如設置一個固定的背景圖片，不跟隨頁面滾動：

background-attachment:fixed;

滾動滾動條，會發下背景圖片始終固定在屏幕那個位置。

8、背景繪制區域 —— background-clip

語法如下：

background-clip: border-box|padding-box|content-box;

這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：

9、背景層的混合模式 —— background-blend-mode

所謂混合模式就是將圖片與顏色或圖片與圖片進行混合，語法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

屬性值：

示例如下：

其它模式可以自己試試，看下有什么區別。

到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習，每種屬性進行組合使用看看其效果。

一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補充。

上篇：前端入門——css鏈接樣式

節我們來講一下顏色，因為我們后面學習 CSS 樣式時，會經常用到顏色，顏色也是網頁中必不可少的一個元素。例如我們可以給某個字體設置顏色，給元素的邊框設置顏色，設置元素的背景顏色等。要想一個網頁好看，肯定是需要給它添加一些色彩的。

顏色值

顏色是通過對紅、綠和藍光的組合來顯示的。我們一般會通過下面三種方式來規定 CSS 中的顏色：

• 顏色名稱
• 十六進制顏色值
• RGB 顏色

顏色名稱

HTML 和 CSS 顏色規范中定義了 147 種顏色名，其中有 17 種標準顏色，加上 130 種其他顏色。

例如 red 紅色、green 綠色、blue 藍色等，因為顏色名太多了，這里就不一一給大家列出來啦。我們主要講一下如何設置顏色。

示例：

例如通過顏色名，將字體顏色設置為紅色：

color:red;

或者將元素的背景顏色設置為粉色：

background-color: pink;

使用的使用很簡單，直接在 CSS 屬性后面接顏色名即可，不需要加別的修飾符。

十六進制顏色值

十六進制顏色值就是通過十六進制來表示顏色，十六進制顏色的規定為：#RRGGBB。其中 RR 是紅色、GG 綠色、BB 藍色，十六進制整數規定了顏色的成。所有值必須介于 0-9 與 A-F 之間。

十六進制值使用三個雙位數來編寫，并且要以 # 號開頭。例如 #000000 黑色、#FF0000 紅色、#00FF00 綠色、#0000FF 藍色。

而當雙位數相同時（一二位相同、三四位相同、五六位相同），可以縮寫，例如 #000000 可以縮寫為 #000、#FF0000 可以縮寫為 F00 等。但是像 #101010 這種就不能縮寫。

示例：

例如分別將字體顏色設置為紅色、綠色、藍色：

color:#FF0000;
color:#00FF00;
color:#0000FF;

上述代碼也可以簡寫成：

color:#F00;
color:#0F0;
color:#00F;

RGB 顏色

RGB 顏色值是通過 rgb(red, green, blue) 來規定的，三個參數分別定義紅、綠、藍的強度，參數值可以是介于 0 與 255之間的整數，或者是 0% 到 100% 的百分比。

例如 rgb(255,0,0) 表示紅色、 rgb(0,0,255) 表示藍色等。

示例：

例如將背景顏色設置為紅色、綠色、藍色：

background-color:rgb(255,0,0);
background-color:rgb(0,255,0);
background-color:rgb(0,0,255);

總結

上述就是我們所講的三種規定 CSS 中顏色的方法啦，可以設置使用的顏色有很多，但我們不可能將這些顏色值全部記住，所以其實只需要搞清楚顏色值是怎么使用的就可以啦。

像我們平時工作中，一般會由設計師將網頁設計好，然后將設計圖給我們，我們在制作網頁的時候，就只需要通過顏色吸取器吸一下設計圖中的顏色，然后就知道是什么顏色啦。