什麼是配色方案產生器？
配色方案建立器利用色彩理論規則，從單一基礎色產生完整的色彩搭配方案。可選擇單色、互補色、分裂互補、雙分裂互補、三角色、四角色或類似色方案，並對每個色票進行微調。複製分享連結、匯出為CSS變數或Tailwind設定，或複製十六進位色碼。
選定一個基礎 hex,生成器會依色相環做標準旋轉:互補色相距 180 度、分裂互補在 150 度與 210 度兩側各取一色、三色 120 度、四色 90 度,類似色則在兩側各取一小步。陰影與高光保留相同色相,只在 HSL 空間以固定步長調整亮度,因此每個顏色都會得到一組乾淨的五階漸層。每個色塊可以複製為 HEX、rgb()、hsl() 或 oklch();對比度面板會比對白色與黑色給出 WCAG AA、AAA 結果;一鍵視覺預覽更能把整組配色重新渲染為紅色盲、綠色盲或藍色盲版本。複製分享連結即可收藏配色,或無需帳號直接傳給同事。
使用方法
- 使用色彩選擇器選取基礎色，或輸入十六進位色碼。
- 選擇方案類型（單色、互補色、分裂互補、雙分裂互補、三角色、類似色、四角色）以產生配色方案。
- 複製單個十六進位色碼，將完整配色方案匯出為CSS變數，或下載為色票圖片。
何時使用
- 把一個品牌主色擴展為完整調色盤,用於新網站或 App 主題。
- 印製周邊商品前,驗證 logo 顏色能否找到乾淨的互補色。
- 不開啟 Figma 或設計工具,直接產生 CSS 自訂變數。
結果
一位網頁開發者選擇品牌主藍色（#3B82F6），產生三角配色方案，得到互補的橙色和綠色調，然後將配色方案匯出為CSS自訂屬性，用於其設計系統。
常見問題
- 三色組和四色組差別在哪?
- 三色組是色輪上相隔 120 度的三種顏色,組合平衡。四色組用四種顏色構成矩形(兩對互補色),變化較豐富,但平衡更難掌握。
- 什麼時候用陰影,什麼時候用淺色?
- 陰影(較暗版本)適合用在淺色介面的文字、邊框、hover 狀態;淺色(較亮版本)適合背景、停用狀態與細微的高光。大多數設計系統兩種漸層都需要。
- 產生器會考慮無障礙對比度嗎?
- 有的——配色下方的對比度面板會列出每個顏色對白色與黑色的 WCAG 對比度,並標示 AA、AAA 是否通過。一般正文以 4.5:1 為門檻;再把視覺預覽切到紅色盲、綠色盲或藍色盲,就能看見色覺障礙使用者眼中的配色。
- 為什麼類比色看起來比互補色柔和?
- 類比色在色輪上彼此相鄰,屬於同一色系,視覺衝突小;互補色位於色輪兩端,對比最強,感覺更有活力,但大面積使用時會比較刺眼。
- 可以匯出 Tailwind 設定嗎?或只支援 CSS 變數?
- 兩種都支援。CSS 變數可直接貼進樣式表的 :root。Tailwind 格式會把 hex 值包在 theme.extend.colors 物件內,複製到 tailwind.config.js 即可使用。