場景重現：PM 指著廣告頁說「背景與內容顏色太像，區分度不夠」，UI 回應「我用單一色相配合不同飽和度亮度設計的」。PM 點點頭，心裡卻在打鼓：色相？飽和度？亮度？這些術語到底怎麼對應視覺效果？

為了跨越專業鴻溝，我系統梳理了色彩核心概念，用通俗語言拆解 Hue（色相）、Tint（色彩/淡色）、Shade（色度/深色）、Tone（色調/灰色）的本質區別，助你下次評審時能精準表達設計意圖。

色彩感知的生理基礎

人眼視網膜擁有三類錐狀細胞，分別對紅、綠、藍三原色敏感。大腦透過三通道訊號的不同組合比例，構建出我們感知的百萬種顏色。理解這一點，是掌握色彩模型的前提。

四大核心概念圖解

1. Hue（色相）—— 純粹的色彩身份

定義：飽和度 100%、亮度 100% 時的顏色。
通俗理解：紅、綠、藍三原色兩兩按不同比例混合產生的顏色（單一原色或雙原色混合，不含三原色同時混合）。所有色相可排列成標準色相環（0°–360°）。

2. Tint（色彩/淡色）—— 加白變淡

定義：純色（Hue）與白色按不同比例混合。
通俗理解：任一色相加入漸增白色，得到一系列由深到淡的顏色。本質上是在亮度 100% 固定下，降低飽和度（飽和度 0% 即為白色）。

3. Shade（色度/深色）—— 加黑變深

定義：純色與黑色按不同比例混合。
通俗理解：任一色相加入漸增黑色，得到一系列由亮到暗的顏色。本質上是在飽和度 100% 固定下，降低亮度（亮度 0% 即為黑色）。

4. Tone（色調/灰色）—— 加灰變柔

定義：純色與灰色（黑+白）按不同比例混合。
通俗理解：任一色相同時調整飽和度與亮度，得到一系列柔和、低對比度的顏色。這是最接近自然界真實色彩、也最豐富的色彩家族。

HSB 模型中的對應關係速查

術語	色相	飽和度	亮度
Hue（色相）	0–360° 變化	100%	100%
Tint（色彩）	固定	0–100% 遞減	100% 固定
Shade（色度）	固定	100% 固定	0–100% 遞減
Tone（色調）	固定	0–100% 變化	0–100% 變化

實戰溝通小技巧

下次評審時，你可以這麼說：

• 「這個 Logo 的色相很準，但色度能不能再深一點？」（要求降低亮度，增加厚重感）
• 「背景區塊建議用色彩，別用色調，需要更清透的層次感。」（要求高亮度、低飽和度）
• 「整體色調偏冷，能否調暖一點？」（要求色相環向紅黃方向微調）

關鍵提醒：中文翻譯常有歧義（如 Hue 與 Tone 皆譯「色調」），建議直接記住英文術語，溝通時標註英文，消除歧義。

作者：苦茶
來源：互聯網的一些事