CSS Podcast - 006: Color Part One
顏色是所有網站和 CSS 的重要部分，而且顏色類型、函式和處理方式皆有許多選項。
如何決定要使用的顏色類型？ 如何將顏色設為半透明？ 在本課程中，您將瞭解自己可以透過哪些選項為專案和團隊做出正確決策。
CSS 提供多種資料類型，例如字串和數字。顏色是其中一種類型，使用其他類型 (例如用來表示其定義的數字)。
數字顏色
您第一次在 CSS 中使用顏色時，很可能是用數字顏色。我們能處理幾種不同形式的數值顏色值。
十六進位顏色
h1 {
color: #b71540;
}
十六進位標記法 (通常縮短成十六進位) 是 RGB 的簡寫語法，會將數值指派給紅色和藍色的三種主要顏色。
十六進位範圍為 0-9 和 A-F。在六位數序列中使用時，這些值會轉譯為 RGB 數值範圍，也就是 0-255，分別對應紅色、綠色和藍色色版。
您也可以使用任何數字顏色定義 Alpha 值。Alpha 值是指透明度的百分比。在十六進位程式碼中，您可以將另外兩位數加到六位數序列中，也就是八位數的序列。舉例來說，如果想在十六進位程式碼中設定黑色，請編寫 #000000。如果想新增 50% 的透明度，請將其變更為 #00000080。
由於十六進位尺度為 0-9 和 A-F，因此透明度值可能不太符合您預期的。
以下是一些在黑色十六進位代碼 #000000 中加入的常用值：
- 0% alpha (完全透明) 為 00：
#00000000 - 50% alpha 為 80：
#00000080 - 75% alpha 為 BF：
#000000BF
如要將兩位數的十六進位值轉換為十進位，請將第一個數字乘以 16 (因為十六進位制為 16)，然後再加上第二位數。使用 BF 做為 75% alpha 的例子：
- B 等於 11，乘以 16 等於 176
- F 等於 15
- 176 + 15 = 191
- Alpha 值為 191 - 255 的 75%
RGB (紅、綠、藍)
h1 {
color: rgb(183, 21, 64);
}
RGB 顏色是以 rgb() 顏色函式定義，並以數字或百分比做為參數。數字必須介於 0-255 範圍內，百分比必須介於 0% 到 100% 之間。
RGB 的比例是 0-255，因此 255 等於 100%，0 到 0%。
如要在 RGB 中設定黑色，請將該值定義為 rgb(0 0 0)，例如零紅色、零綠色和零藍色。黑色也可以定義為 rgb(0%, 0%, 0%)。白色與以下完全相同：rgb(255, 255, 255) 或 rgb(100%, 100%, 100%)。
Alpha 版是透過兩種方式在 rgb() 中設定。請在紅色、綠色和藍色參數「後方」新增 /，或使用 rgba() 函式。Alpha 值可以使用百分比或介於 0 到 1 之間的小數。舉例來說，如要在新瀏覽器中設定 50% 的 Alpha 黑邊，請寫入：rgb(0 0 0 / 50%) 或 rgb(0 0 0 / 0.5)。
如需更廣泛的支援，請使用 rgba() 函式寫入：rgba(0, 0, 0, 50%) 或 rgba(0, 0, 0, 0.5)。
HSL (色調、飽和度、亮度)
h1 {
color: hsl(344, 79%, 40%);
}
HSL 代表色調、飽和度和亮度。Hue 可描述色輪上的值，從 0 到 360 度，以紅色開始 (同時為 0 和 360)。180 或 50% 的色調將落在藍色範圍內。這是所見色彩的原點。
飽和度是指所選色調的活躍程度。
飽和度 (飽和度為 0%) 的色彩將以灰階顯示。最後，亮度是參數，用來描述增加光的白度到黑色的體重計。100% 的亮度將一律變成白色。
使用 hsl() 顏色函式時，您可以編寫 hsl(0 0% 0%)，甚至是 hsl(0deg 0% 0%) 來定義真黑。這是因為色調參數定義了色輪的度數，如果您使用數字類型，就會是 0-360。您也可以使用角度類型，例如 (0deg) 或 (0turn)。飽和度和亮度皆以百分比定義。
Alpha 版定義於 hsl() 中，與 rgb() 相同，您可以在色調、飽和度和亮度參數後面新增 /，或使用 hsla() 函式。Alpha 值可以使用百分比或介於 0 到 1 之間的小數。舉例來說，如要將 50% 的黑色設為黑色，請使用 hsl(0 0% 0% / 50%) 或 hsl(0 0% 0% / 0.5)。使用 hsla() 函式寫入 hsla(0, 0%, 0%, 50%) 或 hsla(0, 0%, 0%, 0.5)。
顏色關鍵字
CSS 中有 148 種具名顏色。這些是純英文名稱，例如紫色、番茄和金色。根據 Web Almanac 指出，部分最受歡迎的名稱為黑色、白色、紅色、藍色和灰色。我們最喜歡的一款包括 Goldenrod、Aliceblue 和 Hotpink。
除了標準顏色以外，您還可以使用特殊關鍵字：
transparent為全透明。也是background-color的初始值currentColor是color屬性中內容比對計算的動態值。如果文字顏色為red，然後將border-color設為currentColor，也會是紅色。如果您在定義currentColor的元素沒有已定義的color值的情況下，Ccascade 會改為計算currentColor
如何在 CSS 規則中使用顏色
如果 CSS 屬性接受 <color> 資料類型做為值，就會接受上述任何一種顏色表示方法。如果是樣式文字，請使用 color、text-shadow 和 text-decoration-color 屬性，這些屬性都接受顏色做為值或顏色的一部分。
針對背景，您可以將顏色設為 background 或 background-color 的值。顏色也可用於漸層，例如 linear-gradient。梯度是一種圖片類型，可透過 CSS 程式輔助方式定義。漸層可接受任何色彩格式組合的兩種以上顏色，例如十六進位、RGB 或 Hsl。
最後，border-color 和 outline-color 會設定方塊上的邊框和外框顏色。box-shadow 屬性也接受顏色做為值。
隨堂測驗
測驗您對色彩的瞭解程度
以下何者是有效的顏色？
rbga(400 0 1)#0f08#OOFZ2rgb(255, 0, 0)hsl(180deg 50% 50%)hotpink尋找無效的 Hsl 顏色。
hsl(5, 0%, 90%)hsl(.5turn 40% 60%)hsl(0, 0, 0)hsl(2rad 50% 50%)hsl(0 0% 0% / 20%)