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。
由於 16 進制是 0-9 和 A-F，因此透明度值可能與您預期的不同。以下是加入黑色 16 進位碼 #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
- 透明度值為 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%)。
您可以透過下列兩種方式在 rgb() 中設定 alpha。您可以選擇在紅、綠和藍參數後方新增 /，或是使用 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 是色調、飽和度和亮度的縮寫。色調是指色彩轉輪上的值，從 0 到 360 度，以紅色為起點 (0 和 360 皆為紅色)。色調為 180 或 50% 的話，就會落在藍色範圍內。這是我們看到的顏色來源。
飽和度是指所選色調的鮮豔程度。飽和度為 0% 的完全去飽和色彩會顯示為灰階。最後，亮度是描述從白色到黑色新增光線的比例的參數。亮度為 100% 的顏色一律會顯示為白色。
使用 hsl() 色彩函式，您可以透過寫入 hsl(0 0% 0%) 或 hsl(0deg 0% 0%) 來定義真黑色。這是因為色調參數會定義色彩轉輪上的角度，如果您使用數字類型，則角度為 0-360。您也可以使用角度類型 (0deg) 或 (0turn)。飽和度和亮度都以百分比定義。
在 hsl() 中定義的 Alpha 與 rgb() 相同，即在色相、飽和度和亮度參數 或 後方新增 /，或使用 hsla() 函式。Alpha 可以使用百分比或介於 0 和 1 之間的小數定義。例如，如要設定 50% 的 Alpha 黑色，請使用 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 的資料，最受歡迎的名稱包括黑色、白色、紅色、藍色和灰色。我們最喜歡的顏色包括金黃色、天藍色和亮粉紅色。
除了標準顏色外，您還可以使用下列特殊關鍵字：
transparent是完全透明的顏色。這也是background-color的初始值。currentColor是color屬性內容計算的動態值。如果文字顏色為red，然後將border-color設為currentColor，則文字也會變成紅色。如果您定義currentColor的元素沒有定義color的值，系統會改由級聯運算來計算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%)