顏色

CSS Podcast - 006：第 1 部分

顏色是所有網站不可或缺的一環，而且在 CSS 中有很多顏色類型 函數和治療方法

如何決定要使用哪一種顏色類型？ 如何將顏色設定為半透明？ 本課程 您會學到哪些方案可以幫助您為專案和團隊做出正確的決策。

CSS 提供多種資料類型， 例如字串和數字 顏色是上述類型之一，並使用其他類型。 例如其定義的數字

數字顏色

您在 CSS 中第一次接觸色彩時，很可能是透過數字來增加色彩。 數字顏色值可運用在幾種不同形式中。

十六進位顏色

h1 {
  color: #b71540;
}

十六進位標記法 (通常縮短為十六進位) 是 RGB、 會將數值指派給紅色和藍色 也就是三種主要顏色。

十六進位範圍是 0-9 和 A-F。 如果是 6 位數序列中使用 轉換成 RGB 數值範圍 (介於 0 到 255) 每個頻道分別對應至紅色、綠色和藍色頻道

您也可以定義任何數字顏色的 Alpha 值。 Alpha 值是透明度的百分比。 若是 16 個數字，您可以在 6 位數字的序列中加入另外兩位數， 產生八位數序列 舉例來說，如要將十六進位代碼設為黑色，請編寫 #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 的範例：

1. B 等於 11，乘以 16 等於 176
2. F 等於 15
3. 176 + 15 = 191
4. 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() 函式。 可使用 0 到 1 之間的百分比或小數來定義 Alpha。 舉例來說，如要在新型瀏覽器中將 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%) 將顯示為灰階。 最後，Lightness 參數用來說明增加亮度的比例由白色到黑色。 亮度為 100% 時一律會呈現白色。

使用 hsl() 顏色函式時， 您可以編寫 hsl(0 0% 0%)，甚至是 hsl(0deg 0% 0%)，定義真實黑色。 這是因為 hue 參數會定義色輪的度數 如果使用數字類型，則該類型為「0-360」。 您也可以使用角度類型，也就是 (0deg) 或 (0turn)。 飽和度和亮度兩者都是以百分比定義。

Alpha 定義在 hsl() 中 方法與 rgb() 相同，方法是在色調、飽和度和亮度參數後方加上 /，或使用 hsla() 函式。 可使用 0 到 1 之間的百分比或小數來定義 Alpha。 舉例來說，如要將 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 屬性也接受使用顏色做為其中一個值。

隨堂測驗

測試您對顏色的瞭解程度

資源

• 說明如何搭配 HSL 使用角度的實用示範
• 完整的顏色指南
• 廣角色彩的完整指南
• [影片] 說明如何解讀十六進位代碼的說明
• 十六進位代碼的運作方式