配色網站推薦、色彩學與網站配色實作指南

配色網站推薦：10 個免費工具、色彩學原理與網站配色實作

內容目錄 顯示
加入為 Google 偏好來源

截至 2026 年，免費配色網站已經能產生色票，從照片取色並預覽介面。真正困難的，是把五個漂亮色碼變成能上線的網站配色。色票如果沒有角色，按鈕、文字、背景與錯誤提示會搶著用同一種顏色；顏色好看但對比不足，內容仍可能看不清楚。

先說結論：依任務選配色網站，不要只收藏色票

想快速產生色票，可先用 Coolors；要理解色相環與配色關係，可用 Adobe Color 或 Canva Color Wheel；想把顏色放進網站畫面預覽，可用 Happy Hues 或 Realtime Colors；要檢查文字對比，再用 Adobe Color Accessibility 或 WebAIM Contrast Checker。

選完工具後還有三步：把顏色分配給文字、背景、主要操作等角色，檢查一般文字與介面元件的對比，最後放進真實頁面測手機版與互動狀態。這篇會把配色網站與色彩學放在同一個流程裡。

10 個免費配色網站快速比較

工具主要適用任務特色使用提醒
Coolors快速產生與鎖定色票產生器、照片取色與對比檢查生成後仍要放進介面驗證
Adobe Color色相環與照片取色配色規則與無障礙工具登入與部分功能可能依服務調整
Color Hunt瀏覽人工整理的靈感依熱門、新作與主題找色票靈感不等於可讀性合格
Canva Color Wheel理解色相環關係互補、單色、類似與三角色下載設計素材前另查條款
Material Theme Builder建立介面色彩角色從核心色產生 Material 3 主題偏 App 與設計系統，不是一般靈感牆
Huemint依版型情境產生色票機器學習、鎖色與前後景關係AI 結果要人工檢查對比與品牌感
ColormindAI 色票與照片取色可鎖定顏色，依照片或資料集生成結果具隨機性，重跑可能不同
Happy Hues看色票如何分配到畫面以實際頁面示範背景、文字與按鈕適合找方向，不宜整頁照搬
Realtime Colors即時預覽網站配色文字、背景、主色、輔色與強調色仍要用真實內容與元件測試
WebAIM Contrast Checker檢查前景與背景對比顯示 WCAG AA／AAA 結果單一色對合格不代表整站合格

工具官方入口：Coolors、Adobe Color、Color Hunt、Canva Color Wheel、Material Theme Builder、Huemint、Colormind、Happy Hues、Realtime Colors、WebAIM Contrast Checker（查證 2026-08-02）

本文把「免費」限定為 2026 年 8 月 2 日可免費開啟或有免費使用入口，不代表平台裡的所有範本、圖片、字型、程式碼與進階功能都能無條件商用。正式專案應以使用當下的官方方案與條款為準。

快速產生色票：Coolors、Adobe Color、Huemint 與 Colormind

1. Coolors：快速生成、鎖色與照片取色

Coolors 適合手上只有一個品牌色的人。先鎖定既有色碼，再讓產生器補出其他顏色；如果已有商品照或品牌照片，也能用 Image Picker 擷取候選色。它另有 Contrast Checker，可先淘汰對比明顯不足的組合。

生成器的速度很快，但不要把第一組五色直接全部放進網站。先選一個背景與一個文字色，再決定主色與少量強調色，介面會比平均使用五個顏色更穩定。

工具：Coolors Generator、Image Picker、Contrast Checker（查證 2026-08-02）

2. Adobe Color：色相環、和諧規則與無障礙檢查

Adobe Color 適合邊看色相環，邊理解類似色、互補色、三角色與單色等關係。你可以指定基準色，套用和諧規則，也能從圖片擷取色彩主題。

它的 Accessibility Tools 可檢查文字與背景對比，也能模擬部分色覺差異下的色票碰撞。這不會代替整頁無障礙測試，但很適合在設計初期先排除難以區分的顏色。

來源：Adobe Color Wheel；Adobe Color Accessibility Tools（查證 2026-08-02）

3. Huemint：依背景、前景與強調色關係生成

Huemint 和只輸出五個色塊的工具不同。它會依網站、品牌、漸層、插圖等版型情境生成顏色，並考慮背景、前景與強調色之間的關係。你也能鎖住喜歡的顏色，再產生其他候選。

Huemint 使用機器學習找候選組合，結果是起點，不是可讀性保證。網站文字仍要用 WCAG 對比公式另行檢查，品牌主色也要回到客群與既有識別判斷。

來源：Huemint About（查證 2026-08-02）

4. Colormind：AI 色票與照片擷取

Colormind 使用深度學習產生配色，也能從照片擷取色票。你可以先鎖定一至兩個顏色，再讓系統補足其餘色彩；照片取色模式的目標是找到能一起使用的顏色，不只統計照片裡出現頻率較高的顏色。

它的生成帶有隨機性，同一張照片重跑可能得到不同結果。把候選色記錄成色碼，再用真實標題、內文、按鈕與表單檢查，會比只看五格色票可靠。

來源：Colormind Generator；Colormind Image Upload（查證 2026-08-02）

找靈感與情境預覽：Color Hunt、Happy Hues、Realtime Colors

5. Color Hunt：從人工整理色票找方向

Color Hunt 適合還沒有任何方向時瀏覽靈感。它把四色配色依熱門、新作與主題整理，看到喜歡的色票可以複製 HEX 色碼，再帶到設計工具測試。

熱門色票只代表視覺偏好，不代表它能讓小字、按鈕邊框與錯誤提示符合對比要求。使用時把它當情緒板，不要當完整網站色彩規格。

來源：Color Hunt 官方網站（查證 2026-08-02）

6. Happy Hues：直接看顏色在頁面中的用途

Happy Hues 的價值不是色票數量，而是把顏色放進實際頁面。選擇不同組合後，可以看到背景、標題、內文、按鈕與插圖如何分配，適合不確定「這個顏色該放哪裡」的新手。

範例頁能幫你理解角色，但你的網站有不同內容長度、圖片與元件。可以借用分配邏輯，不宜整頁照搬版型或視覺資產。

來源：Happy Hues：Curated colors in context（查證 2026-08-02）

7. Realtime Colors：在模擬網站即時換色

Realtime Colors 把顏色分成文字、背景、主色、輔色與強調色，調整後直接反映在完整網站示意頁。它也會顯示部分色對的對比等級，並能輸出 CSS、SCSS、Tailwind CSS 等格式。

這種角色預覽比單看色票更接近實務。輸出程式碼前，仍要先統一角色名稱，避免同一個 primary 在設計稿代表品牌色，在程式裡卻代表主要按鈕背景。

來源：Realtime Colors 官方網站；Exporting 文件（查證 2026-08-02）

從色相環建立規則：Canva Color Wheel 與 Material Theme Builder

8. Canva Color Wheel：用色相環理解常見配色關係

Canva Color Wheel 讓你選一個基準色，再切換互補、單色、類似、三角與四角等配色關係。它適合快速理解顏色在色相環上的距離，不需要先記住全部術語。

色相關係只處理「顏色怎麼搭」的一部分。實際網站還要調整明度與彩度，否則兩個色相不同的顏色仍可能太亮，太接近，無法當文字與背景。

來源：Canva Color Wheel 官方頁（查證 2026-08-02）

9. Material Theme Builder：從核心色建立介面角色

Material Theme Builder 適合做 App、Web App 或介面設計系統。它能從核心色建立 Material 3 色彩主題，預覽淺色與深色介面，並把顏色分給 primary、surface、error 等角色。

一般品牌官網不必照搬 Material 3，但可以學它的角色思維：同一個主色需要搭配可讀的 on-primary 文字色，背景與表面層要有層級，錯誤狀態不能只靠品牌主色臨時替代。

來源：Material Foundation：Material Theme Builder；Google Codelab：Visualizing dynamic color（查證 2026-08-02）

專門檢查對比：WebAIM Contrast Checker

10. WebAIM Contrast Checker：輸入前景與背景色碼

WebAIM Contrast Checker 讓你輸入前景與背景 HEX 色碼，直接查看對比值，以及一般文字與大字的 WCAG AA／AAA 判定。適合確認內文、按鈕文字、連結與提示訊息。

單一色對通過不代表整站通過。按鈕 hover、focus、disabled，表單錯誤，圖表與手機版疊在圖片上的文字都要分開檢查。若背景是漸層或照片，應以對比較弱的區域測試，或加上穩定的純色遮罩。

來源：WebAIM Contrast Checker 官方工具（查證 2026-08-02）

色彩學三要素：色相、明度與彩度

先認識三個調色旋鈕

工具可以快速給答案，但懂三個基本維度，才知道該調哪一個旋鈕。

  • 色相：顏色的類別，例如紅、黃、綠、藍。色相環就是把色相依關係排列。
  • 明度：顏色看起來偏亮或偏暗。文字可讀性與明度差異高度相關，但 WCAG 判定使用相對亮度公式，不是靠肉眼猜。
  • 彩度：顏色看起來鮮豔或灰濁的程度。高彩度適合少量強調，大片高彩度背景可能增加閱讀負擔。

要注意，日常色彩學的彩度、CIE 系統中的 chroma，以及 HSL 的 saturation 並非完全相同的數學量。做網站時可以把 HSL 當直覺調色介面，但精準色彩管理要使用對應色彩空間的定義。

定義來源：CIE International Lighting Vocabulary 的 hue、lightness、chroma；CSS 技術參考：MDN：CSS color values（查證 2026-08-02）

互補色、類似色、三角色與單色怎麼用？

色相關係決定方向，明度決定層級

配色關係色相環位置網站用法主要風險
互補色位在相對兩側主色與少量 CTA 強調兩色都高彩度時容易刺眼
類似色彼此相鄰背景層次、插圖與柔和品牌感明度太近時難以區分
三角色大致等距的三個色相內容分類與較活潑的視覺平均用力會失去主次
單色同一色相的深淺變化穩定品牌頁與資訊介面只變色相飽和度，不改明度時層級不足

配色關係不是把顏色平均分配。先決定一個主角，再讓其他顏色負責背景、層次或少量強調。常見的 60／30／10 可以當起始法，但它不是 WCAG 規範，也不會自動產生文字色、邊框色與狀態色。

RGB、HEX、HSL 與 CMYK：網頁和印刷不要混用

同一品牌要保存螢幕與印刷規格

表示方式主要用途例子重點
RGB螢幕與 CSSrgb(20 104 232)以紅、綠、藍光組合
HEX螢幕與 CSS#1468E8RGB 數值的十六進位寫法
HSLCSS 與直覺調色hsl(216 82% 49%)用色相、飽和度與亮度表示
CMYK印刷製程依印刷檔與色彩描述檔不能假設螢幕色原樣印出

網站通常以 RGB 系統呈現，HEX 只是常見的 RGB 寫法，HSL 則方便用角度與百分比調色。CMYK 面向油墨與印刷流程，可呈現的色域、紙張與印刷條件不同。品牌同時做官網與印刷品時，應保存各自規格，正式印刷依印刷廠的色彩描述檔與打樣確認，不要把網頁 HEX 直接當成印刷保證。

技術參考：MDN：CSS color values；Adobe：Process colors（CMYK）overview（查證 2026-08-02）

網站配色不是五個色碼，而是一組角色

先命名用途，再保存色碼

角色名稱能讓設計稿、WordPress 設定與 CSS 使用同一套語言。若以「藍色 1」「藍色 2」命名，日後品牌換色時很難判斷誰能改；以 text-primary、surface、action-primary 命名，才知道每個色碼的責任。

網站配色 6 步流程：從品牌主色到正式上線

第 1 步：先寫用途，不先挑喜歡的顏色

列出網站要讓誰完成什麼事，以及品牌要避免什麼印象。專業不等於藍色，活潑也不等於高彩度；同一個顏色在不同產業、文化與競爭環境中可能有不同解讀。

第 2 步：決定一個核心色與中性色

如果已有 Logo，從品牌規範取得核心色，不要用截圖吸色當正式數值。接著先建立深色文字、淺色背景與一至兩個表面層級，再補主色。沒有中性色，品牌色很容易被迫承擔多種用途。

第 3 步：用配色網站產生候選，不急著定案

把核心色放進 Coolors、Adobe Color 或 Huemint，產生三至五組候選。每組都記錄色碼與角色，不要只截圖。若從照片取色，先確認照片可合法使用，再選能支持文字與按鈕的顏色。

第 4 步：套進真實內容與元件

用真實的長標題、價格、表格、表單錯誤與文章內文測試。色票在空白畫布上很乾淨，放進繁體中文長文後可能太重；按鈕在桌機顯眼，到了手機版可能佔滿畫面。

第 5 步：逐色對檢查 WCAG 對比

一般文字至少 4.5：1，大字至少 3：1。WCAG 所稱大字，是至少 18 pt 的一般字，或至少 14 pt 的粗體字。辨識控制項與理解內容所需的重要圖形，通常要和相鄰顏色達到 3：1。門檻不能四捨五入，2.999：1 仍不符合 3：1。

Logo 在特定對比條文有例外，不代表任何 Logo 疊在任何背景上都好用。實務上仍應準備淺底、深底與單色版本，避免品牌識別在照片或手機版上消失。

規範來源：W3C：Contrast Minimum；W3C：Non-text Contrast（查證 2026-08-02）

第 6 步：測互動狀態，再寫進設計規格

檢查連結、按鈕與輸入框的預設、hover、focus、active、disabled 與錯誤狀態。成功或錯誤不能只用綠色與紅色區分，還要提供文字、圖示或形狀等線索。通過後把色碼、角色與用途，加上禁用情境寫成規格。

規範來源：W3C：Use of Color（查證 2026-08-02）

顏色心理可以參考，但不能當成固定答案

把感受寫成可驗證的假設

「藍色一定專業」「紅色一定讓人購買」是過度簡化。顏色感受會受文化、語境、產業慣例、明度、彩度、周圍配色與個人經驗影響。同一個深藍與亮藍即使色相接近，也可能產生不同感受。

比較可靠的做法，是先把顏色意圖寫成假設，例如「希望主要按鈕在白底上有清楚辨識」，再以對比與點擊資料，加上訪談與品牌辨識測試。顏色心理提供候選方向，不能代替使用者研究。

研究參考：Jonauskaite 等人以 30 個國家、22 種母語的 4,598 名參與者研究色彩與情緒聯想，發現跨國共同模式，也觀察到語言與地理相關的差異。來源：Psychological Science，2020，doi:10.1177/0956797620948810（查證 2026-08-02）

網站配色常見 7 個錯誤

  • 只看色票好不好看，沒有把顏色分配到具體角色。
  • 五個顏色平均使用，主 CTA 和裝飾元素互相搶焦點。
  • 品牌主色對比不足，卻堅持用它當小字或按鈕文字。
  • 只測白底，不測照片、深色區塊、hover 與 focus。
  • 錯誤只顯示紅色邊框，沒有文字或圖示提示。
  • 把網頁 HEX 直接交給印刷廠，沒有色彩管理與打樣。
  • 複製配色範例時，連同受授權限制的圖片、範本或品牌識別一起照搬。

網站配色上線前檢查表

  • 每個色碼都有文字、背景、主操作等明確角色。
  • 一般文字達 4.5：1，大字與必要非文字元素依規範檢查 3：1。
  • 連結、錯誤、成功與選取狀態沒有只靠色相傳達。
  • 按鈕與表單已測預設、hover、focus、disabled 等狀態。
  • 手機版、深色區塊、照片背景與長篇繁體中文內容都已實測。
  • Logo 有淺底與深底版本，也有必要的單色版本。
  • 網站色與印刷色分開管理，印刷成果已依需求打樣。
  • 使用工具內素材前，已確認圖片、範本、字型與商標條款。

內文精華總結

  • 配色網站要依任務選擇：產生色票、照片取色、情境預覽、介面角色與對比檢查需要不同工具。
  • 色彩學三要素是色相、明度與彩度，但不同色彩模型的數學定義不完全相同。
  • 網站常用 RGB、HEX 與 HSL，印刷 CMYK 應依實際製程與打樣確認。
  • 漂亮色票要轉成文字、背景、主色、輔色、強調色與狀態色，才能成為可維護的系統。
  • WCAG 對比與「不可只靠顏色傳意」是上線門檻，不是完成視覺後才補做的裝飾。

網站視覺延伸閱讀

想把配色、字體與內容做成一致的正式網站？

配色工具能幫你找到方向，正式網站還要一起處理版面、字體、手機版、速度、SEO 與後續維護。秒站提供可直接調整的網站基礎，也能用一鍵換色快速比較不同品牌色在頁面裡的效果。

想確認現有品牌色放進網站後是否清楚？可用 LINE 聯絡 @site-now。

重點整理

哪些配色網站適合新手？

想快速產生色票可從 Coolors 開始，想理解色相環與配色關係可用 Adobe Color 或 Canva Color Wheel，想直接看顏色放進網頁後的效果可用 Happy Hues 或 Realtime Colors。沒有一個工具適合全部任務，先依需求選擇會比較快。

色彩學三要素是什麼？

常見的色彩三要素是色相、明度與彩度。色相描述顏色類別，明度描述明暗，彩度描述鮮豔或灰濁程度。不同色彩模型的數學定義不完全相同，例如 HSL 的 saturation 不宜直接當成所有色彩空間中的 chroma。

如何從照片擷取配色？

可以把照片上傳到 Adobe Color、Coolors Image Picker 或 Colormind Image，再挑出背景、文字、主色與強調色。不要直接使用工具產生的全部顏色，還要檢查文字對比與品牌辨識度，以及照片本身是否有合法使用權。

RGB、HEX、HSL 與 CMYK 有什麼差別？

網頁瀏覽器常用 RGB、HEX 或 HSL 表示螢幕顏色，其中 HEX 本質上是 RGB 的十六進位寫法。CMYK 主要用於印刷流程，螢幕上看到的 RGB 色不一定能在紙張與油墨上完全重現，正式印刷要依印刷廠的色彩描述檔與打樣確認。

網站文字顏色對比要多少？

依 WCAG 2.2 AA，一般文字與背景至少要 4.5：1，大字至少 3：1。大字是至少 18 pt 的一般字，或至少 14 pt 的粗體字。辨識控制項與理解內容所需的重要圖形通常至少 3：1。門檻不能四捨五入，例如 2.999：1 仍不符合 3：1。還要分別檢查預設、hover、focus、錯誤狀態，以及文字疊在照片或漸層上對比較弱的區域。

品牌主色要怎麼選？

先從品牌定位、客群、競爭環境與既有識別找候選色，再測試文字、背景、按鈕、深淺模式與實際內容。顏色心理只能當作假設，不同文化與情境可能有不同解讀。最後要同時看品牌辨識度與可讀性，並用使用者反應判斷，不宜只因為自己喜歡某個顏色就定案。

網站配色一定要遵守 60／30／10 嗎？

不用。60／30／10 是安排主體、輔助與強調色的常見起始法，不是 WCAG 或瀏覽器規格。網站還需要文字色、邊框色、狀態色與互動狀態，實際比例應依內容密度、元件與品牌需求調整。比起追求精確比例，更重要的是主次清楚，文字可讀，主要操作不會和裝飾元素搶焦點。

免費配色工具產生的顏色可以商用嗎？

色碼本身與平台提供的範本、圖片、插圖、字型、程式碼或品牌標誌是不同層次。不要把能免費使用工具直接推論成所有輸出素材都可任意商用；正式專案仍要查看各平台當下條款，以及所用素材與商標的授權。若把照片上傳取色，也要先確認照片本身的使用權與個資風險。

分享此文章：

相關文章