關於web中的顏色表示方法，你知道多少？

前言

想要表示web中的各種顏色，大家首先想到的大概就是用十六進位制或者RGB來表示。但在實際web中，是遠不止這兩種的。今天這篇文章就和大家聊一聊，在web中顏色的各種表示方法。

以如下程式碼為例，大家可以複製程式碼看看效果：

HTML

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

.box {
    width: 200px;
    height: 200px;
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
}
.box > div {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

英文單詞

HTML 和 CSS 顏色規範中預定義了 140+ 個顏色名稱，可以點進這裡進行檢視。直接用英文單詞的好處是直接明瞭，缺點是140+個單詞確實難記，也不能包含所有的顏色。

.one { background-color: red; }
.two { background-color: green; }
.three { background-color: blue; }

十六進位制

十六進位制表示顏色：#RRGGBB ，這裡的十六進位制實質就是RGB的十六進位制表示法，每兩位表示RR（紅色）、GG（綠色）和 BB（藍色）三色通道的色階。所有值必須在 00 到 FF 之間。

.one { background-color: #00FFFF; }
.two { background-color: #FAEBD7; }
.three { background-color: #7FFFD4; }

對於類似於 #00FFFF 的顏色格式也可以縮寫為 #0FF 。

.one { background-color: #0FF; }

如果需要帶上透明度，還可以像下面這樣增加兩個額外的數字：

.one { background-color: #00FFFF80; }

RGB

在 rgb() 函式中，CSS語法如下：

rgb(red, green, blue)

每個引數 red, green, blue 定義顏色的強度，可以是 0 到 255 之間的整數或百分比值（從 0％到 100％）

.one { background-color: rgb(112,128,144); }
.two { background-color: rgb(30%,10%,60%); }
.three { background-color: rgb(    0,139,139); }

十六進位制和RGB的原理都是利用了光的三原色：紅色，綠色，藍色。利用這三種顏色就能組合出上千萬種顏色。簡單的計算一下，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216種。至於為什麼是256級，因為 0 也是數值之一。

RGBA

RGBA就是在RGB之上擴充套件了一個 Alpha 通道，指定物件的不透明度。

.one { background-color: rgba(112,128,144, 0.5); }
.two { background-color: rgb(30%,10%,60%, 0.2); }
.three { background-color: rgb(    0,139,139, 0.5); }

HSL

HSL 分別代表色相（hue）、飽和度（saturation）和亮度（lightness），是一種將RGB色彩模型中的點在圓柱座標系中的表示法。

CSS語法如下：

hsl(hue, saturation, lightness)

色相：色輪上的度數（從 0 到 360）- 0（或 360）是紅色，120 是綠色，240 是藍色。
飽和度：一個百分比值； 0％表示灰色陰影，而 100％是全綵色。
亮度：一個百分比； 0％是黑色，100％是白色。

例子：

.one { background-color: hsl(20, 100%, 50%); }
.two { background-color: hsl(130, 100%, 25%); }
.three { background-color: hsl(240, 80%, 80%); }

HSLA

HSLA 和 HSL 的關係與 RGBA 和 RGB 的關係類似，HSLA 顏色值在 HSL 顏色值上擴充套件 Alpha 通道 - 指定物件的不透明度。

CSS語法如下：

hsla(hue, saturation, lightness, alpha)

例子：

.one { background-color: hsla(20, 100%, 50%, 0.5); }
.two { background-color: hsla(130, 100%, 25%, 0.75); }
.three { background-color: hsla(240, 80%, 80%,0.4); }

opacity

opacity 屬性設定一個元素了透明度級別。

CSS語法如下：

opacity: value|inherit;

它與 RGBA 中的 A 在行為上有一定的區別：opacity 同時影響子元素的樣式，而 RGBA 則不會。感興趣的可以試一試。

關鍵字

除了 <color>s 的各種數字語法之外，CSS還定義了幾組關於顏色的關鍵字，這些關鍵字都有各自的有點和用例。這裡介紹一下兩個特殊的關鍵字 transparent 和 currentcolor 。

transparent

transparen 指定透明黑色，如果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素；或者你不希望某元素擁有背景色，同時又不希望使用者對瀏覽器的顏色設定影響到您的設計。 transparent 就能派上用場了。

在CSS1中，transparent 是作為 background-color 的一個值來用的，在後續的 CSS2 和 CSS3 中， transparent 可以用在任何一個有 color 值的屬性上了。

.one { 
    background-color: transparent;
    color: transparent;
    border-color: transparent;
 }

currentcolor

currentcolor 關鍵字可以引用元素的 color 屬性值。

.one { 
    color: red;
    border: 1px solid currentcolor;
 }

相當於

.one { 
    color: red;
    border: 1px solid red;
 }

下面介紹的這些目前主流瀏覽器還沒有很好的支援，但是已經列為CSS4標準了，所以瞭解一下也是挺好的。

HWB

hwb() 函式表示法根據顏色的色調、白度和黑度來表示給定的顏色。也可以新增 alpha 元件來表示顏色的透明度。

語法如下：

hwb[a](H W B[/ A])

例子：

hwb(180 0% 0%)
hwb(180 0% 0% / .5)
hwb(180, 0%, 0%, .5); /* 使用逗號分隔符 */

目前只有Safari支援。

Lab、Lch

lab() 函式表示法表示 CIE L a b * 顏色空間中的給定顏色，L 代表亮度，取值範圍是[0,100]； a 代表從綠色到紅色的分量，取值範圍是[127,-128]； b* 代表從藍色到黃色的分量，取值範圍是[127,-128]。理論上可以展示出人類可以看到的全部顏色範圍。

語法如下：

lab(L a b [/ A])

例子：

lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);

lch() 函式表示法表示CIE LCH 顏色空間中給定的顏色，採用了同 L a b * 一樣的顏色空間，但它採用L表示明度值，C表示飽和度值，H表示色調角度值的柱形座標。

語法如下：

lch(L C H [/ A])

例子：

lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);

關於常用顏色空間的概念，可以自行查詢，或者點選這篇文章進行了解。

color()

color() 函式表示法允許在特定的顏色空間中指定顏色。

語法如下：

color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ] )

例子：

color(display-p3 -0.6112 1.0079 -0.2192);
color(profoto-rgb 0.4835 0.9167 0.2188)；

這裡可以瞭解一下色域標準。

CMYK

CMYK 即印刷四色模式

印刷四色模式，是彩色印刷時採用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計四種顏色混合疊加，形成所謂“全綵印刷”。四種標準顏色是：C：Cyan = 青色，又稱為‘天藍色’或是‘湛藍’M：Magenta = 品紅色，又稱為‘洋紅色’；Y：Yellow = 黃色；K：blacK=黑色。此處縮寫使用最後一個字母K而非開頭的B，是為了避免與Blue混淆。CMYK模式是減色模式，相對應的RGB模式是加色模式。

電腦螢幕使用 RGB 顏色值顯示顏色，而印表機通常使用 CMYK 顏色值顯示顏色。在CSS4標準中，計劃利用 device-cmyk() 函式來實現。

語法如下：

device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )
<cmyk-component> = <number> | <percentage>

例子：

device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);

參考

https://www.w3school.com.cn/c...

https://www.w3.org/TR/css-col...

https://www.cnblogs.com/ypppt...

https://developer.mozilla.org...

https://blog.csdn.net/gdymind...

https://blog.csdn.net/JiangHu...

最後

關於web中的顏色表示方法，基本就是這些。如果想要再深入瞭解的，可以點選文中的文字連結或文末的參考連結。

關於web中的顏色表示方法，你知道多少？

前言

英文單詞

十六進位制

RGB

RGBA

HSL

HSLA

opacity

關鍵字

transparent

currentcolor

HWB

Lab、Lch

color()

CMYK

參考

最後

相關文章