CSS 顏色格式完整指南
在網頁設計與前端開發中，顏色可以用多種格式表示。了解 HEX、RGB、HSL 三種格式的差異， 能幫助你更有效率地在設計工具與 CSS 程式碼之間切換，也能更精準地調整配色。
HEX 十六進位
- • 最廣泛使用的 CSS 格式
- • 設計工具預設輸出格式
- • 3位速記（#RGB → #RRGGBB）
- • 適合複製貼上使用
RGB 三原色
- • 最直覺的數值表示
- • 支援透明度（rgba）
- • 適合程式邏輯計算
- • 值域 0-255 易理解
HSL 色相模型
- • 符合人眼感知方式
- • 輕鬆調整亮暗變化
- • 配色設計最佳選擇
- • 支援透明度（hsla）
何時使用哪種格式？
HEX 最適合直接從設計稿（Figma、Adobe XD）複製色碼到 CSS；RGB 適合需要透過 JavaScript 動態計算或操作顏色值的場景；HSL 則是需要系統化調整一系列顏色（如建立色階）時的首選， 只需調整 L（亮度）值即可快速得到同色系的深淺變化。
專業提示：HSL 色階技巧
固定 H（色相）與 S（飽和度），僅調整 L（亮度）從 10% 到 90%， 即可快速建立一組和諧的同色系色階（如 Tailwind CSS 的 50-950 色票）， 這是設計系統建立配色規範的常用技巧。
常見問題
Q: HEX 色碼的 3 位縮寫怎麼計算？
A: 當 HEX 的 6 位中每兩位相同時，可縮寫為 3 位。例如 #FF6600 → #F60、#AABBCC → #ABC。本工具支援 3 位與 6 位兩種輸入格式。
Q: 為什麼 HSL 轉回 HEX 後數值稍有差異？
A: HSL 的 H/S/L 值在四捨五入後會有 ±1 的誤差，這是整數精度限制，色差人眼幾乎無法察覺，在 CSS 使用上完全正常。
Q: 互補色有什麼設計用途？
A: 互補色是色相環上對角（相差 180°）的顏色，對比最強烈。常用於強調按鈕、Badge 或需要特別醒目的 UI 元素，也常見於品牌標誌設計。
Q: 類比色與三角色如何選擇？
A: 需要和諧、低對比的介面用類比色（如資訊卡片背景、圖表漸層）；需要豐富、活潑感的視覺用三角色（如節慶活動頁、遊戲 UI）。