相似色：網頁設計的色輪理論
訪客登陸一個主視覺區塊，橙色漸變成珊瑚色，然後消融成灰塵粉紅色。他們不知道為什麼感覺協調——他們只是停止了滾動。那就是相似色調和：色輪上的相鄰色（通常是60°內的3–5種色調），共享一個基調。可見光譜做了繁重的工作。你選擇這個切片。日落感覺自然，因為紫色、紅色和橙色在色輪上相鄰——沒有對比衝擊，只有漸變。相同的原則在你的導航欄到行動呼籲流時發揮作用，當你固定一種色調並讓兩個相鄰色支持它時。但大多數設計師猜測哪些相鄰色有效，然後花40分鐘調整HSL滑塊。你即將看到完全是哪些角度產生調和、哪些比率避免渾濁，以及如何編寫CSS使你的調色板在組件中保持一致。
我已經建立了超過十年的網站，當客戶說「我想要看起來協調但不無聊的東西」時，相似色配色方案是我的首選。它們很寬容，很靈活，而且出奇地難以搞砸。讓我詳細介紹它們如何工作以及如何使用它們。
目錄
- 什麼是相似色？
- 相似色如何在色輪上工作
- 色彩調和理論：為什麼相似色配置感覺正確
- 相似色與互補色
- 網站相似色調色板
- 如何在CSS中建立相似色配置
- 網頁設計中相似色的真實示例
- 常見錯誤及避免方法
- 常見問題
什麼是相似色？
相似色是在色輪上相鄰的三到五種顏色組成的組合。這真的就是整個定義。選擇任何顏色，然後看它的直接相鄰色——那些就是你的相似色。
例如：
- 藍色、藍綠色、綠色——相似色
- 紅色、紅橙色、橙色——相似色
- 黃色、黃綠色、綠色——相似色
關鍵特徵是相鄰性。這些顏色共享基礎色光波長，這就是為什麼它們看起來彼此相屬。沒有刺耳的對比，沒有視覺張力。只是平滑的、自然的過渡。
大多數色彩理論家將相似色配置定義為標準12色色輪上彼此相隔30°至60°的顏色。有些將其擴展到90°，但一旦你超過那個，你就開始失去使相似色配置特別的「家族相似」。
60-30-10規則
在使用相似色時，經典分配規則能夠完美應用：
- 60%——你的主色（通常是中間色調）
- 30%——你的次要色（一個相鄰色）
- 10%——你的強調色（另一個相鄰色）
這個比例防止調色板看起來平坦。沒有它，你會得到一個柔軟、不清晰的相似色調洗。有了它，你會得到層次和視覺興趣。
相似色如何在色輪上工作
色輪是基於色彩關係的色調的循環排列。艾薩克·牛頓爵士在1666年創建了第一個，設計師自此一直在使用其變體。標準藝術家色輪有12種色調：
| 位置 | 顏色 | 色調度數 |
|---|---|---|
| 1 | 紅色 | 0° |
| 2 | 紅橙色 | 30° |
| 3 | 橙色 | 60° |
| 4 | 黃橙色 | 90° |
| 5 | 黃色 | 120° |
| 6 | 黃綠色 | 150° |
| 7 | 綠色 | 180° |
| 8 | 藍綠色 | 210° |
| 9 | 藍色 | 240° |
| 10 | 藍紫色 | 270° |
| 11 | 紫色 | 300° |
| 12 | 紅紫色 | 330° |
相似色配置從任何起點開始並抓住它的相鄰色。如果你從藍色（240°）開始，你的相似色調色板可能包括藍綠色（210°）和藍紫色（270°）。你可以使用我們的互動色輪工具自己試試——選擇相似色調和模式並旋轉以查看關係如何變化。
暖色與冷色相似色調色板
使相似色配置強大的一個事情是它們自然地落入暖色或冷色領域：
- 暖色相似色：紅色到黃色（0°–120°）。這些調色板感覺充滿活力、溫馨和緊迫。
- 冷色相似色：綠色到紫色（150°–300°）。這些感覺冷靜、專業和值得信賴。
這個溫度一致性實際上是一個功能，而不是缺陷。這意味著你的整個調色板承載統一的情感基調，這對品牌設計和UI工作非常有用。
色彩調和理論：為什麼相似色配置感覺正確
色彩調和不僅僅是美學偏好——在實際知覺科學後面有根據。人類視覺系統通過三種類型的視錐細胞（短、中和長波長）處理顏色。相似色刺激這些視錐的重疊集合，這就是為什麼我們的大腦將它們解釋為「彼此相屬」。
約翰內斯·伊頓，包豪斯色彩理論家，在他1961年的作品《色彩的藝術》中確定了七種色彩對比類型。相似色配置主要利用他所謂的色調對比最低強度。有恰到好處的差異來產生視覺興趣，但不足以造成張力。
三種色彩調和類型
色彩調和有三個基本類別，了解相似色適合的位置有助於你選擇正確的方法：
- 相關調和（相似色、單色）——低對比、高協調
- 對比調和（互補、分割互補）——高對比、高能量
- 複雜調和（三色、四色）——平衡對比、難以執行
相似色坐在第一個類別中。它是相似的調和。在網頁設計中，用戶快速處理信息，你不想顏色與內容競爭，那個相似性往往正是你所需要的。
相似色與互補色
這是每個人都問的比較，有充分的理由——它們是相反的哲學。
| 方面 | 相似色 | 互補色 |
|---|---|---|
| 色輪關係 | 相鄰（相隔30°–60°） | 相對（相隔180°） |
| 視覺效果 | 調和、統一 | 高對比、充滿活力 |
| 情感基調 | 冷靜、協調 | 動態、充滿活力 |
| 使用難度 | 容易 | 中等 |
| 最適合 | 背景、內容豐富的網站 | 行動呼籲、引人注目的元素 |
| 風險 | 可能感覺單調 | 可能感覺混亂 |
| 自然示例 | 秋天的葉子（紅橙黃） | 紅色知更鳥在綠色樹枝上 |
這是我的誠實看法：大多數網站受益於相似色基礎調色板，加上一個互補強調。這給你相似色調和的協調，加上你需要的對比——比如在按鈕、警告或關鍵UI元素上。
例如，如果你的網站使用藍綠色綠色相似色配置，一個單獨的橙色行動呼籲按鈕將絕對在該背景上唱歌。你獲得了兩個世界最好的東西。
何時選擇相似色而不是互補色
- 內容優先網站（博客、文檔、新聞）：相似色使重點保持在閱讀上
- 投資組合網站：相似色讓作品說話，不需要競爭顏色
- 醫療保健和健康品牌：相似色的冷靜匹配品牌基調
- SaaS儀表板：用戶長時間盯著這些；較低對比減少疲勞
何時選擇互補色
- 電子商務：你需要那個對比來驅動轉換
- 娛樂品牌：能量和興奮比冷靜更重要
- 單頁登陸頁面：你在幾秒鐘內爭取注意力
網站相似色調色板
讓我給你五個我在實際項目上真的用過的經過實戰測試的相似色調色板。每個包括十六進制代碼、建議的角色和它們創造的情感氛圍。
調色板1：海洋深度（冷專業）
:root {
--primary: #1B4D6E; /* 深藍——主色 */
--secondary: #2E8B8B; /* 青綠——次要色 */
--accent: #3DAD9E; /* 海泡沫——強調色 */
--surface: #F0F7F7; /* 著色白——背景 */
--text: #1A2332; /* 接近黑——正文 */
}
最適合：SaaS產品、金融科技、公司網站。這個調色板說「我們認真但不無聊」。
調色板2：黃金時刻（暖歡迎）
:root {
--primary: #D4764E; /* 焦橙——主色 */
--secondary: #E8A94E; /* 琥珀——次要色 */
--accent: #F0C75E; /* 金——強調色 */
--surface: #FFF8F0; /* 暖白——背景 */
--text: #2D1F14; /* 深棕——正文 */
}
最適合：食品和飲料、酒店、生活方式品牌。溫暖和歡迎但不激進。
調色板3：森林地面（自然有機）
:root {
--primary: #4A7C59; /* 森林綠——主色 */
--secondary: #7BA05B; /* 鼠尾草——次要色 */
--accent: #A8BF6A; /* 石灰——強調色 */
--surface: #F5F7F0; /* 綠著色白——背景 */
--text: #1C2B1F; /* 深綠黑——正文 */
}
最適合：可持續品牌、戶外公司、健康。這個尖叫「我們關心地球」而不用真的說。
調色板4：暮光（精緻冷靜）
:root {
--primary: #5B4A8A; /* 深紫——主色 */
--secondary: #7B5EA7; /* 薰衣草——次要色 */
--accent: #9B72C1; /* 蘭花——強調色 */
--surface: #F5F2FA; /* 紫著色白——背景 */
--text: #1E1528; /* 接近黑紫——正文 */
}
最適合：創意機構、美容品牌、高級產品。紫色相似色調色板總是感覺有點奢華。
調色板5：日出（充滿活力暖色）
:root {
--primary: #C23B22; /* 豐富紅——主色 */
--secondary: #D96830; /* 焦赭——次要色 */
--accent: #E8973E; /* 橘黃——強調色 */
--surface: #FEF6F0; /* 桃著色白——背景 */
--text: #2A1510; /* 深巧克力——正文 */
}
最適合：食品送餐、健身、娛樂。高能量但仍然協調。
在我們的色輪工具上將這些作為起點來玩，找到與你特定品牌相匹配的變體。
如何在CSS中建立相似色配置
這是事情變得實際的地方。現代CSS使用HSL（色調、飽和度、亮度）值使建立和維護相似色配置變得極其容易。
HSL對於相似色配置的優點是你只需要移動色調值。飽和度和亮度保持相似，色調按30°增量旋轉。
:root {
/* 基本色調：200（一個好的蔚藍色） */
--hue-primary: 200;
--hue-secondary: 170; /* -30° = 青綠方向 */
--hue-accent: 230; /* +30° = 紫色方向 */
/* 建立調色板 */
--color-primary: hsl(var(--hue-primary), 65%, 42%);
--color-secondary: hsl(var(--hue-secondary), 55%, 48%);
--color-accent: hsl(var(--hue-accent), 60%, 52%);
/* 背景的淺色變體 */
--color-primary-light: hsl(var(--hue-primary), 40%, 95%);
--color-secondary-light: hsl(var(--hue-secondary), 35%, 93%);
/* 文本的深色變體 */
--color-primary-dark: hsl(var(--hue-primary), 70%, 15%);
}
這種方法有一個巨大的優點：你可以通過改變一個單一變量來移動你的整個調色板。需要從基於藍色變到基於綠色？將--hue-primary從200更改為150，整個系統重新計算。
使用oklch()獲得感知均勻的相似色調色板
如果你想更進一步，CSS oklch()色彩函數（自2023年以來在所有主要瀏覽器中支持）提供感知均勻的顏色間距。這意味著30°色調轉移看起來像相同的變化量，無論你在色輪的哪個位置——HSL無法保證的東西。
:root {
--primary: oklch(55% 0.15 230); /* 藍色 */
--secondary: oklch(55% 0.15 200); /* 青綠色 */
--accent: oklch(55% 0.15 260); /* 靛藍 */
}
相同的亮度、相同的色度，只是旋轉色調。結果是一個相似色調色板，感覺數學平衡和視覺均勻。我已經開始在所有新項目上使用這個，差異是明顯的。
網頁設計中相似色的真實示例
讓我們看看真實品牌如何使用相似色配置：
Spotify
Spotify的主要綠色（#1DB954）被更深的綠色和接近黑色的顏色包圍。它本質上是一個單色到相似色配置，綠色作為錨點。整個界面感覺統一，綠色在深色表面上彈出，而不需要互補顏色。
Headspace
冥想應用對著柔軟的白色使用了溫暖的橙色和黃色相似色調色板。它立即傳達了溫暖、冷靜和積極性——正好是品牌的意圖。沒有競爭的冷色。
Stripe
Stripe的網站使用了從藍色轉移到紫色再到粉紅色的冷色相似色漸變。它從技術上說是拉伸定義（這些顏色跨越色輪約120°），但漸變保持過渡平滑。結果感覺現代和略微超現實。
Dropbox（2017重新品牌化）
Dropbox使用了一個相似色藍紫色配置，在設計社區中被廣泛討論。調色板選擇強化了他們從「存儲實用程序」到「創意工作區」的轉變。無論你喜歡還是討厭它，色彩策略是深思熟慮的。
如果你正在用這些類型的調色板建立網站，與理解設計系統的團隊合作會有真實的區別。我們的無頭CMS開發方法讓設計師定義在每個組件中級聯的色彩標記——所以你的相似色配置從頭到腳保持一致。
常見錯誤及避免方法
錯誤1：對比度不足
相似色配置最大的問題是一切都看起來相同。如果你的三種顏色在飽和度和亮度上太相似，它們會相互暈染。
修復：在亮度值中有顯著的變化。你的主色可能在40%亮度，次要色在55%，強調色在70%。
錯誤2：忘記無障礙
相似色，根據定義，彼此接近。這意味著在彼此相鄰放置時，它們可能無法滿足WCAG對比要求。
修復：永遠不要單獨依賴兩個相似色調來傳達意義。始終配對充足的值對比（淺色對深色）。文本應針對背景進行測試——目標至少4.5:1的對比率用於正文。
/* 不好：兩個相似亮度的相似色 */
.card {
background: hsl(200, 60%, 50%); /* 中藍 */
color: hsl(170, 55%, 45%); /* 中青綠——對比失敗 */
}
/* 好：相似色調與高亮度對比 */
.card {
background: hsl(200, 30%, 95%); /* 非常淡藍 */
color: hsl(200, 70%, 20%); /* 非常深藍——通過 */
}
錯誤3：使用太多顏色
五個相似色很少比三個更好工作。你添加的顏色越多，保持視覺層次就越困難。
修復：堅持最多三個色調。通過那三個的亮度和飽和度變體生成你的擴展調色板，而不是添加更多色調。
錯誤4：忽視中性顏色
純相似色配置沒有中性色看起來像油漆店爆炸。每個好調色板都需要呼吸空間。
修復：添加向你的主色調傾斜的暖或冷灰色。藍色相似色配置應該使用藍灰色中性色，而不是純灰色。
對於建立在現代框架如Next.js或Astro上的項目，我們通常在中央配置文件中將這些調色板定義為設計標記。這使得在設計評論期間調整整個配置變得極其簡單，而不需要在數十個組件文件中尋找。
常見問題
簡單術語中什麼是相似色？ 相似色是任何在色輪上彼此相鄰的顏色組合。想象他們為色彩鄰居——他們共享常見的基調，自然地看起來很好在一起。紅色、紅橙色和橙色是相似色。藍色、藍綠色和綠色是相似色。你可以在我們的色輪工具上親手探索這些關係。
相似色配置中有多少顏色？ 通常三個，儘管你可以少至兩個或多至五個。三是網頁設計的最佳點，因為它給你一個主色、次要色和強調色，而不會淹沒佈局。超過三個變得更難以維持對比和層次。
相似色和互補色之間的區別是什麼？ 相似色是色輪上的相鄰色（相隔30°–60°），創建調和、低對比的感覺。互補色直接相對（相隔180°），創建最大對比和視覺張力。相似色是相似性的調和；互補色是相反的調和。大多數偉大的網頁設計使用相似色基礎配合互補強調。
相似色是暖色還是冷色？ 它們可以是其中任何一個，但任何單獨的相似色調色板將始終是暖色或冷色——絕不兩者。那是因為色輪上的相鄰色共享溫度。從黃色到橙色到紅色到粉紅色的調色板是暖的。從藍色到藍綠色到綠色的調色板是冷的。這個一致性是相似色配置感覺如此統一的原因之一。
自然界中相似色的一些例子是什麼？ 自然界充滿了相似色調和。日落從黃色轉移到橙色到紅色到粉紅色。秋葉通過黃色、橙色和紅色移動。苔蘚片顯示黃綠色到綠色到藍綠色。孔雀羽毛展示藍色到青綠色到綠色。設計師自從色彩理論被正式化以來就一直從自然的調色板中抄襲。
如何為我的網站建立相似色調色板？ 從你的品牌主色開始。在色輪上找到它，然後在任一側選擇相隔30°的顏色。分配60-30-10比率：60%主色、30%次要色、10%強調色。添加一個接近白色的著色背景和一個接近黑色的著色文本顏色。測試WCAG無障礙對比。如果你想要一個快速起點，我們的色輪工具會自動生成這些調色板。
相似色可以用於暗模式網頁設計嗎？ 絕對可以。色調關係保持相同——你只是反轉亮度值。亮模式使用亮背景（95%亮度）和深文本（15%亮度），暗模式翻轉到暗背景（10-15%亮度）和淡文本（85-90%亮度）。為強調顏色和互動元素保持你的相似色調，並為表面使用相同色調的深化版本。
相似色配置適用於電子商務網站嗎？ 它們適用作為基礎調色板，但純相似色配置對於電子商務來說可能太冷靜了，在那裡你需要緊迫性和清晰的行動呼籲。最好的方法是一個相似色基礎配合一個單獨的互補強調用於按鈕和銷售徽章。例如，一個綠青綠相似色調色板配合一個紅色「加入購物車」按鈕通過對比創建即時視覺層次。如果你正在計劃一個無頭電子商務建立，聯繫——色彩策略是我們設計流程的一部分。