調色盤生成器 (一基色 5 種方案)

選基色, 選色彩理論方案, 得協調調色盤。點色塊複製單個 hex 值, 或一次複製所有用於設計工具和 CSS 變數。

基色

配色方案

運作原理

互補: 色輪兩端 (相距 180°) 的兩個顏色。高對比、鮮豔。用於強調、CTA 按鈕、建立焦點。

類比: 色輪上相鄰三色 (相距 30°)。和諧悅目、低對比。自然中常見; 適合背景和 UI 表面。

三色: 等距三色 (相距 120°)。鮮豔平衡。用於俏皮或有活力的設計。

四色 (矩形): 形成矩形的四色 (相距 90°)。調色盤豐富但更難平衡 — 通常用一個為主導, 其他為強調。

單色: 單一色相的色調、色彩、陰影。精緻統一。常見於極簡設計和企業品牌。

品牌色: 多數專案從現有 logo 或品牌色開始。在所有 5 種方案中作基色測試找最適合你設計的。

靈感: 從攝影、藝術或自然選色。鮮豔顏色 (高飽和、中明度) 作基色最佳; 非常淡或非常暗的顏色產生蒼白調色盤。

無障礙: 確保最終調色盤對文字有足夠對比度。用我們的對比檢查器驗證前景/背景搭配滿足 WCAG AA (普通文字 4.5:1)。

CSS 變數: 把調色盤顏色定義為 :root 變數 (--color-primary、--color-accent 等), 透過改一處即可換主題。

設計工具: 把 hex 值粘到 Figma、Sketch 或 Adobe XD 的顏色庫。多數工具接受 hex 直接; 一些接受 HSL 或命名 CSS 顏色。

限制使用: 即使有 5 色, 真實設計通常 2-3 色突出, 其餘少用。60-30-10 法則 (60% 主導、30% 次要、10% 強調) 是有用的起點平衡。

›應該用哪種方案?

類比對多數設計最安全 — 三個鄰近色製造和諧而不單調。互補適合強調 (CTA 按鈕)。單色最適合極簡/精緻品牌。三色適合俏皮/有活力感覺。

›可以得到 5 個以上顏色?

本工具不能 — 我們生成標準 2-5 色方案。更大調色盤用類比輸出並建立每色的單色陰影 (合併方案)。

›演算法用感知均勻顏色空間?

我們用 HSL 數學, 快速且可預測。感知均勻結果 (對無障礙調優調色盤更好) 高階工具用 OKLCH 或 CIELAB。HSL 對多數設計工作足夠。

›我的調色盤會無障礙嗎?

不會自動。色彩理論方案保證美學和諧, 不保證文字對比度。釋出前總用我們的對比檢查器檢查文字-背景組合。

›可以儲存我喜歡的調色盤?

暫時不能 — 把 hex 程式碼複製到你的設計系統或筆記。可書籤的調色盤 URL 在路線圖。

›Material Design 或 Tailwind 調色盤呢?

那些是預策劃系統。在這裡生成基礎方案, 然後查詢相似的 Material/Tailwind 顏色。一些應用直接匯出與這些系統相容的 hex 程式碼。

›為什麼我的調色盤看起來「平」?

如果你的基色非常淡 (高明度) 或非常暗 (低明度), 生成的調色盤動態範圍有限。選中明度 (40-60%) 和高飽和 (70%+) 的基色得到鮮豔結果。

›資料會上傳嗎?

不會。所有計算在本地; 不向伺服器傳送。