在 CSS 中定義顏色的 4 種方法
要點
使用預先定義的顏色名稱是層疊樣式表 (CSS) 為新手用戶提供的一種便捷方法，有 145 種現成的色調可供選擇。然而，這種方法存在某些限制，可能無法滿足高階設計專案的複雜要求。
十六進制顏色代碼提供了廣泛的色調可能性以及高度具體的定制，儘管與其他顏色符號系統相比，其代價是導航和回憶可能更具挑戰性。
RGB 和 RGBA 是在數位媒體中表示顏色的兩種不同方法。 RGB 提供了對顏色精度的數位控制，而 RGBA 還包含一個允許透明度調整的 Alpha 通道。確保數位產品中使用的配色方案易於存取並遵循最佳實踐以適應有視覺障礙或偏好的用戶至關重要。
透過 CSS 使用顏色在 Web 開發中無所不在，因為它們顯著影響網站的美學吸引力和氛圍，同時影響其整體可用性。 CSS 可以選擇多種色調，滿足不同的創意願景和個人品味。
雖然顏色定義對網站的影響可能不會立即顯現出來，但對其實施所做的選擇可以極大地影響網站的整體視覺外觀和美學吸引力。全面了解不同的方法以及應用和組合這些方法的實用技術對於創建視覺上引人注目的網頁設計至關重要。
使用顏色名稱
CSS 提供了一種利用命名法定義色調的有效方法，提供 145 種顏色可供選擇的全面選擇。該光譜涵蓋“紅色”、“綠色”和“藍色”等基本名稱，以及包括“珊瑚色”或“薰衣草色”等更精緻的細微差別。
使用指定色調提供了一個簡單的過程，其中選擇一種顏色名稱（例如“紅色”）並將其合併到承認顏色值規範的 CSS 屬性中。這些包含屬性涉及明顯的屬性，例如“顏色”和“背景顏色”，還包括“邊框顏色”、“輪廓顏色”和“文字陰影”等替代屬性。
在需要臨時色調的情況下，例如在原型開發的初始階段或努力維護清晰的程式碼時，使用顏色名稱可能會很有用。適用的語法如下:
color_property: color_name;
在這種情況下，只需將佔位符color\_name 替換為想要套用的特定色調即可。舉例來說，如果有人試圖指定一個被撕毀的段落的文字顏色，那麼表達式將如下:
p {
color: red;
}
事實上，透過採用這種方法，人們可以為自己的散文注入一種獨特的色調，使其與周圍的環境區分開來。
使用 Emmet 縮寫的優點包括易於在 CSS 程式碼中理解，因為它們同時適合初學者和進階使用者。此外，這些縮寫可以在各種網頁瀏覽器中無縫運行，並可作為快速生成設計概念的實用工具。
使用基於網路的顏色選擇工具的缺點包括缺乏全面的顏色選項，這可能會阻礙藝術表達，以及遵守可訪問性標準和與過時技術的兼容性不一致的潛在缺陷。
十六進位顏色代碼
十六進位顏色代碼通常被稱為“十六進位代碼”，是網頁設計領域中描述色調的普遍手段。這些代碼由 0-9、A-F 範圍內的數字和字母字元組成的六個字元組合構成，代表構成給定顏色整體外觀的紅、綠、藍 (RGB) 元素的比例組合。
使用這些顏色代碼可能會帶來某些複雜性，需要徹底理解其基本原理。對於有興趣深入研究的人來說，探索十六進制值可以提供有價值的見解。作為說明，請考慮 CSS 中十六進位代碼的以下應用:
color: #RRGGBB;
在此架構中，紅色、綠色和藍色的對應成分以 RR、GG 和 BB 表示。這些分量的可能範圍從 00（表示無強度）延伸到 FF（表示最大強度）。舉例來說，為了用特定的藍色陰影來指定網站標題的色調，可以使用如下的十六進位代碼:
header {
background-color: #336699;
}
這將產生深藍色:
ㄧㄧㄧㄧㄧㄧㄧㄧㄧ
人們可以為每個元素使用由兩個重複字元組成的縮寫，如下例所示:
header {
background-color: #369;
}
十六進制顏色代碼提供了廣泛的色調，可以輕鬆生成複雜且自訂的色調。這些程式碼可以無縫操縱顏色偏好，使其非常適合苛刻的設計規範。
雖然十六進位代碼具有效力，但與命名色調相比，它們的陌生性可能會帶來障礙。此外，保留精確的顏色值記憶可能會很麻煩。然而，可以存取有助於定位十六進制陰影的資源，從而在一定程度上緩解這些問題。
RGB 和 RGBA 顏色值
該系統使人們能夠透過紅色、綠色和藍色成分來指定色調，而相較之下，它採用比十六進位代碼更容易存取的數值。
RGB 顏色值
利用 RGB 顏色值是級聯樣式表 (CSS) 框架中用於指定色調的流行技術。縮寫「RGB」表示原色紅、綠、藍，排列在縮寫後的括號內。在這些括號內的邊界內，可以指定與每個對應顏色通道的相對強度相對應的數值，跨越從 0 到 0 的整個範圍。
文法如下:
rgb(red_value, green_value, blue_value);
為了在給定上下文中為由“red\_value”、“green\_value”和“blue\_value”表示的顏色元素分配特定的數值，可以參考已建立的顏色模型，例如RGB或HSL，其中每個值代表色譜的不同方面（例如強度、色調或飽和度）。透過將這些值替換在適當的參數內，可以產生各種顏色的色調和色調，包括非彩色（白色）、彩色（黑色）和單色（單一顏色）選項，類似於本文顯示的視覺表示。
當所有三個通道分別分配其最大可能值 255 時，能夠顯示 0 到 255 範圍值的每個紅色、綠色和藍色通道都獲得最大亮度。這種組合產生視覺上獨特的色調稱為白色。
.white-box {
color: rgb(255, 255, 255);
}
透過將每個單獨的顏色通道設為其可能的最低值零來表示給定影像的紅色、綠色和藍色分量中完全不存在任何色調，這隨後在整個視覺光譜中產生黑色外觀。
.black-box {
color: rgb(0, 0, 0);
}
將影像中的紅色分量調整到其可能的最高值 255 並保持所有其他分量的零值會產生鮮豔的紅色陰影:
.red-box {
color: rgb(255, 0, 0);
}
RGBA 顏色值
RGBA 和 RGB 在功能上相似，主要差異在於 RGBA 中加入了一個額外的 alpha 通道。 RGBA 中的「A」表示 alpha 值，它調節與所選色調相關的半透明或不透明程度。 Alpha 值為零表示完全透明，導致顏色完全隱藏，而 Alpha 值為 1 表示絕對不透明度，導致顏色完全可見。
RGBA 提供了一種通用方法來創建具有不同透明度的視覺元素，包括半透明背景和軟化版式。完整的表達式由四個部分組成:
color: rgba(red_value, green_value, blue_value, alpha_value);
在這種情況下，由 red\_value、green\_value 和 blue\_value 表示的變數屬於 RGB 顏色空間內的對應顏色通道，而 alpha\_value 表示與該特定顏色相關的半透明程度。
div {
background-color: rgba(0, 128, 0, 0.5);
}
上述插圖表明，0.5 的 alpha 係數賦予綠色色調 50% 的半透明度，從而允許感知下面的物質。
RGB 和 RGBA 提供高精準度的顏色選擇，有助於創造迷人的視覺設計。此外，它們跨多個網頁瀏覽器的兼容性保證了所需的色調在不同平台上保持一致。
在遵守無障礙標準的同時，應對創建具有包容性和視覺吸引力的設計的複雜性可能是一項艱鉅的任務。一項特殊的挑戰來自於需要在前景和背景元素之間保持適當的對比度，特別是在透過 RGBA 值使用透明度時。幸運的是，網路內容可訪問性指南 (WCAG) 提供了一個有價值的框架，透過提供有關如何創建有效且可訪問的視覺內容的建議來指導開發人員和設計人員採取更具包容性的實踐。
HSL 和 HSLA 顏色值
HSL 是一種 CSS 函數，用於透過使用數值來表示色調、飽和度和亮度來定義顏色。與 RGB 類似，HSL 採用這些顏色屬性的獨特數字表示，這些顏色屬性可以透過設計應用程式或其他上下文中的使用者介面進行識別。
色調是指由特定波長或頻率的光組合產生的純光譜顏色，通常沿圓形光譜以度為單位測量，0 度和 360 度對應紅色，120 度對應綠色，240 度對應藍色。它通常被視為圓上的一個點，其中每個度數對應於色輪上的不同色調。
飽和度影響顏色的豐富度和深度，範圍從 0% 的暗淡灰度到 100% 的高度鮮豔和強烈的色調。
亮度的概念涉及色調的亮度或強度與其沿著從完全黑暗（黑色）到最大亮度（白色）的連續體的位置的關係。當亮度等級為 50% 時，顏色被視為中性顏色，而小於 50% 的值會產生較暗的色調，而大於 50% 的值會產生較亮的色調。
除了表示色調、飽和度和亮度值的 HSL 之外，還存在另一種色彩空間，稱為 HSLA（色調、飽和度、亮度和 alpha 的十六進位表示）。在這種情況下，“A”對應於“alpha”，類似於 RGBA 表示中指示透明度等級的“A”。
文法如下:
color: hsl(hue_value, saturation_percentage, lightness_percentage);
以更精細的方式，要為給定結構中的每個元素指定特定值，請將變數「hue_value」、「saturation_percentage」和「lightness_percentage」替換為所需值。作為說明，請考慮以下程式碼片段:
div {
background-color: hsl(120, 100%, 50%);
}
本實例示範如何利用 HSL 值建立組件的鮮豔色調，其中 120 代表色調（與綠色相關），100% 對應最大飽和度，50% 將亮度設定為均勻照明狀態。
HSL 和 HSLA 透過 CSS 自訂屬性提供靈活的顏色運算，這使得它們適合現代 Web 開發中的廣泛應用。此外，它們與現代瀏覽器的兼容性確保了無縫集成，同時允許輕鬆修改顏色亮度。
使用 HSL 的缺點是它需要理解顏色理論，包括色調和飽和度等概念，這可能比眾所周知的 RGB 系統更複雜。
擁抱 CSS 顏色的力量
在深入研究在 CSS 中指定色調的各種技術時，必須記住，人們有能力對其 Web 資產的視覺吸引力、氛圍和整體使用者互動產生重大影響。
顏色表示的選擇（包括基本色調、十六進位值、RGB 組合或 HSL 公式）可以顯著影響受眾對網站的看法。因此，謹慎地探索、自我教育並確定與設計目標相符的最合適的顏色表示。