🎨 Hsl 色彩格式說明
📌 什麼是 HSL？
HSL 是 Hue（色相）、Saturation（飽和度）、Lightness（亮度）的縮寫，是一種直觀的色彩表示方式。
HSL 格式結構
HSL(H, S%, L%)
H (Hue / 色相)：0-360° 的色輪角度
0° = 紅色
120° = 綠色
240° = 藍色
360° = 回到紅色
S (Saturation / 飽和度)：0-100%
0% = 無色彩（灰色）
100% = 最鮮豔
L (Lightness / 亮度)：0-100%
0% = 黑色
50% = 純色
100% = 白色
範例
/* 藍色 */
hsl(210, 100%, 50%) /* 鮮豔的藍色 */
hsl(210, 50%, 50%) /* 較淡的藍色 */
hsl(210, 100%, 90%) /* 很亮的藍色 */
hsl(210, 100%, 10%) /* 很暗的藍色 */
✨ HSL 的優勢
1️⃣ 直觀易懂
HSL 的優勢：
✅ 符合人類對色彩的認知方式
✅ 三個參數分別對應「什麼顏色」、「多鮮豔」、「多亮」
✅ 不需要記憶十六進位碼
HEX 的問題：
❌
#3b82f6無法直接看出是什麼顏色❌ 調整亮度需要計算 RGB 值
❌ 不直觀，難以手動調整
對比範例：
HSL: hsl(210, 100%, 50%) ← 一看就知道是「鮮豔的中等亮度藍色」
HEX: #3b82f6 ← 看不出顏色特性
2️⃣ 易於調整亮度
HSL 的優勢：
✅ 只需調整 L（亮度）值即可變亮或變暗
✅ 保持色相和飽和度不變
✅ 適合建立色彩階層（如按鈕的 hover 效果）
實際應用：
/* 主色按鈕 */
--primary: hsl(210, 100%, 50%); /* 標準色 */
/* 變暗 10% → hover 效果 */
--primary-hover: hsl(210, 100%, 40%); /* 只需改 L: 50% → 40% */
/* 變亮 10% → 淺色變體 */
--primary-light: hsl(210, 100%, 60%); /* 只需改 L: 50% → 60% */
如果用 HEX：
/* 主色 */
--primary: #3b82f6;
/* 要變暗？需要轉換 RGB → 計算 → 再轉回 HEX */
--primary-hover: #2563eb; /* 怎麼算出來的？不直觀 */
3️⃣ 易於統一色相
HSL 的優勢：
✅ 保持 H（色相）相同，就能確保所有顏色屬於同一色系
✅ 調整 S（飽和度）和 L（亮度）即可創造和諧配色
✅ 適合建立一致的設計系統
實際應用：
/* 統一色相（H = 210°），只調整亮度和飽和度 */
--background: hsl(210, 40%, 98%); /* 淺色背景 */
--border: hsl(210, 35%, 88%); /* 稍暗的邊框 */
--primary: hsl(210, 100%, 50%); /* 鮮豔的主色 */
--text: hsl(210, 20%, 15%); /* 深色文字 */
/* 所有顏色都是藍色系（H = 210°），視覺和諧 */
如果用 HEX：
/* 這些顏色看起來和諧嗎？看不出來 */
--background: #f7fafc;
--border: #e2e8f0;
--primary: #3b82f6;
--text: #0f172a;
/* 要確保色相統一？需要轉換每個 HEX → HSL → 檢查 H 值 */
4️⃣ 易於建立色彩變體
HSL 的優勢：
✅ 系統化地產生同一色系的不同變體
✅ 適合建立設計系統的色彩階層
✅ 易於維護和擴展
實際應用：
/* 基礎色 */
--blue-base: hsl(210, 100%, 50%);
/* 建立階層（只調整亮度） */
--blue-50: hsl(210, 100%, 95%); /* 最淺 */
--blue-100: hsl(210, 100%, 90%);
--blue-200: hsl(210, 100%, 80%);
--blue-300: hsl(210, 100%, 70%);
--blue-400: hsl(210, 100%, 60%);
--blue-500: hsl(210, 100%, 50%); /* 標準 */
--blue-600: hsl(210, 100%, 40%);
--blue-700: hsl(210, 100%, 30%);
--blue-800: hsl(210, 100%, 20%);
--blue-900: hsl(210, 100%, 10%); /* 最深 */
如果用 HEX：
/* 每個值都需要單獨計算和轉換 */
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
/* ... 看不出規律，難以維護 */
5️⃣ 易於實現明暗主題
HSL 的優勢：
✅ 只需調整 L（亮度）值即可切換明暗
✅ 保持色相和飽和度，確保品牌色彩一致
✅ 適合動態主題切換
實際應用：
/* 亮色主題 */
:root {
--background: hsl(210, 40%, 98%); /* 很亮 */
--text: hsl(210, 20%, 15%); /* 很暗 */
--primary: hsl(210, 100%, 50%); /* 標準 */
}
/* 暗色主題 - 只需反轉亮度 */
.dark {
--background: hsl(210, 40%, 5%); /* 很暗（98% → 5%）*/
--text: hsl(210, 20%, 95%); /* 很亮（15% → 95%）*/
--primary: hsl(210, 100%, 60%); /* 稍亮（50% → 60%）*/
}
/* 色相（H）和飽和度（S）保持不變，確保品牌一致性 */
如果用 HEX：
/* 亮色主題 */
:root {
--background: #f7fafc;
--text: #0f172a;
--primary: #3b82f6;
}
/* 暗色主題 - 需要重新設計所有顏色 */
.dark {
--background: #020617; /* 怎麼算出來的？ */
--text: #f7fafc; /* 為什麼選這個？ */
--primary: #60a5fa; /* 和亮色主題有關聯嗎？ */
}
/* 無法直觀看出明暗主題之間的關係 */
📊 HSL vs HEX vs RGB 對比
| 特性 | HSL | HEX | RGB |
| 直觀性 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 調整亮度 | ⭐⭐⭐⭐⭐ | ⭐ | ⭐⭐ |
| 統一色相 | ⭐⭐⭐⭐⭐ | ⭐ | ⭐⭐ |
| 建立變體 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 程式化處理 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
| 瀏覽器支援 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
💡 使用建議
何時使用 HSL？
✅ 適合使用 HSL：
需要建立色彩系統或設計系統
需要動態調整亮度（如 hover 效果）
需要實現明暗主題切換
需要統一色相建立和諧配色
需要程式化生成色彩變體
何時使用 HEX？
✅ 適合使用 HEX：
只需要固定顏色值
需要與設計工具（如 Figma）保持一致
不需要動態調整
團隊習慣使用 HEX
HSL 的核心優勢：
✅ 直觀易懂 - 符合人類對色彩的認知
✅ 易於調整 - 只需修改單一參數即可改變亮度或飽和度
✅ 統一色相 - 容易建立和諧的配色系統
✅ 建立變體 - 系統化產生色彩階層
✅ 主題切換 - 適合實現明暗主題
✅ 程式化處理 - 易於建立工具和函數
建議：
在建立設計系統時優先使用 HSL
需要動態調整顏色時使用 HSL
固定顏色值可以使用 HEX（與設計工具保持一致）
最後更新： 2025-11-07