網頁配色方案生成器

從主色整理五種介面色彩角色

這個配色工具以一個主色為起點，產生主色、輔助色、強調色、背景色和文字色五個候選色，並提供色塊預覽、網頁版面示意、HEX、RGB、HSL 色值，以及可複製的純文字色板和 CSS 變數。示意版面用來觀察顏色放在導覽、按鈕、卡片與文字區域時的大致效果；它不是完整網站樣板，也不會依照你的品牌規範自動完成設計系統。

HEX 是常見的十六進位色碼，例如 #2563eb；RGB 以紅、綠、藍三個通道表示顏色；HSL 則以色相、飽和度、明度描述顏色。工具依選定規則在 HSL 色相與部分明度、飽和度上產生候選值，再轉成色碼供你比較和使用。CSS 也支援這些色彩表示方式，詳見 W3C CSS Color Module Level 4。

六種關係提供不同的起稿方向

互補色把色相移到對側，適合先觀察較明顯的冷暖或色相差異；類似色取主色兩側相鄰方向，整體色相較接近；三角配色在三個方向分布，四角配色則以四個方向排列；分裂互補色取互補方向兩側的色相；單色方案維持相近色相，透過明暗和彩度變化拉出層次。這些名稱描述的是色相關係，不保證結果自然、符合品牌，或套用後就有足夠文字對比。

以色相角 H 表示，工具的互補色使用 H+180°，類似色取 H−30° 與 H+30°，三角配色取 H、H+120°、H+240°，四角配色每隔 90° 取一個方向，分裂互補色取 H+150° 和 H+210°。背景色、強調色與文字色還會依方案調整明度或飽和度，因此五個角色不是單純旋轉色相所得，也不會因數值間隔相同就在人眼看來等距。

色彩表示和介面上的可讀性是不同問題。WCAG 2.2 的文字對比要求會依一般文字、大字及適用例外而不同；想了解標準範圍，可參考 W3C WAI 對比度最低要求說明。

輸入色碼並挑選配色關係

1. 在主色欄輸入三位或六位十六進位色碼，例如 #36f 或 #2563eb；也可以使用旁邊的取色器選色。有效色碼會更新結果，其他格式或顏色名稱不會被接受。

2. 選擇互補色、類似色、三角配色、四角配色、分裂互補色或單色。更換主色或關係時，五個角色色及示意預覽會隨之更新。隨機按鈕可換一個主色；重置則回到預設主色 #2563eb 與互補色方案。

3. 比較色塊和示意頁面，再查看每個角色對應的 HEX、RGB、HSL 數值。需要帶走結果時，可複製單一色碼，或複製整份純文字色板與 CSS 變數片段。

例如使用預設藍色並切換到三角配色，可先觀察主色與另外兩個色相方向的差異，再檢查背景、強調和文字色是否適合你的實際版面。這是挑選候選色的起點；你也可以把色碼帶入現有設計稿或樣式表繼續微調。

使用配色結果時常見疑問

色票是候選值，請在實際介面確認

生成依固定色相關係及明度、飽和度調整規則提供參考色值，不會分析品牌識別、內容情境、螢幕顯示差異或印刷需求。不同顯示器、亮度和色彩設定也可能讓同一色碼看起來不同；正式採用前，請在實際頁面、裝置與設計規範中檢查。

工具沒有對比度計算或無障礙合規判定功能。WCAG 2.2 對一般文字通常要求文字與背景至少 4.5:1，大字至少 3:1，並另有適用條件和例外；詳細範圍請以 W3C WAI 說明及正式準則為準。色相相配或示意預覽看起來清楚，都不能代替對比度檢查。