對於CSS顏色，想必大家都或多或少用過，本文是筆者整理的關於CSS顏色相關的一些基礎知識，目的是希望在需要用到CSS顏色相關知識時，看這一篇就夠了。
下面多圖預警，就是要給你一點「顏色「看看（偷笑ing）。
本篇主要包含以下內容：
CSS顏色體系包含哪些成員？
HTML頁面哪些屬性可以設置顏色？
CSS顏色體系中那些被忽略的王者成員
總結
閒話少說，我們開門見山：
一、CSS顏色體系包含哪些成員？一張圖。
幾點說明：
顏色關鍵字，CSS3中新增147個顏色關鍵字，詳情請見www.w3school.com.cn/cssref/css_…
HEX，格式如#RRGGBB，其中RR、GG、BB取值00-FF。
RGB與RGB，即Red-Green-Blue-Alpha，紅色，綠色，藍色，透明度。前三個取值從0-255或0%-100%，alpha取值0-1。
HSL與HSLA，即Hue-Saturation-Lightness-Alpha，色調，飽和度，亮度，透明度，H取值從0-360，其中 0（360）表示紅色，120表示綠色，240表示藍色，S和L取0%-100%，alpha取值0-1。
transparent，子元素不會繼承該屬性（區別於opacity:0，opacity會被子元素繼承）。
currentColor表示當前標籤所設定或所繼承的文字顏色，如果當前標籤定義了color屬性，則currentColor等於color屬性值，如果沒定義color屬性，則繼承父節點的color屬性值。
二、HTML頁面哪些屬性可以設置顏色？一張圖
針對以上HTML元素，均可設置顏色值。那麼在實際工程中是怎樣用的呢？一圖勝千言。
圖1
圖2
圖3
需要注意的幾點：
當同一個元素被賦予多個class樣式時，真正起作用的樣式是style sheet中最後定義的類，所以下圖文字為綠色，如圖1。
當background-color與background同時被賦值時，background樣式優先級高於background-color，與二者在style sheet中定義的先後位置無關，如圖2。
其中border、box-shadow、text-shadow默認為當前盒子的文本顏色。
簡單使用如上，青銅級別的用法。只要記住屬性名，顏色值怎麼表示就夠了，一般情況下推薦使用hsla顏色值，比較靈活，網上也有很多在線互轉的工具。
下面來介紹兩個比較重要的顏色值，王者登場。
三、CSS顏色體系中那些被忽略的王者成員
transparent，表示完全透明的顏色，比較常見的用法如下：
2. currentColor，表示當前標籤所繼承的文字顏色，常見用法如下：
四、總結
本文主要是總結了HTML元素設置顏色值相關的基礎知識，希望能幫助到同學們。後面會不定期總結前端相關基礎知識，在前端越走越遠的路上，與大家同行。
來源：https://juejin.im/post/5d3911b251882508dc163111
聲明：著作權歸作者所有。如有侵權請聯繫小編刪除！！！