對于web中的顏色表示方法,你知道多少?

前言

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

以如下代碼為例，大家可以復(fù)制代碼看看效果：

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 顏色規(guī)范中預(yù)定義了 140+ 個(gè)顏色名稱，可以點(diǎn)進(jìn)這里進(jìn)行查看。直接用英文單詞的好處是直接明了，缺點(diǎn)是140+個(gè)單詞確實(shí)難記，也不能包含所有的顏色。

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

十六進(jìn)制

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

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

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

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

如果需要帶上透明度，還可以像下面這樣增加兩個(gè)額外的數(shù)字(這個(gè)我還是第一次知道)：

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

RGB

在 rgb() 函數(shù)中，CSS語法如下：

rgb(red,?green,?blue)

每個(gè)參數(shù) red, green, blue ?定義顏色的強(qiáng)度，可以是 0 到 255 之間的整數(shù)或百分比值（從 0％ 到 100％）

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

十六進(jìn)制和RGB的原理都是利用了光的三原色：紅色，綠色，藍(lán)色。利用這三種顏色就能組合出上千萬種顏色。簡單的計(jì)算一下，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256=16777216種。至于為什么是256級，因?yàn)?0 也是數(shù)值之一。

RGBA

RGBA就是在RGB之上擴(kuò)展了一個(gè) 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色彩模型中的點(diǎn)在圓柱坐標(biāo)系中的表示法。

CSS語法如下：

hsl(hue,?saturation,?lightness)

• 色相：色輪上的度數(shù)（從 0 到 360）- 0（或 360）是紅色，120 是綠色，240 是藍(lán)色。
• 飽和度：一個(gè)百分比值；0％ 表示灰色陰影，而 100％ 是全彩色。
• 亮度：一個(gè)百分比；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 的關(guān)系與 RGBA 和 RGB 的關(guān)系類似，HSLA 顏色值在 HSL 顏色值上擴(kuò)展 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 屬性設(shè)置一個(gè)元素了透明度級別。

CSS語法如下：

opacity:?value|inherit;

它與 RGBA 中的 A 在行為上有一定的區(qū)別：opacity 同時(shí)影響子元素的樣式，而 RGBA 則不會。感興趣的可以試一試。關(guān)鍵字

除了?s 的各種數(shù)字語法之外，CSS還定義了幾組關(guān)于顏色的關(guān)鍵字，這些關(guān)鍵字都有各自的有點(diǎn)和用例。這里介紹一下兩個(gè)特殊的關(guān)鍵字?transparent?和?currentcolor?。

transparent

transparen 指定透明黑色，如果一個(gè)元素覆蓋在另外一個(gè)元素之上，而你想顯示下面的元素；或者你不希望某元素?fù)碛斜尘吧瑫r(shí)又不希望用戶對瀏覽器的顏色設(shè)置影響到您的設(shè)計(jì)。transparent 就能派上用場了。

在CSS1中，transparent 是作為 background-color 的一個(gè)值來用的，在后續(xù)的 CSS2 和 CSS3 中， transparent 可以用在任何一個(gè)有 color 值的屬性上了。

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

currentcolor

currentcolor 關(guān)鍵字可以引用元素的 color 屬性值。

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

相當(dāng)于

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

下面介紹的這些目前主流瀏覽器還沒有很好的支持，但是已經(jīng)列為CSS4標(biāo)準(zhǔn)了，所以了解一下也是挺好的。

HWB

hwb() 函數(shù)表示法根據(jù)顏色的色調(diào)、白度和黑度來表示給定的顏色。也可以添加 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() 函數(shù)表示法表示 CIE L * a * b * ?顏色空間中的給定顏色，L* 代表亮度，取值范圍是[0,100]；a* 代表從綠色到紅色的分量，取值范圍是[127,-128]；b* 代表從藍(lán)色到黃色的分量 ，取值范圍是[127,-128]。理論上可以展示出人類可以看到的全部顏色范圍。

語法如下：

lab(L?a?b?[/?A])

例子：

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

lch() 函數(shù)表示法表示CIE LCH 顏色空間中給定的顏色，采用了同 L * a * b * 一樣的顏色空間，但它采用L表示明度值，C表示飽和度值，H表示色調(diào)角度值的柱形坐標(biāo)。

語法如下：

lch(L?C?H?[/?A])

例子：

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

關(guān)于常用顏色空間的概念，可以自行查詢，或者點(diǎn)擊這篇文章進(jìn)行了解。

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

語法如下：

color(?[?[?|?]??[?+?|??]?[?/??]??]?)

例子：

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

CMYK

CMYK 即印刷四色模式

印刷四色模式，是彩色印刷時(shí)采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計(jì)四種顏色混合疊加，形成所謂“全彩印刷”。四種標(biāo)準(zhǔn)顏色是：C：Cyan = 青色，又稱為‘天藍(lán)色’或是‘湛藍(lán)’M：Magenta = 品紅色，又稱為‘洋紅色’；Y：Yellow = 黃色；K：blacK=黑色。此處縮寫使用最后一個(gè)字母K而非開頭的B，是為了避免與Blue混淆。CMYK模式是減色模式，相對應(yīng)的RGB模式是加色模式。

電腦顯示屏使用 RGB 顏色值顯示顏色，而打印機(jī)通常使用 CMYK 顏色值顯示顏色。在CSS4標(biāo)準(zhǔn)中，計(jì)劃利用 device-cmyk() 函數(shù)來實(shí)現(xiàn)。

語法如下：

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

例子：

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

參考

www.w3school.com.cn/cssref/css_… www.w3.org/TR/css-colo… www.cnblogs.com/ypppt/p/132… developer.mozilla.org/en-US/docs/… blog.csdn.net/gdymind/art… blog.csdn.net/JiangHui121…

最后

關(guān)于web中的顏色表示方法，基本就是這些。如果想要再深入了解的，可以點(diǎn)擊文中的文字鏈接或文末的參考鏈接。

歡迎加入技術(shù)交流群