「進擊的前端工程師」CSS色彩揭秘

童歐巴發表於2020-03-08
前端工程師CSS
本文已收錄在Github github.com/Geekhyt，感謝Star。

每每提及色彩，我總會想起蘇軾的一年好景君須記，正是橙黃橘綠時，白居易的日出江花紅勝火，春來江水綠如藍，朱熹的等閒識得東風面，萬紫千紅總是春。

也許世界本無色彩。

古人曾用詩詞賦予了這個世界色彩，而如今是物理的光學讓我們認識到了色彩。那麼本文將帶你揭秘CSS中的色彩。

先贊在看，養成習慣！

CSS中的color

CSS1只支援16個基本顏色關鍵字

CSS2在CSS1的基礎上新增了橙色orange

CSS3增加了147個關鍵字

CSS4只增加了一個關鍵字 rebeccapurple

連結：CSS3中新增147個顏色關鍵字

我知道你會說這個CSS4的新增的一個關鍵字rebeccapurple是什麼鬼？還嫌我英文單詞記的不夠多嗎？搞個這麼難記的東西出來？

但實際上，CSS的作者Eric Meyer 的女兒麗貝卡死於腦癌，享年六歲。這是她最喜歡的顏色。

麗貝卡紫

連結：為了紀念 Eric Meyer 的女兒，色值 #663399 在 CSS4 中被定義為 「rebeccapurple」

冰冷嚴謹的程式碼中充滿了如此溫情之舉，你值得記憶。

RGB

三原色理論告訴我們，紅、綠、藍三種顏色的光可以構成所有的顏色。

為什麼是這三種顏色呢？

因為人類的視神經對這三種顏色比較敏感。

現代計算機中用0-255的數字來表示每一種顏色。在RGB顏色表示方法中，三色數值最大的就是白色，三色數值為0則表示黑色。理解起來也比較符合人類的認知，紅綠藍三種顏色的光混合起來就是白光，沒有光就是黑色。

除此之外，我們需要注意兩點：

1.rgb數值格式只能是整數，不能是小數。

2.還可以用百分比來進行表示，百分比範圍0%-100%

RGB表示法

#div {background-color:rgb(255,0,0);} /* 紅 */
#div {background-color:rgb(0,255,0);} /* 綠 */
#div {background-color:rgb(0,0,255);} /* 藍 */

16進製表示法 HEX

十六進位制顏色實際上和rgb顏色是近親，都歸屬於rgb顏色，只是進位制有差異。

#div {background-color:#FF0000;} /* 紅 */
#div {background-color:#00FF00;} /* 綠 */
#div {background-color:#0000FF;} /* 藍 */

RGBA

RGBA是在RGB的擴充套件，增加了一個Alpha的色彩通道，規定了透明度(取值範圍0～1)，0表示全透明。

RGBA程式碼

div {background:rgba(255,0,0,0.5);}

RGBA與opacity的區別？

opacity 是屬性，rgba()是函式，計算之後是個屬性值。

rgba一般修改的是背景色或者文字的顏色，內容不會繼承透明度。

opacity作用於元素和元素的內容，內容會繼承透明度。

HSL

人類對顏色的感知是遠遠大於紅、綠、藍的，因此HSL顏色模型被設計出來。

HSL分別代表色相，純度以及明度，也有色調、飽和度、亮度的說法。

h表示hue，取值0-360。大致按照紅橙黃綠青藍紫變化 0 (或 360) 為紅色, 120 為綠色, 240 為藍色

s表示saturation，用0-100%表示。值越大，飽和度越高，顏色越亮 0%為灰色，100%為全色

l表示lightness，用0-100%表示。值越高，顏色越亮，100%是白色，50%是正常亮度，0%就是黑色

HSLA

如同RGBA模式是RGB的擴充套件模式，HSLA模式是HSL的擴充套件模式，在HSL的基礎上增加一個透明通道Alpha來設定透明度。

CMYK

回憶起兒時美術老師(我們區的美術協會主席)曾經教過，顏料的三原色是“紅黃藍”。

而顏料能夠顯示顏色的原理是它吸收了所有別的顏色的光，只返回一種色彩。這個世界就是這麼魔幻，你看到的不一定是你看到的。

顏料三原色是紅、綠、藍的補色，也可以叫它們“品紅、黃、青”。這種顏色表示法就叫做CMYK。

熟悉UI設計的同學們一定知道，在印刷業，就是採用顏料三原色來配置油墨。不過除了品紅、黃、青外，因為黑色顏料常用並且價格低廉，所以被單獨指定。

transparent

transparent用來指定全透明色彩，我們可以利用這個屬性畫出三角形。

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #ff0000;
}
<div class="triangle"></div>

transparent也比較魔幻，background-color:transparent包括IE6都支援，boder-color:transparent從IE7開始支援，但是color:transparent卻從IE9瀏覽器開始支援。

currentColor

currentColor的意思是使用當前color的計算值，也從IE9+才支援。

CSS中很多的屬性值預設就是currentColor的表現。

div {
  color: red;
  border: 1px solid;
}

一般情況下無須畫蛇添足的新增currentColor。

div {
  color: red;
  border: 1px solid currentColor;
}

相容性查詢

授人以魚不如授人以漁。

大家可以去這個網站查詢你所要用的屬性在瀏覽器中的相容性。

愛心三連擊

1.看到這裡了就點個贊支援下吧，你的贊是我創作的動力。

2.關注公眾號前端食堂，你的前端食堂，記得按時吃飯！

3.特殊階段，帶好口罩，做好個人防護。

公眾號二維碼.jpg

相關文章