網頁配色神器推薦：21 個配色工具網站，一秒提升設計質感

要選出真正好用的配色網站，關鍵在於它能不能解你手上那個具體問題，配色庫有多大反而不重要。找靈感看 Color Hunt、從主色延伸用 Coolors、要可直接貼上的 CSS 用 WebGradients、檢查文字背景對比用 Duo，這篇把 21 款工具依用途分成五大類逐一對應，其中 WebGradients 收錄 180 組漸層並提供 Copy CSS（以官網現況為準），比起一字排開再逐一試玩，省下的是九成的摸索時間。

重點先看：21 款配色工具的核心功能幾乎都免費、免下載、線上直接用，只有 Eggradients 少數特殊配色與 Dopely 的收藏功能需要登入或付費；而真正決定網頁質感的是文字與背景對比度，WCAG 2.1 規定一般文字至少 4.5:1（依 W3C WCAG 2.1 標準）。

配色工具怎麼挑：先搞清楚你要解決哪個問題

這麼多配色網站擺在一起，多數人會本能地比功能多寡、比配色庫大小，這其實走錯第一步。挑配色工具真正該做的，是先問自己現在卡在哪一關：是完全沒想法需要看現成配色、已經有品牌主色要延伸、需要漸層背景的 CSS 代碼、擔心文字在手機上看不清楚，還是想從一張照片直接抓顏色。把需求對應到工具類型，比逐一試玩 21 個網站快得多。

我在幫幾個接案者看網站配色時發現，最常見的浪費出在用錯類型，工具夠不夠強多半不是重點。有人拿著 Coolors 拚命按空白鍵隨機配色，但其實他只要一組現成的春節配色，這種需求用 Color Hunt 搜尋「Christmas」兩秒就解決。也有人做完一組漂亮的低對比配色直接上線，結果客戶在陽光下的手機上看不見按鈕文字，這時才回頭找對比檢查器。說到底，配色難，難在它是一條從靈感、延伸、產出到驗證的鏈路，包含多個動作。

挑選時只要盯著三個判斷標準：能不能一鍵複製色碼、能不能鎖定某個色塊再延伸、能不能直接輸出 CSS 或圖檔。這三件事決定了工具在你工作流程裡的位置。新手最常把「配色漂亮」當成唯一標準，卻忽略可讀性，這也是為什麼對比檢查器會被單獨歸成一類，而不是掛在其他工具底下。如果你想先補一輪色彩觀念，可以搭配企業識別系統 CIS 設計流程或色相環配色完全手冊一起看，選色判斷力會提升一個檔次。

這張表把 21 款工具按五大用途分類，方便你直接對號入座，省得從第一款一路滑到最後一款。

用途分類	代表工具	核心價值	輸出形式
靈感瀏覽	Color Hunt、ColorDrop、BrandColors、Nippon Colors	看現成配色，速度快、可一鍵複製	HEX 色碼、ASE／CSS／SCSS
主色延伸	Coolors、Adobe Color、ColorSpace、Dopely Colors、HTML Color Codes	鎖定一個顏色，系統性延伸整組	HEX、CSS 代碼
漸層產生	WebGradients、CSS Gradient、Mesh、ColorKit、Eggradients	線性、放射、不規則漸層	background-image CSS、PNG、SVG
對比檢查	Duo、OddContrast、Adobe Color 對比檢查器	驗證文字背景可讀性，符合 WCAG	對比比值、Pass／Fail
AI 與照片吸色	ColPat、Palette Maker、Alphredo	從照片或 AI 生成配色，即時預覽	配色組合、CSS、HSLA

數量上 H1 寫的 21 款，與正文逐一對應，不會多一款或少一款。表格只是導覽，每一類的細節與優缺點會在後面各節展開。想直接看完整工作流程的人，可以先把網頁設計配色實戰指南讀過一次，再回頭挑工具會更有方向。

靈感型配色網站：打開就有現成配色可抄

完全沒有配色想法時，最有效率的做法是直接看別人配好的成品，自己從零開始調反而最慢。這類工具的價值在於瀏覽速度與一鍵複製色碼，給你的是靈感，給不了完整系統，所以通常要再搭配一款主色延伸工具才能把配色用得完整。Color Hunt 每天更新、能依顏色名稱或情緒搜尋；ColorDrop 首頁就給大量四色組合；BrandColors 收錄超過 600 個國際品牌的標準色（依 BrandColors 官網資料），想做出大廠質感直接參考最準。

Color Hunt 是由品牌與 Logo 設計師架設的配色網站，每天都會更新不同配色，可以透過顏色名稱（Red、Blue）或心情情緒（Warm、Cold）搜尋，做節慶素材時直接搜 Christmas、Halloween 也能找到對味配色。找到喜歡的，點色塊就一鍵複製 HEX，旁邊的 RGB 也能複製，還有年度、月度熱門分類可看時下流行。對於在做必收藏的網頁設計靈感網站功課的人，這款幾乎是必備書籤。它的缺點很明確：只給四色配色，不會幫你延伸第五第六色。

ColorDrop 的操作比 Color Hunt 更直覺，首頁直接排出四色配色，點色塊複製色碼、點愛心收藏，還附漸層配色與上傳圖片吸色功能。趕時間的接案者我會推這款，因為它連選單都省了。如果你正在找優質設計參考網站推薦，ColorDrop 適合放進日常輪換清單裡；做完配色想直接套進網站，也能接著用免費 Logo 設計工具推薦把品牌視覺一次補齊。

BrandColors 走的是完全不同的路線，它不配新配色，而是把世界各大品牌的標準色整理成資料庫，目前收錄超過 600 個品牌（依 BrandColors 官網資料），包含 Adidas、IKEA、Google、Pinterest。品牌名稱由 A 到 Z 排列，可搜尋可瀏覽，點色塊複製色碼，也能勾選多個品牌一次打包下載 ASE、CSS、SCSS 檔。想做出大廠質感、或正在研究品牌色彩挑選與色彩心理學的人，直接從這裡抄最準。老實說，這款唯一的問題是更新頻率不高，新品牌進來得比較慢。

Nippon Colors 提供約 250 種日本傳統色（依 Nippon Colors 官網資料），點顏色整個網站背景會跟著變，同時顯示 CMYK、RGB、HEX，還附漢字名稱。它適合復古或日系風格的設計，網站本身也是一件作品。缺點是沒有一鍵複製，得手動選取色碼，用起來比較卡。這類純靈感工具的共同問題是「給靈感不給系統」，定案前要再配上 Coolors 或 Adobe Color 才完整。

• Color Hunt：每日更新、可依節慶或情緒搜尋、一鍵複製 HEX，缺點是只有四色
• ColorDrop：首頁即四色配色，操作最直覺，適合趕時間的接案者
• BrandColors：超過 600 個品牌標準色，可打包 ASE、CSS、SCSS，缺點是更新慢
• Nippon Colors：約 250 種日本傳統色，適合復古日系，缺點是無一鍵複製

如果你連靈感都還沒成形，也可以先翻翻商用免費圖庫網站總整理，從一張喜歡的照片回推配色，會比盯著空白色塊更快有方向。

主色延伸型配色工具

已經有品牌主色的人，要找的是能「鎖定某個色塊、再依規則或隨機生成其他顏色」的工具，普通的隨機配色庫派不上用場。Coolors 按空白鍵就換一組、可鎖色；Adobe Color 用色輪與色彩調和規則從主色推導；ColorSpace 輸入一個 HEX 就給多組搭配。鎖定功能是這一類的核心，少了它，你就只能靠運氣反覆重整，配色永遠湊不齊。

Coolors 是新手最常用的一款，開啟就先配好五個色塊，按空白鍵隨機換一組，看到滿意的色塊就鎖定，再按空白只換其他色塊。它支援一鍵複製色碼，想要更多色塊也能點加號擴充。對自架網站的人來說，這款幾乎是網頁設計必備的關鍵元素裡的第一步工具。我會建議先用 Coolors 把主色鎖死，再讓它去配次要色，這樣比一次隨機五色更容易收斂。

Adobe Color 走的是系統化路線，以色輪搭配色彩調和規則（類比、互補、三等分等），移動其中一個圓圈，其他圓圈就會依規則自動調整。它的強項在於從單一主色推導出和諧配色，靠的是系統化的色彩調和規則，憑感覺亂試的成分很低。如果你對色彩調和規則還不熟，可以先讀色彩學完整指南對比色互補色，再回來用 Adobe Color 會更知道自己在選什麼。Adobe Color 還附顏色對比檢查器與上傳照片吸色，是少數一款工具涵蓋多個用途的選擇。

ColorSpace 的操作更暴力一點：首頁輸入一個主要顏色（例如紫色 #845EC2），按 Generate，下面就跳出多組適合的配色與漸層，還能直接產出 CSS Code。對「我只確定主色，其他交給工具」的人來說，這款最省事。Dopely Colors 功能更完整，能鎖色重新生成、登入後可愛心收藏，還有 Color Converter 可把 HEX 轉成 RGB、CMYK 甚至 PANTONE 色號，轉換需求多的人會很愛它。不過 Dopely 的收藏與愛心功能需要登入帳號才能用，這點要先知道。

HTML Color Codes 一次給六個色塊，支援 HEX、RGB、HSL、CMYK 多格式複製，也能鎖定色塊再調整，額外附互補色、三原色等色彩學介紹。它比較像一把瑞士刀，功能多但不專精。對於正在規劃經典品牌 Logo 設計案例分析或網站 Logo 設計與配色實戰的人，這幾款主色延伸工具都值得一試。

• 新手最常用的是 Coolors，按空白鍵隨機、可鎖色、一鍵複製色碼。
• 要走系統化路線選 Adobe Color，用色輪與色彩調和規則從主色推導，另附對比檢查與照片吸色。
• 只確定主色的人適合 ColorSpace，輸入一個 HEX 就生成多組搭配並附 CSS 代碼。
• Dopely Colors 能鎖色重新生成、登入後可收藏，Color Converter 還能把 HEX 轉成 PANTONE 色號。
• HTML Color Codes 一次給六個色塊、支援多格式複製，並附互補色與三原色介紹。

漸層配色產生器：直接拿到能貼的 CSS

做網頁背景漸層時，重點在於工具能不能直接輸出 background-image 的 CSS 代碼，漸層本身漂不漂亮多半不是重點。WebGradients 收錄 180 組漸層並提供 Copy CSS（以官網現況為準）；CSS Gradient 可調線性或放射漸層、360 度角度，最下方直接給 CSS 代碼；Mesh 做四色不規則漸層、可下載 PNG 當背景圖。要 CSS 選前兩者，要圖檔選後者，這個分流能幫你少走冤枉路。

WebGradients 用圓形色塊展示漸層，點圓形全螢幕預覽，旁邊的 Copy CSS 直接複製 background-image 代碼，也能下載 PNG，還順手做了 Sketch、Photoshop、Figma 版本。它的小彩蛋是複製代碼時每個漸層會跑出不同 Icon，操作體驗很好。對在做Figma 中文完整 UIUX 教學專案的人，這款可以當漸層素材庫。

CSS Gradient 是需要精細控制時的首選，Linear 與 Radial 兩種漸層類型可切換，線性還能調 360 度角度與漸層位置，新增漸層色也直覺。完成後最下方直接給 CSS background 代碼，點 Copy to Clipboard 就能貼進網站。比起 WebGradients 的現成庫，這款更適合「我心裡已經有大概樣子，只是要把它做出來」的需求。如果你同時在處理Bento Grid 網頁排版設計或網頁版面設計與響應式排版，CSS Gradient 能讓區塊背景的漸層細節更可控。

Mesh 走的是另一條路：四色不規則漸層，可調角度與範圍、新增黑點增加變化，完成後 Export 下載 PNG 當滿版背景。它不給 CSS，給的是圖檔，適合需要複雜漸層質感、又不打算用 CSS 實作的人。ColorKit 則專注在色階，雙色漸層可顯示最多 18 個色階、單色最多 9 個色階（以官網現況為準），適合需要細緻過渡的設計。Eggradients 把漸層命名得很戲劇化（征服火星、免費 Spotify），可複製單色或漸層 CSS，也能下載 SVG、JPG、PNG，只有少數特殊配色需要付費解鎖。

要特別注意的是，漸層背景雖然好看，但它對網頁載入速度有影響，滿版 PNG 更是吃流量。上線前記得用圖片壓縮工具讓網站飛快載入處理過，或直接用 CSS 漸層取代圖檔。配色與排版是一體的，漸層背景選定後，文字層的對比與可讀性才是真正的考驗，若想再往 UI 細節走，可參考UI 原型設計與工具推薦與Figma 網格系統響應式排版。

• 要現成庫，WebGradients 收錄 180 組漸層並附 Copy CSS，另有 Sketch、Photoshop、Figma 版本。
• 要精細控制，CSS Gradient 能切線性或放射、調角度位置，最下方直接給整段 CSS 代碼。
• 要圖檔不要 CSS，Mesh 做四色不規則漸層、可調角度範圍並匯出 PNG，適合滿版背景。
• 要細緻過渡，ColorKit 的雙色漸層可顯示最多 18 個色階。
• 要戲劇化命名又想下載圖檔，Eggradients 可複製 CSS、下載 SVG、JPG、PNG，僅少數特殊配色需付費。

配色對比檢查器

這是整份清單裡最被低估的一類。多數配色懶人包把工具全當「產生器」並列，但真正決定網頁質感的是配色可讀性，配色數量多寡其實不太重要。一組漂亮的低對比配色，在手機陽光下根本看不清楚字。行動裝置已經佔全球網站流量的過半比例（2026 年第一季約 52.27%，行動裝置不含平板）[來源：〈Statista — Share of mobile web traffic worldwide quarterly 2015-2026〉〈https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/〉〈2026-04-28〉]，這表示你做對比檢查時要假設讀者多半是在手機上、在通勤的強光下看你的網站，而不是坐在桌面螢幕前。決定可讀性的是文字與背景的對比度，建議在配色定案後用 Duo、OddContrast 或 Adobe Color 的對比檢查器跑一次，這一步只花三十秒，卻能避免整個網站看不清字。

Duo 的設計極簡，一個色塊裡只放一個數字，展示背景與文字顏色的搭配。目前提供 102 組配色（以官網現況為準），點上方的 Toggle only AA Accessible Combinations，就能一鍵篩選出符合 WCAG AA 標準的組合。大量文字排版的首選就是它，因為它直接幫你過濾掉看不清的搭配。對寫排版設計與字體行距技巧、挑精選英文字體推薦下載或經營部落格的人，這款應該放進定案前的必跑清單。

OddContrast 走即時檢查路線，選好前景與背景色，右方工具列立刻顯示對比比值，並分別標示一般文字與大文字是否 Pass。1:1 代表兩色完全相同、數字越高越易讀，下方同時給 HEX、RGB、HSL 色碼可自由切換。它的價值在於讓你「看到數字才決定」，省得憑感覺賭一把。Adobe Color 的顏色對比檢查器也是同樣邏輯，檢查文字背景對比是否足夠，差別在於它整合在 Adobe Color 這個更大的工具裡。

這裡要把標準講清楚，否則檢查器上的數字會讓人霧裡看花。WCAG 2.1 規定，一般文字的對比度至少要 4.5:1，大文字（約 18pt 或 14pt 粗體以上）至少 3:1（依 W3C WCAG 2.1 標準）。低於這個門檻，就算配色再美觀，在光線不足或螢幕偏暗的環境下也會變成讀不到的裝飾。把這個數字記下來，你就能自己判斷哪組配色危險。想深入理解色彩如何在螢幕上呈現，可以參考RGB 與 CMYK 色彩模式解析。

標準還有一個更嚴格的層級容易被人略過。WCAG 把可及性分成 AA 與 AAA 兩級，前述的 4.5:1 與 3:1 是 AA 級門檻，AAA 級則把一般文字拉高到 7:1、大文字拉高到 4.5:1。多數商業網站以 AA 為目標就足夠，但若你做的是金融、醫療、政府這類對可及性要求更高的服務，或服務對象包含年長者與視力受限者，直接朝 AAA 級靠攏會更安全。對比檢查器通常會同時顯示兩級的 Pass 與 Fail，看數字時要記得自己要過的是哪一級，才不會被一堆綠色勾勾誤判為安全。

判斷一組配色危不危險，有三個常見的高風險組合可以直接記下來。第一是淺灰文字配白底，視覺上乾淨卻最容易在螢幕變暗時消失；第二是品牌主色配白字，當主色偏黃或偏綠時對比往往只有 2 到 3 之間，看起來鮮豔卻讀不動；第三是漸層背景上疊純色文字，因為背景明暗會變化，文字在某些段落會突然沉下去。遇到這三種情況，先用 OddContrast 量一下實際比值，再把文字加深或加粗、或換成深色背景配淺色字，問題多半能當場解決。把這套快測流程固定下來，比每次都靠肉眼判斷穩定得多。

工具	主要功能	適合場景	輸出
Duo	102 組文字背景配色，可篩選 AA 級	大量文字排版、部落格	HEX 色碼
OddContrast	即時顯示對比比值與 Pass／Fail	定案前逐組驗證	對比比值、HEX／RGB／HSL
Adobe Color 對比檢查器	檢查文字背景對比是否足夠	已在用 Adobe Color 配色	對比比值

完整的工作流程應該是：產生器找配色、對比檢查器驗證、才定案上線。很多自架網站的自架網站常見網頁設計地雷，根源都是少了驗證這一步。配色漂亮但讀不到字，等於沒配色。

AI 與照片吸色：讓圖片幫你決定配色

如果你手上已經有一張想當視覺主軸的照片，直接讓圖片幫你決定顏色，會比憑空配色更有效率。ColPat 與 Palette Maker 具備 AI 配色，可上傳照片自動吸取顏色並生成配色組合；Adobe Color 也支援上傳照片吸取配色與漸層。這類工具的價值在於配色與你的視覺素材天生協調，因為顏色本來就是從那張圖裡抓出來的。

ColPat 一次產出五個顏色，並幫你區分主色、次色，附 CSS 代碼可複製，也能上傳圖片讓 AI 吸色生成配色。它的 What Color Says 頁面介紹各顏色帶給人的感覺（例如黃色給人溫暖、正面、充滿力量），讓你依想呈現的印象選色，這部分與色彩心理學設計攻略與案例的概念相通。對想用 AI 加速流程的人，它與AI 繪圖與 ChatGPT 網頁設計實戰是互補關係，一個管色彩、一個管版面。

Palette Maker 的強項在即時預覽：配色能立刻套用到插畫、Logo、網頁、App 等多種設計樣式上，而且預覽畫面做得像專業設計師的作品集，找配色的過程同時在收集設計靈感。它由專業設計師打造，官方承諾核心功能永遠免費。對做給品牌網站的關鍵建議或處理Landing Page 銷售頁製作教學的人，這種所見即所得的預覽能大幅縮短決策時間，搭配Figma 必裝外掛推薦更能把配色直接拉進設計稿。

Alphredo 是這一類裡比較特殊的存在，它專做半透明配色：輸入 HEX 自動轉 HSLA，可調透明度，並切換白色、黑色或自訂背景預覽同一顏色不同透明度的效果。需要做疊加圖層、玻璃擬態效果的人會很需要它。對在學Figma 毛玻璃霧面質感效果的人，Alphredo 能幫你把透明度調到位再貼進 Figma。ColorDrop 也支援上傳圖片吸色，是這一類裡最輕量的選擇。

• ColPat：AI 推薦配色、可上傳照片吸色，附 What Color Says 顏色心理學與 CSS 代碼
• Palette Maker：AI 配色並即時預覽套用在插畫、Logo、網頁、App
• Adobe Color：上傳照片吸取配色、也可吸取照片產出漸層
• Alphredo：半透明配色工具，HEX 轉 HSLA，可調透明度與切換背景
• ColorDrop：支援上傳圖片吸色，輕量版照片取色選擇

找配色順便學色彩觀念

不想只靠工具盲選的人，可以挑會在工具裡內建色彩學說明的網站，讓找配色的過程等於免費上色彩課。Happy Hues 切換配色時同時介紹色相、色調、飽和度與色彩心理學；HTML Color Codes 附互補色、三原色觀念與色階適用場合；Palette Maker 的 Color Theory 頁面有詳細的色彩學理論與顏色歷史。用這幾款，每次配色都在累積判斷力。

Happy Hues 的玩法是：點選配色，整個網站的配色樣式跟著切換，每個區塊下方標示背景用什麼顏色、標題用什麼顏色，附色碼可一鍵複製。一邊切換配色預覽，一邊讀色相、色調、飽和度與色彩三原色的介紹，等於在真實網站上看配色效果，同時學觀念。對剛入門、想一次搞懂中文字體設計與字體推薦之外的色彩環節的人，這款最友善。

HTML Color Codes 的色彩學區塊講互補色、三原色，以及各種色調、色階適合的使用場合，讓你在挑色碼的同時知道為什麼這樣挑。Palette Maker 的 Color Theory 頁面收錄更完整的色彩學理論、各顏色的歷史，還提供免費 Patterns 下載。ColPat 的 What Color Says 則從顏色心理學切入，介紹各顏色帶給人的感受。把這幾款搭配Logo 標準字設計技巧與CTA 行動呼籲按鈕設計指南一起讀，配色判斷力會從憑感覺升級成有根據。

• Happy Hues：切換網站配色預覽，同時教色相、色調、飽和度與色彩心理學
• HTML Color Codes：附互補色、三原色介紹與各色調色階適用場合
• Palette Maker：Color Theory 頁面收錄色彩學理論、顏色歷史與免費 Patterns 下載
• ColPat 的 What Color Says：介紹各顏色帶給人的感覺，依想呈現的印象選色

把 21 款工具串成工作流程

分類看完了，真正在用的時候，工具之間是接力關係，要串著用，不必也不可能只挑一款。一個完整且能上線的網頁配色流程，大致會經過四個階段：先找靈感、再延伸主色、產出 CSS 或圖檔、最後驗證對比。每一階段用對工具，比一開始就挑「最強那一款」更有感。

換個角度想，配色工具的選擇其實反映你對專案成熟度的判斷。還在發想階段，靈感型工具的隨機性是資產；進到品牌定調階段，主色延伸工具的可控性才派得上用場；要交付給工程師時，能輸出 CSS 的工具才省得到手動換算色碼；而上線前的對比檢查，是唯一不能省的品管動作。很多人卡在第一階段不肯前進，反覆用 Color Hunt 刷新頁面，其實是還沒決定主色，這時該做的是鎖一個顏色進 Coolors，繼續瀏覽只是白耗時間。

階段	目標	推薦工具	輸出
1 找靈感	看現成配色、決定方向	Color Hunt、ColorDrop、BrandColors	HEX 色碼
2 延伸主色	鎖主色配出整組	Coolors、Adobe Color、ColorSpace	完整配色組合
3 產出	拿到能貼的 CSS 或圖檔	WebGradients、CSS Gradient、Mesh	CSS 代碼、PNG
4 驗證	確認文字背景可讀	Duo、OddContrast、Adobe Color 對比檢查器	對比比值、Pass／Fail

把這四階段記住，你就不會再把 21 款工具當成並列的選項，而是清楚知道每一款在你工作流程裡的位置。要進一步把配色落實到整個網站，可以接著讀網頁設計從零到一完整指南與網頁排版設計範例與靈感，把色彩、版面一次串起來。想知道當下流行的視覺走向，也能參考最新網頁設計趨勢風格解析，避免配色做出來卻跟不上時代。

如果你是自架網站的新手，配色之外還要處理主機、網域、WordPress 架設，可以先把WordPress 架站新手教學與如何架設網站完整自學指南看過，等網站骨架起來，再把這篇的配色工具套進去，順序會順很多。對想用現成版型加速的人，Canva 新手必學設計技巧也能補上素材缺口。

進到細節階段，Figma 圖示外掛免費 Icon 匯入能幫你在設計稿裡快速貼上對應圖示，免費 Icon 圖示網站推薦則補上圖示來源，設計師素材管理工具評測讓你把配色、圖示、字體整理成一個可重複取用的素材庫。配色做到後期，素材管理比配色本身更影響產出效率。

至於網址這關，選好名稱後可對照網域申請購買與 DNS 設定把基礎一次到位，避免配色都做好了卻卡在沒有正式網域。配色與內容一樣，都是長期累積的資產，搭配免費 UIUX 自學資源地圖與網頁設計自學路線圖，能讓整體功力同步推進。

從配色組合到配色系統：角色分工與比例

工具能幫你產出一組顏色，卻不會告訴你這組顏色在畫面上各自該佔多少面積、誰當主角誰當配角。真正把配色用到位的設計師，在拿到色碼之後還會做一件事：為每個顏色指派角色，並控制它們出現的比例。這一步是把「配色」升級成「配色系統」的關鍵，也是業餘與專業最容易拉開差距的地方。

業界流傳最久的比例原則是 60-30-10：主色約佔畫面 60%、次色約佔 30%、強調色約佔 10%。換到網頁上，60 通常是背景（白、淺灰或品牌底色），30 是主要區塊與導覽列的色調，10 則是按鈕、連結、CTA 這類需要被點擊的元素。這個比例之所以有效，是因為它讓畫面有一個明確的視覺重心，同時保留一個吸引目光的焦點。把 WebGradients 的漸層當背景時，它多半落在 60 那一格，這時按鈕就要用對比夠強的強調色，才不會被背景吃掉。

比比例更根本的是角色分工。一組完整的網頁配色通常包含四到五種角色：背景色、表面色（卡片、區塊底色）、文字主色、文字次色（次要說明、placeholder）、以及強調色（按鈕、連結、選中狀態）。Coolors 一次給你五個色塊，正好可以一對一套進這五個角色；Adobe Color 用色彩調和規則推導出來的組合，也建議手動再標註哪個是背景、哪個是強調，因為工具預設不會幫你分。很多看起來「配色對卻怪」的網站，問題都出在角色指派錯誤，例如把應該當強調色的鮮橘拿去當背景，或把低對比的淺灰拿來當按鈕底。

色彩角色	建議比例	常見用途	對應工具產出
背景色	約 60%	整體底色、留白	WebGradients 漸層、Coolors 第一格
表面色	約 15%	卡片、區塊、側欄底色	主色延伸工具的淺色變體
文字主色	—	標題、內文	需通過 WCAG AA 對比檢查
文字次色	—	次要說明、標籤	主色的降飽和或加灰版本
強調色	約 10%	按鈕、連結、CTA	Adobe Color 互補色、ColPat 主色

把角色和比例固定下來之後，後續的好處會慢慢浮現。新增頁面時不用重新配色，只要套用同一套角色對應；多人協作時，設計師與工程師對「次要按鈕用哪個色」有一致的答案；長期維護時，品牌改版只需要替換強調色或背景色，整個網站的視覺調性會跟著一致地改變。這也是為什麼成熟的品牌網站會把配色寫成 design token 或 CSS 變數，而不是散落在各頁面的 hardcode 色碼。想往這個方向走的人，可以搭配企業識別系統 CIS 設計流程把色彩規範正式化，再用UI 原型設計與工具推薦把 token 落實到設計稿。

什麼情況不要用配色工具

工具清單看多了，容易養成「每個專案都先開 Coolors」的習慣，但有些情境硬上工具反而拖慢進度。把這幾種情況記下來，可以幫你判斷什麼時候該跳過工具、直接動手。

• 品牌已有嚴格的視覺規範：當對方提供完整的 brand guideline，裡面寫死主色、輔色、按鈕色與可用範圍，這時再跑 Adobe Color 或 ColorSpace 反而會生出規範外的顏色，造成不一致。直接沿用規範的色碼才是對的。
• 單頁活動、只用一兩個顏色：做一張全版促銷 banner 或單頁 landing page，往往一個主色配一個強調色就夠，打開完整配色工具反而是過度準備，直接挑色更快。
• 時程極短、當下已有明確參考：手上已經有一個明確要模仿的網站或客戶指定稿，直接用吸色工具抓那個網站的色碼，比重新產生配色更貼近需求。
• 需要極精確的印刷色：網頁工具的 HEX 與 RGB 屬於螢幕色域，轉到印刷用的 CMYK 或 PANTONE 會有色差。要印實體文宣時，應該以印刷色票為準，配色工具只能當螢幕預覽的參考。

判斷的通則很單純：當需求已經被規範、參考或媒材限制住時，工具的隨機與延伸能力反而是負擔；只有在「方向未定、需要探索」的階段，配色工具的價值才會最大化。懂得跳過工具，和懂得用對工具一樣重要。

進階技巧與常見疑難排解

熟悉基本操作之後，有幾個進階用法能讓配色工具的產出更貼合實際專案，也能避開幾個反覆出現的疑難狀況。

• 用鎖色功能收斂而非擴充：在 Coolors 裡先鎖定品牌主色與一個輔色，只讓剩下三格變動，收斂速度會比不斷按空白隨機五色快很多。鎖得越多，越接近你要的方向。
• 先決定強調色再回推背景：強調色通常是品牌最鮮明的顏色，先確定它，再讓 Adobe Color 用互補或三等分規則推導出能襯托它的背景與文字色，整體會更協調。
• 漸層用 CSS 而非 PNG：能用 CSS 漸層解決的背景就不要匯出 PNG。CSS 漸層是向量描述，不隨解析度放大失真，也不佔額外請求流量，對行動裝置載入速度更友善。
• 對比檢查要連漸層背景一起測：漸層背景上的文字，明暗會隨位置變動，記得在漸層最亮與最暗的兩個極端點各量一次對比，取較低的那個值當依據。
• 深淺色模式分開存兩組：同時要支援淺色與深色模式的網站，不要只用一組配色反轉，深色模式的背景與文字對比邏輯不同，建議用 Coolors 或 Adobe Color 另外產一組專用的深色配色。

幾個最常卡的疑難也值得先記下來。Color Hunt 找不到你要的配色時，換顏色名稱或情緒關鍵字往往比換工具有效，例如把「Blue」換成「Navy」或「Cold」會得到完全不同的結果。Coolors 鎖色後還是不滿意，多半是因為你鎖的兩個顏色本身衝突，這時該調的是鎖定的顏色，而不是繼續隨機剩下的格子。WebGradients 的 Copy CSS 貼上後顏色不如預覽鮮豔，通常是你的容器有其他背景色疊加上去，加一層不透明背景或檢查父層樣式就能還原。把這些解法備在心裡，能省下不少試錯時間。搭配網頁設計配色實戰指南一起看，這些技巧會更有脈絡。

常見問題：配色工具的免費、選擇與學習

挑配色工具時最常被問到的三件事：要不要錢、做部落格選哪個、想學色彩又該選哪個。這裡把答案逐一釐清，並補上幾個在 PTT、Dcard 設計板常出現的疑問。

配色網站都是免費的嗎？

這 21 款工具的核心功能幾乎都免費、免下載、線上直接用。只有 Eggradients 的少數特殊配色需要付費解鎖，Dopely Colors 的愛心與收藏功能需要登入帳號。其餘如 Coolors、Color Hunt、WebGradients、CSS Gradient、Duo、OddContrast 的主要功能都不收費。

做部落格網頁設計，推薦哪些配色工具？

做部落格首選 Coolors，按空白鍵快速隨機配色又能鎖色，新手最順手；配色定案後務必用 Duo 或 OddContrast 跑一次對比檢查，確保內文在白底黑字之外的主題色上仍清楚易讀。找靈感階段可搭配 Color Hunt。這三款組合足以撐起一個專業部落格的色彩計畫。

想邊找配色邊學色彩知識，推薦哪些網站？

想學色彩觀念，選 Happy Hues、HTML Color Codes 與 Palette Maker。Happy Hues 在切換配色預覽時教色相、色調、飽和度；HTML Color Codes 附互補色與三原色介紹；Palette Maker 的 Color Theory 頁面有完整的色彩學理論與顏色歷史。ColPat 的 What Color Says 則從顏色心理學切入。

哪個配色工具最適合做網頁設計？

做網頁設計建議組合使用：Coolors 或 Adobe Color 負責產生整組配色，WebGradients 或 CSS Gradient 負責漸層背景的 CSS 代碼，Duo 或 OddContrast 負責定案前的對比驗證。沒有單一一款能從頭包到尾，分工才有效率。

配色網站產生的配色可以直接用在網頁嗎？

可以，多數工具都提供 HEX 色碼或 CSS 代碼可直接複製貼上。WebGradients、CSS Gradient、ColorSpace、ColPat 甚至直接輸出 background-image 或整段 CSS。要特別注意的是，配色貼上網頁前，仍要用對比檢查器驗證文字可讀性，否則漂亮的配色可能造成讀不到字的問題。

漸層配色的 CSS 代碼要去哪裡找？

WebGradients 提供 Copy CSS 按鈕，直接複製 background-image 代碼；CSS Gradient 可調整線性或放射、角度與位置後，最下方給整段 CSS background 代碼；ColorSpace 附雙色與三色漸層 CSS；Eggradients 可複製漸層 CSS 也能下載圖檔。要 CSS 代碼選前三者，要圖檔選 Eggradients 或 Mesh。

有沒有可以從照片提取配色的工具？

有。ColPat 與 Palette Maker 支援上傳照片讓 AI 吸色並生成配色，Adobe Color 也能上傳照片吸取配色或漸層，ColorDrop 則提供輕量版的圖片吸色功能。從照片取色的好處是配色會與視覺素材天生協調。

如何檢查文字和背景的配色對比度夠不夠？

用 Duo、OddContrast 或 Adobe Color 的對比檢查器。WCAG 2.1 標準為一般文字對比至少 4.5:1、大文字至少 3:1（依 W3C WCAG 2.1 標準）。OddContrast 會即時顯示比值並標示一般文字與大文字是否通過，Duo 可一鍵篩選符合 AA 標準的組合。配色定案後務必跑一次再上線。

一組配色裡每個顏色該佔多少比例？

最常用的原則是 60-30-10：主色約佔畫面 60%（通常是背景）、次色約 30%（主要區塊與導覽）、強調色約 10%（按鈕與 CTA）。把工具產出的色碼手動指派成背景、表面、文字、強調等角色，再依這個比例分配，配色才會從「一組顏色」變成可重複套用的配色系統。

做深色模式時，配色可以直接反轉嗎？

不建議直接反轉。深色模式的背景與文字對比邏輯與淺色模式不同，直接反轉常導致飽和度過高、眼睛刺眼或對比不足。比較穩妥的做法是用 Coolors 或 Adobe Color 另外產一組專用的深色配色，降低強調色的飽和度，並重新用對比檢查器驗證一次，確保深色模式下文字依然清楚易讀。

回到一開始的問題：選配色工具的第一步是搞清楚自己卡在哪一關，找靈感用 Color Hunt、從主色延伸用 Coolors、要 CSS 用 WebGradients、驗對比用 Duo。這篇的 21 款工具已經分到五大類，照用途挑就不必逐一試玩。真正常被略過的是最後的對比檢查，一組好看的配色如果在手機陽光下讀不到字，前面花的功夫都白費，把 Duo 或 OddContrast 排進定案流程，是這份工具清單裡投資報酬率最高的一步。