CSS Podcast - 006: Color Part One
顏色是任何網站的重要元素，在 CSS 中，您可以使用多種選項指定及操控顏色。
如何決定要使用哪種顏色類型？如何讓顏色呈現半透明效果？在本課程中，您將瞭解有哪些選項可協助您為專案和團隊做出正確的決策。
CSS 有各種不同的資料類型，例如字串和數字。顏色是其中一種類型，並使用其他類型 (例如數字) 來定義自身。
選擇顏色
命名顏色
選擇顏色最簡單的方法，就是從 CSS 中的 148 種命名顏色中挑選。這些是簡單的英文名稱，例如 purple、tomato 和 goldenrod。根據Web Almanac 的資料，最受歡迎的名稱包括 black、white、red、blue 和 gray。我們最喜歡的元素包括 goldenrod、aliceblue 和 hotpink。
數字顏色
雖然命名顏色很方便，但您可能需要使用該組合中沒有的特定顏色。您可以使用數值值的幾種不同形式指定顏色。
十六進位顏色
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% 的透明度：
- 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%)。
您可以透過下列兩種方式在 rgb() 中設定 alpha。您可以選擇在紅、綠和藍參數後方新增 /，或是使用 rgba() 函式。Alpha 可以使用百分比或介於 0 和 1 之間的小數定義。舉例來說，如要在現代瀏覽器中設定 50% 的 Alpha 黑色，請輸入 rgb(0 0 0 / 50%) 或 rgb(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)。
高解析度色彩
RGB 和 HSL 會定義 sRGB 色域中的顏色。新款螢幕支援的色彩比這些格式所能描述的色彩多得多，而且超出 sRGB 色域。您可以使用各種 CSS 函式選擇這些顏色。
color() 函式
h1 {
color: color(srgb 0.9 0.2 0.4);
}
CSS color() 函式可讓您在特定色域中選擇顏色。第一個引數是所使用的色彩空間，用來定義下列管道的選項。如同 rgb()，您可以設定 Alpha 管道，方法是在 / 後設定 0 和 1 之間的數字或百分比。
舉例來說，前述程式碼片段中的深紅色 RGB 顏色 (定義為 rgb(183 21 64)) 可使用百分比定義為 rgb(72% 8% 25%)。您可以使用 color() 函式搭配 srgb 關鍵字，透過 color(srgb .72 .08 .25) 指定相同的顏色。
srgb 會設定色彩空間，並指出接下來的三個引數分別是紅色、綠色和藍色。值從 0 變更為 1，而非 0 變更為 255。
與 rgb() 類似，我們可以使用 / 和百分比，或 0 和 1 之間的十進位數，設定 alpha。
您可以搭配 color() 函式使用許多色彩空間，每個色彩空間都有不同的優點和用途。
螢幕 P3
h1 {
color: color(display-p3 0.9 0.2 0.4);
}
Display P3 色域的色彩比 sRGB 多出 50%。您可以使用 color() 函式，透過 Display P3 色彩空間指定 Display P3 色域中的所有顏色。
如要在 Display P3 中設定黑色，請將其定義為 color(display-p3 0 0 0)。為 color() 函式指定 display-p3 色彩空間後，您會有三個通道：紅色、綠色和藍色，類似 color(srgb)。但由於通道值代表更廣色域中的座標，因此相同的通道值會代表不同意義。
color(srgb 1 .5 0) 是橘色，相當於 color(display-p3 0.93596 0.52724 0.1983)。我們可以將橘色從 sRGB 色域延伸至 color(display-p3 1 .5 0)，讓橘色更鮮豔。
Oklab
Oklab 是使用 oklab() 函式定義，其中包含 Lightness、a 和 b 的管道。這項功能可用於製作平滑的漸層，並在保留色調和亮度時調整顏色飽和度。
h1 {
color: oklab(75% 0.1 0.1)
}
亮度通道會從 0 到 1，或從 0% 到 100%。明度為 0 的顏色一律會顯示為黑色。
a 管道從 -0.4 到 0.4，或從 0% 到 100%。值越低，顏色越綠；值越高，顏色越紅。
b 管道從 -0.4 到 0.4 或 0% 到 100%。值越低，顏色越偏藍；值越高，顏色越偏黃。
OkLCh
OkLCh 是 OKLab 的極坐標或圓柱形式，並以亮度、色度和色相管道定義。這有助於以感知一致的方式調整顏色。也就是說，色相的變更不會影響顏色的亮度或飽和度。
h1 {
color: oklch(80% 0.1 200)
}
您已在 HSL 中使用亮度和色相，而色度與飽和度相似。您可以使用 oklch(0 0 0) 設定黑色，使用 oklch(1 0 0) 設定白色。
亮度通道會從 0 到 1，或從 0% 到 100%。明度為 0 的顏色一律會顯示為黑色。
色度通道會設定顏色的鮮豔程度：0 或 0% 會去飽和，值越高，顏色越鮮豔。100% 的值與 .4 相同，但如果值接近 .4，就可能很快超出色域。
色調是以度數指定，就像 hsl() 一樣。
OkLCh 並未受限於像 Display P3 這樣的色域，因此您必須確保所製作的顏色可顯示。oklch(80% 50% 200) 是亮藍色，數值上看似合理的顏色，但它超出 Display P3 色域。
其他聊天室
在 CSS 中指定顏色的方式有很多種，您不必全部學習。rgb() 和十六進位格式通常用於設計工具和現有程式碼，因此建議您瞭解這兩種格式。熟悉可預測操作方式的格式也很有幫助。您可以直接變更 hsl 或 oklch 值，並瞭解產生的顏色。
如要進一步瞭解，請參閱「取得更多顏色和新空間」一文。
系統配色
除了紫色或藍綠色等已命名顏色外，您還可以使用下列特殊關鍵字：
transparent是完全透明的顏色。這也是background-color的初始值。currentColor是color屬性內容計算的動態值。如果文字顏色為red，然後將border-color設為currentColor，則也會是red。如果您定義currentColor的元素沒有定義顏色值，系統會改由級聯運算currentColor。
操控顏色
雖然您可能會在網站上使用調色盤，但可能需要這些顏色的變化版本，用於懸停狀態、邊框和其他 UI 元素。您可以指定每個顏色，但 CSS 也提供轉換顏色的方法，以便建立這些變化版本。
color-mix()
如要使用兩種顏色混合後的結果，您可以使用 color-mix() 方法。這項功能可用於將顏色與白色或黑色混合，以便建立較淺或較深的變化版本。
如要使用 color-mix()，您必須定義兩種顏色、混合方式 (插補方法)，以及每種顏色的比例。
如果是具有色調的色彩空間，您也可以決定要沿著色彩圓盤的哪個方向移動。預設會使用 shorter 路徑，但您也可以選擇 longer、increasing 和 decreasing。
顏色空間和方向合稱為插補方法。
您也可以提供要混合各顏色的數量。
相對色彩語法
您也可以使用相對顏色語法，更直接地處理顏色，這可讓您採用任何顏色，並對其執行計算，以建立新顏色。
h1 {
color: oklch(from red l c h);
}
使用 oklch() 函式表示您將使用亮度、色度和色相通道。在關鍵字 from 之後，您可以使用任何語法指定任何顏色。接著，系統會提供各個管道值，以便做為字母使用。這會解析為紅色，且不會進行任何調整。
如要調整，您可以使用 calc() 函式變更管道值，也可以直接取代管道。這裡我們使用相同的 red 顏色，但使用 oklch(62% 0.25 29) 定義。
h1 {
color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}
亮度通道為 62% / 2，或 31%。色度通道未變更，因此為 0.25。色相通道為 180。這麼做會建立新的顏色 oklch(31% 0.25 180)，也就是新的深綠色。
您通常會使用自訂屬性做為輸入顏色。這可讓您動態建立色彩變化。
您可以使用任何顏色函式執行此操作，如果顏色函式含有可說明您要變更的管道的話，這麼做會很有幫助。舉例來說，如果您想調整顏色的亮度，請選擇 oklch 或 hsl，因為您可以直接變更亮度通道。
h1 {
color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}
您可以使用相對色彩語法 (RCS) 建立調色盤，用於網站。
超出色域的顏色
你的內容會顯示在不同螢幕上，這些螢幕可能會或不會支援寬廣色域顏色。如果您指定的顏色不受螢幕支援，系統會進行所謂的色域對應程序，找出可在螢幕上顯示的類似顏色。如果您想在這些情況下定義特定顏色，可以使用 color-gamut 媒體查詢。
在 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%)