色彩學入門 — 色相、飽和度、明度

設計師必備的色彩學基礎。了解色相環、互補色、三等分色、類似色等配色原理,提升你的設計直覺。

色彩三要素

色相(Hue)

色相是色彩的「種類」,在色相環上以角度表示(0°-360°):

  • 0° / 360° = 紅
  • 120° = 綠
  • 240° = 藍
  • 飽和度(Saturation)

    飽和度決定色彩的「鮮豔程度」:

  • 100% = 最鮮豔的純色
  • 0% = 完全無色彩的灰色
  • 明度 / 亮度(Lightness / Value)

    決定色彩的明暗:

  • 100% = 白色
  • 50% = 純色
  • 0% = 黑色
  • 色彩和諧(配色原理)

    互補色(Complementary)

    色相環上相差 180° 的兩個顏色。對比最強烈,適合強調和行動呼籲按鈕。

    例:藍色 + 橘色、紅色 + 綠色

    三等分色(Triadic)

    色相環上等距 120° 的三個顏色。活潑且平衡,適合多彩的設計。

    例:紅 + 藍 + 黃

    類似色(Analogous)

    色相環上相鄰的顏色。自然柔和,適合品牌設計和插圖。

    例:藍綠 + 藍 + 藍紫

    分裂互補色(Split Complementary)

    互補色兩側各偏 30° 的兩個顏色加上原色。比互補色柔和但仍有對比。

    單色系(Monochromatic)

    同一色相的不同明暗和飽和度變化。最安全的配色方式,不會出錯。

    暖色與冷色

  • 暖色(紅、橙、黃):活力、熱情、緊迫感
  • 冷色(藍、綠、紫):冷靜、專業、信任感
  • 中性色(灰、米、棕):平衡、背景、不搶焦
  • 實用配色建議

  • 60-30-10 法則:60% 主色、30% 輔色、10% 強調色
  • 從品牌色出發:選定一個品牌色,用互補色或類似色延伸
  • 減少色彩數量:3-5 色就夠用,太多會混亂
  • 利用工具:用我們的色彩和諧方案功能,自動生成配色
  • 更多教學