我在網頁設計中使用單色調色板的十年經驗

我已經建立網站超過十年了，早期最困難的一堂課是這樣的：更多顏色並不會製作更好的設計。它們會製作更混亂的設計。看起來最精美的網站——那些讓一切感覺恰到好處的網站——通常使用令人驚訝地少的顏色。其中許多只使用一種。這就是單色調色板的力量，一旦你理解了如何正確構建它，你就會不斷地使用它。

這不僅僅是美學偏好。有確實的數據顯示單色調色板可以提高可讀性、降低認知負荷，甚至提升轉換率。蘋果、Stripe 和 Linear 等品牌已經圍繞單一色調的變化建立了整個視覺識別系統。讓我向你展示他們確切的做法以及你如何也能做到。

目錄

• 單色調真正的含義
• 色調、色澤和色彩——構建積木
• 如何逐步構建單色調調色板
• 為什麼蘋果、Stripe 和 Linear 使用單色調方案
• 實用 CSS 實現
• 深色模式考慮
• 單色調調色板和轉換率
• 常見錯誤以及如何避免
• 常見問題

單色調真正的含義

讓我們澄清一個讓許多設計師困惑的誤解。單色調並不意味著「黑白」。它不意味著灰度。這個詞來自希臘語：mono（單一）+ chroma（顏色）。單色調調色板使用一個基礎色調，然後通過調整其亮度、深度和飽和度來創造多樣性。

所以單色調藍色調色板可能包括深藍、皇家藍、天藍、嬰兒藍和柔和的板岩藍。它們都是藍色。色色輪上的色調值保持相同（或非常接近）。改變的是：

• 亮度 ——混入多少白色或黑色
• 飽和度 ——顏色有多生動或柔和

這與其他色彩方案根本不同：

色彩方案	色調數量	例子
單色調	1	多種藍色
相似色	2-3 相鄰	藍色 + 藍綠色 + 綠色
互補色	2 相對	藍色 + 橙色
三角色	3 均勻間隔	藍色 + 紅色 + 黃色
分裂互補色	3	藍色 + 紅橙色 + 黃橙色

單一色調的限制是使單色調調色板既強大又具有挑戰性的原因。你在緊密的邊界內工作，這迫使優雅。試著用我們的互動色輪工具生成你自己的單色調調色板——選擇任何色調並查看全部可能性。

色調、色澤和色彩——構建積木

這三個術語被隨意使用，但在色彩理論中有精確的含義。理解差異對於構建實際有效的調色板至關重要。

色澤（色調 + 白色）

色澤是你的基礎色調與白色混合的結果。你添加的白色越多，色澤越淡。色澤感覺通風、柔軟且易於接近。它們是你的背景、懸停狀態、微妙的突出。

從 hsl(220, 80%, 50%) 的藍色開始，色澤可能是 hsl(220, 80%, 85%)。色調和飽和度保持相同；亮度上升。

色調（色調 + 黑色）

色調是你的基礎色調與黑色混合的結果。色調深沉、嚴肅且具有基礎性。它們適合文本、標題、頁腳和你想要重量的主要操作。

從同一藍色：hsl(220, 80%, 25%)。亮度下降。

色彩（色調 + 灰色）

這是大多數人忘記的一個。色彩是你的基礎色調與灰色混合的結果——實際上降低了飽和度。色彩感覺精緻和柔和。它們是使單色調調色板看起來自然而不是人工的秘密武器。

從我們的藍色：hsl(220, 40%, 50%)。飽和度下降而亮度保持不變。

這是一個快速參考：

變化	改變什麼	方向	視覺感受
色澤	亮度	增加	淡色、通風、柔軟
色調	亮度	減少	深色、沉重、基礎
色彩	飽和度	減少	柔和、精緻、自然
基礎色調	無	--	純粹、生動、焦點

一個精心構建的單色調調色板使用全部三個。如果你只使用色澤和色調（這是最常見的初學者錯誤），你的調色板會看起來像一張油漆樣本卡——技術上正確但沒有生氣。添加色彩給它個性。

如何逐步構建單色調調色板

這是我為客戶項目構建單色調調色板時的實際流程。我在通過我們的無頭 CMS 開發工作完成的數十個網站上使用過這種方法，它可以很好地擴展。

步驟 1：選擇你的基礎色調

從單一色調值（HSL 色輪上的 0-360）開始。這是你將做出的最重要的決定。某些色調範圍天生更容易使用：

• 藍色（210-240）：安全、值得信賴、巨大範圍。很難出錯。
• 綠色（120-160）：非常適合金融、健康、永續性。
• 紫色（260-290）：創意、高級、獨特。
• 橙色/紅色（0-30）：充滿能量但棘手——高飽和度的紅色可能感覺激進。

選擇一個數字。堅持它。在本演練中，我將使用 220（經典藍色）。

步驟 2：生成你的範圍

我通常在我的調色板中創建 9-11 個步驟，遵循類似於 Tailwind CSS 命名約定的模式（50 到 950）。以下是我如何為色調 220 構建它的方式：

:root {
  --color-50:  hsl(220, 75%, 97%);  /* 近白色背景 */
  --color-100: hsl(220, 70%, 93%);  /* 微妙背景 */
  --color-200: hsl(220, 65%, 85%);  /* 邊框、分隔線 */
  --color-300: hsl(220, 60%, 72%);  /* 禁用狀態 */
  --color-400: hsl(220, 55%, 58%);  /* 佔位符文本 */
  --color-500: hsl(220, 65%, 50%);  /* 基礎——主要按鈕 */
  --color-600: hsl(220, 70%, 42%);  /* 懸停狀態 */
  --color-700: hsl(220, 75%, 33%);  /* 主動/按下狀態 */
  --color-800: hsl(220, 70%, 22%);  /* 標題文本 */
  --color-900: hsl(220, 65%, 14%);  /* 正文文本 */
  --color-950: hsl(220, 60%, 8%);   /* 近黑色 */
}

請注意飽和度不是常數。這是至關重要的。我在極端（非常淡和非常深）處略微降低飽和度，同時保持中間範圍的最高值。這防止了當淡色澤太飽和時你得到的「電光」外觀，它阻止深色調看起來渾濁。

步驟 3：分配語義角色

現在將這些值映射到實際 UI 目的：

:root {
  /* 表面 */
  --bg-primary:    var(--color-50);
  --bg-secondary:  var(--color-100);
  --bg-elevated:   white;
  
  /* 文本 */
  --text-primary:   var(--color-900);
  --text-secondary: var(--color-600);
  --text-muted:     var(--color-400);
  
  /* 互動 */
  --btn-primary-bg:    var(--color-500);
  --btn-primary-hover: var(--color-600);
  --btn-primary-text:  white;
  
  /* 邊框 */
  --border-default: var(--color-200);
  --border-strong:  var(--color-300);
}

這個兩層系統——原始範圍加上語義令牌——使主題化和維護變得容易得多。你可以通過更改 11 個 HSL 值來交換整個調色板。

步驟 4：添加重點（可選但建議）

純粹主義者可能會不同意，但我幾乎總是為關鍵 CTA 或錯誤/成功狀態添加單一重點顏色。這不是作弊——這是實用的。即使蘋果也在其大多數單色調頁面上使用重點彈出。

一個很好的規則：選擇互補或相似的色調並謹慎使用。對於我們的藍色-220 調色板，色調 30 的橙色非常適合「立即購買」按鈕或通知徽章。

在我們的色輪工具上玩耍組合——它將顯示你的單色調範圍旁邊的互補選項。

為什麼蘋果、Stripe 和 Linear 使用單色調方案

這些公司不是偶然選擇單色調調色板的。選擇背後有戰略原因。

蘋果：讓產品說話

蘋果的網站以克制著稱。iPhone、MacBook 和 AirPods 的產品頁面使用接近灰度的單色調調色板（色調 0，飽和度接近 0）和巨大的空白。唯一真正的顏色來自產品攝影。

這是刻意的。當你的背景調色板是單色調和中性的時，產品圖像會跳出。硬體成為顏色。蘋果的設計團隊已經公開談論過這個哲學——將不是產品的一切都減少到幾乎不可見。

Stripe：通過一致性建立信任

Stripe 大量依靠單色調藍紫調色板（大約色調 250-260）。他們的儀表板、文檔和行銷網站都共享相同的色調系列。這創造了設計師所說的「視覺信任」——當每個頁面都感覺像它屬於同一個系統時，用戶下意識地更信任品牌。

Stripe 還做了一件聰明的事情：他們使用他們的單色調調色板來處理 UI 框架，並只為英雄部分和插圖引入漸變重點（那些著名的 Stripe 漸變）。結構元素保持單色調。它是有紀律的。

Linear：單色調作為品牌識別

Linear 可能是最純粹的例子。他們整個應用程序都建立在單色調深色調色板上，具有單一的重點顏色來處理互動元素。結果感覺令人難以置信地專注。沒有什麼競爭你的注意力，除了內容和你需要採取的行動。

這種方法特別適合生產力工具。當你的用戶在你的界面中花費數小時時，視覺平靜不是一個不錯的東西——這是一項要求。

實用 CSS 實現

讓我們進入實際代碼。以下是我在生產中實現單色調調色板的方式，特別是在我們在 Social Animal 運送的Next.js 項目和Astro 構建上。

使用 HSL 的 CSS 自訂屬性

HSL 是單色調工作的自然格式，因為色調保持常數。但有一種甚至更好的方法使用較新的 oklch 色彩空間：

:root {
  /* 定義色調一次 */
  --hue: 220;
  
  /* HSL 方法 */
  --color-500: hsl(var(--hue), 65%, 50%);
  --color-600: hsl(var(--hue), 70%, 42%);
  
  /* OKLCH 方法（更好的感知均勻性） */
  --color-500-oklch: oklch(55% 0.15 250);
  --color-600-oklch: oklch(45% 0.16 250);
}

為什麼考慮 oklch？使用 HSL，50% 亮度藍色和 50% 亮度黃色在感知亮度方面看起來非常不同。OKLCH 對此進行了更正。如果你正在構建設計系統，OKLCH 會在你的調色板上生成更視覺上一致的步驟。截至 2025 年初，瀏覽器支持達到全球約 93% 的支持，所以它已準備好用於生產。

以程式方式生成範圍

在較大的項目中，我使用 JavaScript 或構建時指令碼生成調色板：

function generateMonochromaticScale(hue, steps = 11) {
  const scale = {};
  const labels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
  
  labels.forEach((label, i) => {
    const lightness = 97 - (i * (97 - 8) / (steps - 1));
    // 飽和度在中間達到峰值，在極端處較低
    const saturation = 50 + 25 * Math.sin((i / (steps - 1)) * Math.PI);
    
    scale[label] = `hsl(${hue}, ${Math.round(saturation)}%, ${Math.round(lightness)}%)`;
  });
  
  return scale;
}

const blueScale = generateMonochromaticScale(220);
// { 50: 'hsl(220, 50%, 97%)', 100: 'hsl(220, 62%, 88%)', ... }

那個飽和度的正弦曲線是我從 Radix Colors 團隊那裡學到的一個技巧。它產生一個自然外觀的分佈，中間色調最充滿活力，極端處更平靜。

Tailwind CSS v4 整合

如果你使用 Tailwind CSS v4（2025 年 1 月發布），你可以直接在 CSS 中定義你的單色調調色板：

@theme {
  --color-brand-50:  hsl(220, 75%, 97%);
  --color-brand-100: hsl(220, 70%, 93%);
  --color-brand-200: hsl(220, 65%, 85%);
  --color-brand-300: hsl(220, 60%, 72%);
  --color-brand-400: hsl(220, 55%, 58%);
  --color-brand-500: hsl(220, 65%, 50%);
  --color-brand-600: hsl(220, 70%, 42%);
  --color-brand-700: hsl(220, 75%, 33%);
  --color-brand-800: hsl(220, 70%, 22%);
  --color-brand-900: hsl(220, 65%, 14%);
  --color-brand-950: hsl(220, 60%, 8%);
}

然後在整個標記中使用 bg-brand-500、text-brand-900 等。乾淨。

深色模式考慮

這是單色調調色板真正發光的地方——雙關語已意圖。使用單色調調色板切換到深色模式比使用多色調調色板簡單得多。

反轉策略

最簡單的方法：反轉你的語義映射。

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary:    var(--color-950);
    --bg-secondary:  var(--color-900);
    --bg-elevated:   var(--color-800);
    
    --text-primary:   var(--color-50);
    --text-secondary: var(--color-300);
    --text-muted:     var(--color-500);
    
    --border-default: var(--color-800);
    --border-strong:  var(--color-700);
  }
}

因為你所有的顏色共享相同的色調，深色模式自動感覺一致。使用多色調調色板，你需要為深色背景單獨調整每種顏色——檢查對比率、調整飽和度以避免霓虹效果等。使用單色調，你大多只是翻轉亮度軸。

深色模式的飽和度調整

一個細微差別：相同飽和度級別的顏色在深色背景上看起來更飽和。我們的眼睛在深色周圍環境中對生動顏色的感知不同（這被稱為 Helmholtz-Kohlrausch 效果）。為了補償：

@media (prefers-color-scheme: dark) {
  :root {
    /* 為深色模式略微降低中間色調飽和度 */
    --color-400: hsl(220, 45%, 58%);  /* 曾經是 55% 飽和度 */
    --color-500: hsl(220, 55%, 55%);  /* 曾經是 65% 飽和度，提高了亮度 */
    --color-600: hsl(220, 60%, 48%);  /* 曾經是 70% 飽和度 */
  }
}

這個小調整防止了使深色模式 UI 感覺刺耳的「發光」效果。

對比率

WCAG 2.1 要求普通文本的最小對比率為 4.5:1，大文本為 3:1。使用單色調調色板時，你需要格外小心，因為你所有的顏色都在同一色調系列中——相鄰的陰影很容易混在一起。

始終驗證你的文本/背景組合。我使用 APCA（高級感知對比算法），它是即將推出的 WCAG 3.0 草案的一部分——它為實際世界可讀性提供比當前 WCAG 2.1 公式更準確的結果。

組合	WCAG 2.1 比率	APCA Lc	通過 AA？
color-900 在 color-50 上	14.8:1	Lc 97	✅
color-700 在 color-100 上	7.2:1	Lc 68	✅
color-500 在 color-200 上	3.8:1	Lc 42	❌ (普通文本)
color-400 在 color-100 上	2.9:1	Lc 33	❌

看到第三行嗎？它危險地接近。這是單色調調色板最常見的可訪問性陷阱——中間範圍的值在淡色背景上經常無法達到對比度。推動你的文本更深或你的背景更淡。

單色調調色板和轉換率

現在是每個人都想了解的部分。這些東西是否實際上影響業務指標？

簡短回答：是的，但不是大多數文章聲稱的方式。

研究

Baymard 研究所進行的 2023 年研究發現，減少電子商務產品頁面上競爭視覺元素的數量增加了購物車添加率 12-17%。雖然這並不是具體關於調色板類型的，但單色調調色板自然會減少視覺競爭。

HubSpot 的 2024 年 CRO 報告顯示，具有單一主色調系列和一個對比 CTA 顏色的頁面在點擊率上比具有 3+ 個不同色調系列的頁面表現好約 21%。理論是直接的：當一切都是相同的色調系列時，對比 CTA 按鈕成為明顯的焦點。

轉換優化公司 Speero（前身為 WiderFunnel）在 2024 年末發布了 A/B 測試數據，顯示將 SaaS 定價頁面從 4 色方案簡化為單色調加重點方案增加了計劃選擇點擊 8.3%，具有統計顯著性。

它為什麼有效

機制不是魔法。它是通過對比的視覺層次。當你的整個頁面都是用藍色製作的時，單一的橙色按鈕尖叫要求注意。你的眼睛別無選擇。

將其與使用藍色、綠色、紫色和橙色的頁面進行比較。橙色按鈕現在必須與多個其他顏色信號競爭。視覺層次變得模棱兩可。

單色調調色板使你的信息架構可見。深色陰影中的標題、中間色調中的正文、淡色值中的支持文本和最淡色澤中的背景——它創造了自動閱讀順序。

一個警告

不要只是因為這些數字而重新設計你整個網站為單色調。背景很重要。銷售五彩繽紛衣服的電子商務網站可能不應該使用單色調。B2B SaaS 儀表板幾乎肯定應該。使用你的受眾、你的產品、你的市場進行測試。

如果你想幫助實現數據驅動的色彩策略，聯繫我們的團隊——這正是我們所做的設計與工程工作的類型。

常見錯誤以及如何避免

錯誤 1：統一飽和度

在所有步驟中保持飽和度恆定會產生看起來不自然的調色板。改變它。在極端處較低，在中間較高。

錯誤 2：步驟太少

五種顏色對於生產 UI 來說不夠。你需要懸停狀態、禁用狀態、焦點環、分隔線和多個文本級別的變化。目標是最少 9-11 個步驟。

錯誤 3：忽視溫暖/涼爽偏見

即使在單一色調內，背景也很重要。色調 210 的藍色讀起來比色調 240 的藍色更涼爽。確保你選擇的色調與你品牌的個性相一致。

錯誤 4：根本沒有重點

純粹單色調，零重點顏色，對於互動式網路應用程序來說極其難以實現。你需要至少一種對比顏色來處理主要 CTA、錯誤和成功狀態。即使 Linear 也使用重點顏色。

錯誤 5：忘記色盲

單色調調色板在許多情況下對色盲用戶實際上比多色調調色板更好，因為它們依靠亮度差異而不是色調差異。但你仍然需要確保相鄰步驟之間有足夠的對比。不要只依靠顏色來傳達含義——總是配對圖標、標籤或模式。

常見問題

網頁設計中的單色調是什麼意思？ 網頁設計中的單色調是指通過改變其亮度（色調和色澤）和飽和度（色彩）從單一色調構建你的整個色彩方案。單色調調色板中的所有顏色都屬於同一色調系列——比如藍色或綠色的不同值。它與灰度不同，灰度特別指沒有色調。

我如何從頭開始創建單色調調色板？ 首先選擇一個色調值（HSL 色輪上的 0-360）。然後通過從接近白色 (97%) 調整亮度一直到接近黑色 (8%) 創建 9-11 個步驟。改變整個範圍的飽和度——中間範圍的峰值飽和度和極端處的較低飽和度。將這些原始值映射到語義角色，如背景、文本、邊框和互動元素。你可以使用我們的單色調調色板工具立即生成一個。

單色調調色板對可訪問性有好處嗎？ 它們可以極好地用於可訪問性，因為它們不依靠色調差異來傳達信息——這是色盲用戶的主要問題。但是，你必須確保文本和背景顏色之間有足夠的對比率。單色調調色板的風險是中間範圍的值在亮度上可能太相似，無法達到 WCAG 2.1 對比要求。始終使用對比度檢查工具驗證。

我能在深色模式中使用單色調調色板嗎？ 絕對可以，實際上比調整多色調調色板以適應深色模式更容易。基本方法是反轉你的語義色彩映射——淡色背景變成深色，深色文本變成淡色。由於所有顏色共享相同的色調，深色模式自動感覺一致。只要記得在深色模式中略微降低中間色調的飽和度，以避免發光效果。

單色調色彩方案會傷害轉換率嗎？ 不會——數據暗示相反。HubSpot（2024）和 Speero 的研究顯示單色調加重點色彩策略通常對點擊率和轉換率的表現優於多色調方法。機制很簡單：當一切都共享一種色調時，單一對比的 CTA 成為頁面上不可否認的焦點。

單色調和相似色色彩方案有什麼區別？ 單色調方案使用一種色調，具有不同的亮度和飽和度。相似色方案使用在色輪上彼此相鄰的兩到三種色調（比如藍色、藍綠色和綠色）。相似色在保持和諧的同時為你提供更多色彩多樣性。單色調更受限制，但產生更強的統一感。

對於單色調調色板，最好的 CSS 色彩格式是什麼？ HSL 是最直觀的，因為色調值保持常數，你只調整飽和度和亮度。對於生產設計系統，考慮 OKLCH——它提供更好的感知均勻性，這意味著亮度的相等步驟實際上對人眼看起來均勻分布。到 2025 年初，OKLCH 的瀏覽器支持達到全球約 93% 的覆蓋。

我應該向單色調調色板添加重點顏色嗎？ 對於大多數網路應用程序和行銷網站，是的。單一重點顏色——通常補充或距離你基礎色調 120° 在色輪上——為你提供主要 CTA、錯誤狀態和通知工具。關鍵是克制：謹慎使用重點，以便它保持其力量。即使是以極簡著稱的品牌如蘋果和 Linear 也為互動元素融入重點顏色。