現(xiàn)代 CSS 顏色指南，你學(xué)會了嗎?

作者：CUGGZ 2022-10-09 09:30:33

開發(fā) 前端

CSS中提供了148個命名顏色，所有瀏覽器都支持這些名稱，這些名稱都是被預(yù)定義過色值的。下面是部分顏色名稱以及對應(yīng)的十六進制顏色值。

大家好，我是 CUGGZ。

1. CSS 命名顏色

在 CSS 中顏色無處不在，它們可以作為文字、背景、陰影、表格、邊框、鏈接等屬性。我們在 CSS 中使用的大多數(shù)顏色都是 hex 和 RGB，其實表示顏色的方式有很多，下面就來認識一下 CSS 中的顏色體系！

CSS中提供了148個命名顏色，所有瀏覽器都支持這些名稱，這些名稱都是被預(yù)定義過色值的。下面是部分顏色名稱以及對應(yīng)的十六進制顏色值：

查看所有預(yù)定義顏色名稱：https://www.w3schools.com/colors/colors_names.asp

下面是使用顏色名稱的示例：

div {
  color: black;
  border: 1px solid blueviolet;
  background: skyblue;
}

注意：所有命名顏色都不區(qū)分大小寫。

除了顏色名稱，還有一些其他命名的顏色和關(guān)鍵字值得一提：

（1）transparent

transparent關(guān)鍵字用作rgba(0, 0, 0, 0)的快捷方式，它表示完全透明。該關(guān)鍵字目前在所有瀏覽器都是支持的。它是background-color屬性的默認值。

div {
  background-color:transparent;
}

（2）currentColor

currentColor 表示當前的顏色。如果沒有指定，就會從父容器繼承的文本顏色。所以，以下 CSS 規(guī)則是等效的：

div {
  color: red;
  background-color: currentColor;
}

div {
  color: red;
  background-color: red;
}

該屬性在SVG中使用時很方便，可以將指定的填充或描邊顏色設(shè)置為currentColor，以確保SVG顏色與其父級的文本顏色匹配。

（3）inherit

inherit 是一個保留字，它不局限于顏色，表示該屬性采用與元素父級的屬性相同的值。對于繼承的屬性，主要用途就是覆蓋另一個規(guī)則。

（4）系統(tǒng)顏色

還有一些其他特殊的顏色關(guān)鍵字，它們用來匹配一些系統(tǒng)元素，旨在保持瀏覽器上應(yīng)用程序的一致性。系統(tǒng)顏色成對出現(xiàn)：背景顏色-前景顏色。下面是系統(tǒng)顏色相關(guān)關(guān)鍵字：

背景顏色	前景顏色
buttonFace	buttonText
canvas	activeText、canvasText、linkText、visitedText
field	fieldText
highlight	highlightText

下面是不同瀏覽器對系統(tǒng)顏色支持：

2. RGB 顏色

RGB 值也是我們常用的顏色表示方式。RGB 指的就是紅-綠-藍，這個順序非常重要。每種顏色使用 0 到 255 之間的數(shù)字指定。最常見的 RGB 值黑色：rgb(0,0,0) 和白色：rgb(255,255,255)。RGB表示法使我們以更易讀的形式來訪問與十六進制值相同的顏色范圍。

下面是使用RGB 值表示顏色的示例：

div {
  color: rgb(0,0,0);
  border: 1px solid rgb(155,55,89);
  background: rgb(255,255,255);
}

除此之外，我們還可以使用名為rgba() 的屬性為 rgb 值定義 alpha 值，alpha 值是透明度的百分比。它類似于 rgb，但允許添加第四個值。不透明度范圍可以是 0 到 1 之間的任何值，0 是最小值（無不透明度），1 是最大值（完全不透明度）：

div {
  color: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,0,0,0.8);
  background: rgba(0,125,0,0.2);
}

注意，十六進制顏色值不區(qū)分大小寫。所以，#ff0000、#FF0000、#Ff0000的顯示效果是一致的。

3. Hex 顏色

我們還可以使用十六進制值來表示 CSS 中的顏色，這也是我們用的最多的顏色表示方式。十六進制使用 16 個符號表示，使用 0 - 9 表示值 0 到 9，A - F 表示值 10 到 15，如下：

在 CSS 中，使用 6 個十六進制數(shù)字來表示顏色。這意味著分別使用兩個數(shù)字來表示紅色 (R)、綠色 (G) 和藍色 (B) 分量。例如，#000000表示黑色，它是最小的十六進制值；#FFFFFF表示白色，它是最大的十六進制值。

下面是使用顏色名稱的示例：

div { 
  color: #000000;
  border: 1px solid #00FF00;
  background: #FF0000;
}

我們也可以使用 3 個值（每種顏色一個）來縮短十六進制值，如果每兩位的值相同，就可以縮寫一半：

div {
  color: #000;
  border: 1px solid #0F0;
  background: #F00;
}

我們也可以給十六進制顏色定義 alpha 值，alpha 值是透明度的百分比。在十六進制代碼中，將另外兩位數(shù)字添加到六位數(shù)字序列中，形成一個八位數(shù)字序列。例如，要在十六進制代碼中設(shè)置黑色#000000，要添加 50% 的透明度，可以將其更改為#00000080。

可以看到，十六進制顏色值是很難閱讀的。我們基本不太可能通過讀取十六進制值來猜測元素的顏色。

4. HSL 顏色

HSL 全稱是 Hue-Saturation-Lightness，分別表示色調(diào)、飽和度和亮度。它基于 RGB 色輪的。每種顏色都有一個角度以及飽和度和亮度值的百分比值。下面就先來了解一下這三個概念，

色調(diào)：色調(diào)描述了色輪上的值，從 0 到 360 度，從紅色開始（0 和 360）；

飽和度：飽和度是所選色調(diào)的鮮艷程度，100% 表示完全飽和的亮色，0% 表示完全不飽和的灰色；

亮度：顏色的亮度級別，較低的值會更暗，更接近黑色，較高的值會更亮，更接近白色。

HSL顏色函數(shù)的表示形式如下：

hsl(Hue, Saturation, Lightness)

其中Hue是色調(diào)值，即在色輪上的位置，可以是 0到360deg之間的任何值，該參數(shù)還可以接角度單位 turn（圈）和無單位。下面三種規(guī)則的顯式效果是一樣的：

div {
  background-color: hsl(180deg, 50%, 50%);
}

div {
  background-color: hsl(0.5turn, 50%, 50%);
}

div {
  background-color: hsl(180, 50%, 50%);
}

一些常見的HSL顏色值：

除此之外，HSL顏色值也可以添加alpha值，表示透明度，其使用形式如下：

hsla(Hue, Saturation, Lightness / alpha)

這里就不再需要用逗號分隔值，而使用斜杠，比如：

div {
  background-color: hsl(0 100% 50% / 0.5);
}

5. HWB 顏色

HWB 全稱為Hue-Whiteness-Blackness，表示色調(diào)、白度和黑度。

色調(diào)：色輪中的一個角度；
白度：表示要混合的白色量的百分比。值越高，顏色越白。
黑度：表示要混合的黑色量的百分比。值越高，顏色越黑。

與 HSL 一樣，色調(diào)可以是 0 到 360 內(nèi)的任何值。黑度和白度用來控制有多少黑色和白色混合在已選色調(diào)中，它們也是0-100%之間的值，當為100%時，就會出現(xiàn)全黑或者全白。如果等量的白色或者黑色混合在一起，顏色就會變得越來越灰。這個函數(shù)對于創(chuàng)建單色調(diào)色板非常有用：

hwb()也可以添加alpha值來表示透明度，也使用斜杠來分隔：

hwb(194 0% 0%) 
hwb(194 0% 0% / .5)

注意：這種顏色格式目前只在Safari 15上得到了支持，謹慎使用。

6. LAB 顏色

LAB 是一個可以在 Photoshop 等軟件中訪問的顏色空間，它代表了人類可以看到的整個顏色范圍。它使用三個軸表示：亮度、a 軸和b 軸。

亮度：從黑色到白色。值越低，顏色越接近黑色。
a軸：從綠色到紅色。較低的值接近綠色，較高的值更接近紅色。
b軸：從藍色到黃色。較低的值接近藍色，越高的值更接近黃色。

亮度的值可以是任意百分比，不限于0%和100%，可以超過 100%。超亮白色可以使用高達 400% 的百分比。a和b軸的值可以是正值或者負值。兩個負值將導(dǎo)致顏色朝向光譜的綠色/藍色端，而兩個正值可以產(chǎn)生更橙色/紅色的色調(diào)。所有參數(shù)由空格分隔：

div {
  background-color: lab(80% 100 50);
}

div {
  background-color: lab(80% -80 -100);
}

lab()也可以添加alpha值來表示透明度，也使用斜杠來分隔：

div {
  background-color: lab(80% -80 -100 / .5);
}

注意：這種顏色格式目前只在Safari 15上得到了支持，謹慎使用。

7. LCH 顏色

LCH 代表亮度、色度和色調(diào)。它與 Lab 具有相同的 L 值，但不是使用坐標 a* 和 b*，而是使用 C（色度）和 H（色調(diào)）。色調(diào)可以是 0 到 360 之間的值。色度代表顏色的量，它類似于 HSL 中的飽和度。但是色度值可以超過 100，理論上它是無上限的。

div {
  background-color: lch(80% 100 50);
}

對于色度值，目前的瀏覽器和顯示器可以顯示顏色量是有限的，只有0-230之間的值是有用的，超過之后就和230的差異就不大了：

這個方法也可以添加第四個可選參數(shù) alpha。該函數(shù)遵循空格分隔（alpha 帶有斜杠）：

div {
  background-color: lch(80% 100 50 / .5);
}

注意：這種顏色格式目前只在Safari 15上得到了支持，謹慎使用。

那為什么有了 HSL還需要 LAB 和 LCH 呢？因為使用 LAB 或 LCH 可以獲得更大范圍的顏色。LCH 和 LAB 旨在讓我們能夠接觸到人類視覺的整個范圍。除此之外，HSL 和 RGB 在感知上并不均勻，并且在 HSL 中，增加或減少亮度會根據(jù)色調(diào)產(chǎn)生完全不同的效果。

8. CMYK 顏色

CMYK 代表 Cyan、Magenta、Yellow 和 Key，它們與打印機中的墨水顏色相匹配。雖然屏幕通常以 RGB 來顯示顏色，而打印機通常使用青色、品紅色、黃色和黑色的組合來表示顏色，這些是最常見的墨水顏色。

可以使用device-cmyk()來指定CMYK顏色，使用空格來分隔參數(shù)，也可以添加alpha值來設(shè)置透明度。

div {
  background-color: device-cmyk(1 0 0 0);
}

注意，該方法存在兼容性問題，謹慎使用。

9. 顏色混合

在 CSS Color Module Level 5 提案中提出了顏色混合的概念和相關(guān)方法 color-mix()，該方法可以混合了兩種顏色，類似于 Sass 中的mix()函數(shù)。color-mix() 允許我們指定顏色空間，默認使用 LCH，具有出色的混合效果。可以指定每種顏色混合多少：

div {
  background-color: color-mix(in lch, red, blue);
}

div {
 background-color: color-mix(in lch, red 30%, 70% blue);
}

責(zé)任編輯：武曉燕來源：前端充電寶

CSS 瀏覽器十六進制