設計
色彩理論入門：RGB、HEX、HSL 完整解析
了解網頁設計中常用的色彩模型 — RGB、HEX、HSL 的原理與差異，學會選擇和搭配顏色。
色彩模型簡介
在網頁設計和數位媒體中，顏色是通過數學模型來描述的。不同的色彩模型從不同角度描述顏色，各有其適用場景：
• RGB：基於紅、綠、藍三原色的加色模型，適合螢幕顯示
• HEX：RGB 的十六進位表示法，是 CSS 中最常用的顏色格式
• HSL：基於色相、飽和度、亮度的模型，更符合人類對顏色的直覺認知
• CMYK：基於青、洋紅、黃、黑的減色模型，適合印刷
了解這些模型之間的關係和轉換，是網頁設計的基礎技能。
RGB 色彩模型
RGB 代表紅（Red）、綠（Green）、藍（Blue），這三種顏色是光的三原色。
每個通道的值範圍是 0-255：
• rgb(255, 0, 0) → 純紅色
• rgb(0, 255, 0) → 純綠色
• rgb(0, 0, 255) → 純藍色
• rgb(255, 255, 255) → 白色（所有光混合）
• rgb(0, 0, 0) → 黑色（沒有光）
RGB 是加色模型，當三種光混合在一起時，會變得越來越亮，最終成為白色。這與我們日常經驗中混合顏料（減色模型）的結果相反。
在 CSS 中使用 RGB：
color: rgb(52, 152, 219); /* 一種好看的藍色 */
HEX 色碼
HEX（十六進位）色碼是 RGB 值的另一種表示方式，在 CSS 中最為常見。
格式：#RRGGBB
• 每兩位代表一個通道（R、G、B）
• 使用十六進位數字（0-9, A-F）
• 每個通道的範圍是 00-FF（對應十進位 0-255）
常見顏色：
• #FF0000 → 紅色
• #00FF00 → 綠色
• #0000FF → 藍色
• #FFFFFF → 白色
• #000000 → 黑色
縮寫形式：如果每個通道的兩位數字相同，可以縮寫：
• #FF0000 → #F00
• #336699 → #369
轉換方式：
RGB (52, 152, 219) → 52 = 34, 152 = 98, 219 = DB → #3498DB
HSL 色彩模型
HSL 代表色相（Hue）、飽和度（Saturation）、亮度（Lightness），是最直覺的色彩模型。
• 色相（H）：0-360 度，代表在色環上的位置
0° = 紅色, 120° = 綠色, 240° = 藍色
• 飽和度（S）：0-100%，0% 為灰色，100% 為最鮮艷
• 亮度（L）：0-100%，0% 為黑色，50% 為正常，100% 為白色
HSL 的優勢在於：
1. 調整亮度：只需改變 L 值，顏色的色相不變
2. 調整鮮艷度：只需改變 S 值
3. 建立色彩主題：固定 S 和 L，只改變 H 就能得到一組和諧的顏色
在 CSS 中使用：
color: hsl(204, 70%, 53%); /* 同樣的藍色 */
配色技巧與工具推薦
常用的配色方法：
1. 互補色：色環上相對的兩個顏色（如紅和青），對比強烈
2. 類似色：色環上相鄰的顏色（如藍和紫），和諧統一
3. 三等分色：色環上均勻分布的三個顏色，活潑多彩
4. 單色配色：同一色相，不同飽和度和亮度，簡潔優雅
實用建議：
• 主色不超過 3 種，加上黑白灰作為輔助
• 背景色和文字色要有足夠對比度（WCAG 標準建議至少 4.5:1）
• 考慮色盲使用者，不要僅靠顏色傳達資訊
Gigi Tools 提供完整的色彩工具組：顏色選擇器、HEX 轉 RGB、RGB 轉 HEX、HSL 轉換器、漸層產生器，幫助您快速處理各種色彩需求。