什麼是配色方案產生器？

配色方案產生器基於色彩理論創建和諧的顏色組合。選擇一個基色和配色規則，即可產生配色方案。

三種起點任你選：用取色器選取基礎色或貼上十六進位碼、拖入一張相片擷取其主色調，或輸入像 ocean、sunset 這樣的氛圍詞。接著選擇一種配色規則，工具會依色輪上的色彩理論比例生成其餘顏色。鎖定想保留的色塊、隨機刷新其餘顏色，點一下你喜歡的顏色就能讓整組配色圍繞它重新生成，還能在色盲濾鏡下預覽效果。最後可將五個顏色匯出為 CSS 自訂屬性區塊、Tailwind 設定或 JSON 檔供設計系統使用，也能把色卡存成 PNG 或 SVG 圖片，方便放進需求文件或發到社群。

使用方法

1. 從基礎色開始，拖入相片擷取顏色，或輸入像 ocean、sunset 這樣的氛圍詞
2. 選擇配色規則：互補色、類似色、三色、分裂互補色、四色組或單色
3. 把任一色塊複製為 HEX、RGB 或 HSL，再從對比度網格挑出能讀的搭配，最後把整組配色匯出為 CSS、Tailwind 設定、JSON，或 PNG / SVG 色卡圖片

何時使用

• 客戶已敲定一個品牌主色,基於它擴出完整配色方案。
• 為圖表或儀表板挑選辨識度高的輔助色。
• 做投影片或社群圖前,快速試幾種配色感覺。

結果

基色 #3498DB 的三色配色產生：#3498DB、#976CD6、#DB3498。

常見問題

互補色、類似色、三色組到底差在哪?

互補色把基色和色環上對位 180° 的顏色放一起,對比最強。類似色把所有顏色控制在色環 30° 範圍內,整體很柔和。三色組是三個顏色各間隔 120°,既鮮明又平衡。

可以保留某個顏色、只重產生其他幾個嗎?

可以。在想保留的色塊上按「鎖」,然後切換和諧方式或基色,或者按「洗牌」,鎖定的色塊不會變,其餘幾格會圍著它重新生成。

該選哪種匯出格式?

CSS 給你 --color-1 這類自訂屬性;Tailwind 選項會生成可直接放進設定的 theme.extend.colors 區塊;JSON 是結構化物件,適合 Design Token 工具或腳本。若想把配色當圖片分享——放進需求文件、簡報或社群貼文——選 PNG 取得點陣圖,選 SVG 取得清晰的向量色卡。

這些配色能直接通過 WCAG 對比度標準嗎?

內建的對比度網格會依 WCAG 2.x 的門檻逐組打分——AAA 是 7:1，AA 是 4.5:1，AA Large 是 3:1——不達標的組合直接以玫紅色標示。要套用到正文或按鈕之前就從這張網格挑搭配，因為和諧規則是依視覺平衡算的，並不保證對比度。

我的顏色資料會被上傳嗎?

哪兒都不去。所有色彩計算都在頁面內完成，你拖入的任何相片都在你的裝置上讀取以擷取顏色，絕不會上傳到任何地方。你的基礎色、配色與匯出檔都留在本地，未發布的品牌配色就像你自己的剪貼簿一樣私密。

相關工具