12個配色網站推薦與操作教學

色盤工具幫你訂定品牌主視覺

---

內容最後更新時間：2022-07-10

前言：配色對部落格的重要性

顏色對於設計基礎有著莫大的影響，我們現在現實生活中看到的、網路上看到的，通通都是經過人家精心設計過後才呈現到你眼前的。

那顏色跟部落格又有什麼關係？這兩者之間的關係我相信遠比你想像的還要來的密切，一個網站的整體視覺會影響使用者的第一印象跟體驗。

在進入一個網站時，最先看到的一定是它的網頁設計，而一個頁面最容易被大腦記住的不是版型好不好看，也不是設計美不美，而是顏色的辨識度。

根據色彩心理學，顏色甚至會影響讀者對於眼前事物的判斷跟心情，因此，顏色挑的好，對於我們部落格網站的設計上，是有一定的重要性的。

而通常我們撰寫文章的時候，會需要嵌入一些圖片，這些圖片除了可能需要去背與壓縮外，在顏色上也會需要盡量與網站的主視覺配色有關，才能有和諧的一致性。

這篇就要來分享 12 個我覺得最簡單、最好用的配色網站以及線上調色盤工具。其中包含了無腦幫你隨機配色、色票選擇、自由配色等等的功能，對於設計白癡來說可說是救星。

12個配色網站推薦

以下整理了五款我認為最適合部落格經營者的配色網站推薦名單，並把我實測過後每一款的所有優缺點全部列出來，幫助你找到最適合的工具。

名稱	優點	缺點	門檻
Coolors	1. 功能齊全實用性高 2. 操作直覺容易上手 3. 有支援行動版 APP	1. 輸出圖片有 LOGO 2. 沒有提供中文介面 3. 部分功能需要付費	低
Palettable	1. 操作簡單不須技巧 2. 顏色多樣驚喜十足	1. 沒有更多選色功能 2. 沒有提供中文介面	低
Hello Color	1. 功能極簡操作簡易 2. 無腦快速選擇顏色	1. 功能較缺乏多樣性 2. 沒有提供中文介面	低
Color Hunt	1. 提供設計師的配色 2. 提供 Chrome 擴充 3. 多種配色主題分類	1. 無法自由進行配色	低
BrandColors	1. 參考各大品牌配色	1. 無法自由進行配色	低
Material UI Colors	1. 多種配色主題分類 2. 提供可微調的色票	1. 無提供已搭配組合	中
Colorion	1. 提供設計師的配色 2. 多種配色主題分類	1. 下載配色需要登入	低
Nippon Color	1. 設計介面極具風格 2. 可了解日式風配色	1. 無法快速篩選顏色 2. 無提供已搭配色調 3. 無法進行自由配色	低
ColorDrop	1. 提供設計師的配色 2. 可以進行圖片掃描	1. 無法進行自由配色	中
Mudcube Color Sphere	1. 運用色輪自由選色 2. 提供進階配色功能	1. 網站操作門檻較高	高
Adobe Color	1. 功能齊全實用性高 2. 調色盤有多種色調 3. 連結帳戶儲存配色 4. 有提供全中文介面	1. 專業功能不易上手	高
Paletton	1. 功能齊全且較進階 2. 提供網頁配色預覽	1. 網站上有許多廣告 2. 沒有提供中文介面	高

一、Coolors

Coolors 是我覺得對設計一切不通的人非常友善的一款配色工具，只需要你按下空白鍵就會自動幫你配對五種最搭的顏色，非常方便。

如果不喜歡就再按一下就會跳出下一個顏色，如果不小心錯過喜歡的顏色也沒關係，它有非常完善的介面設計，按下返回鍵或是【Ctrl+Z】一樣也能返回上組顏色。

這個網站的功能設計非常多樣，是我看過最完善的一款。包括自訂圖片色調辨識、漸層色票、漸層調整器、漸層調色盤、選色器、Chrome 擴充功能等等，另外也能註冊一個帳號來儲存你喜歡的顏色。

Coolors 也是少數推出 iOS 跟 Android 手機行動版 APP 的配色網站，十分方便。

Coolors 優缺點及費用

優點	1. 功能齊全實用性高 2. 操作直覺容易上手 3. 有支援行動版 APP
缺點	1. 輸出圖片有 LOGO 2. 沒有提供中文介面 3. 部分功能需要付費
費用	免費

Coolors 使用教學

step 1

進入網站後，點選【Strat the generator!】。

step 2

這裡就是主要的顏色選取頁面，以長條型的五種顏色為一組，當下看到的這個顏色不喜歡的話，按下【空白鍵】就會自動幫你替換一組搭配起來合適的顏色，直到你挑到喜歡的為止。

當然，你可以針對某一個顏色進行細微的調整跟位置移動等等，每種顏色的色碼及名稱都會秀在下方，方便你馬上得知該顏色的資訊等等的單一功能都會在滑鼠移動到那個色塊上時顯示。

step 3

這款的功能非常多，這裡來介紹一下每個選項的功能。

1. 除了本身的主色調選擇之外，還有提供趨勢調色盤、選取圖片中的顏色、顏色對比檢查、對 SVG 圖片重新調色、圖片拼貼、漸層色票、漸層工具、圖片格式轉換工具等等工具。
2. 更多選項可以選擇查看顏色亮度、用將目前顏色轉換成漸層、設置、查看教學等。
3. 選取圖片顏色並生成新的配色模板。
4. 將指定圖片建立該圖片的配色模板樣式。
5. 恢復上一步、下一步。
6. 色盲模式，方便對顏色有障礙的朋友使用。
7. 對配色進行色調、飽和、亮度、溫度等調整。
8. 查看目前配色的進階色碼及各種資訊。
9. 匯出顏色、可以複製網址、匯出成 PDF 、JPG、CSS、SVG、代碼等等各種匯出功能。
10. 註冊帳號可以儲存當前顏色。

二、Palettable

Palettable 是一款懶人配色工具，操作方式非常簡單，它會隨機給你顏色，你只要選擇「喜歡」或「不喜歡」就好，選完一個後會繼續讓你選下一個顏色，直到湊滿五個顏色為止。

基本上沒有太多的功能，就是純粹配顏色而已。所以有些人可能會覺得它功能太少，但其實它對於一些不太會挑顏色的設計白癡而言，是個很好用的工具。

Palettable 優缺點及費用

優點	1. 操作簡單不須技巧 2. 顏色多樣驚喜十足
缺點	1. 沒有更多選色功能 2. 沒有提供中文介面
費用	免費

Palettable 使用教學

step 1

一進入後會直接給你一個顏色，中間也會顯示這個顏色的色碼，也能從色碼下方的調色功能調整顏色，只需要選擇最下面的【Dislike】或是【Like】就好。

如果選擇【Dislike】的話，會自動替換一個顏色給你，直到你點選【Like】為止。

step 2

選擇【Like】後，右邊會多切出一格顏色，繼續按照剛剛的步驟選擇喜歡或不喜歡。

step 3

直到選滿五個顏色為止，當選滿組顏色你滿意之後，可以點選右下角的【Export】，選擇要複製連結還是儲存 PNG 檔。

三、Hello Color

Hello Color 比上一款 Palettable 還要更簡單，也是隨機配色你給挑選，但要替換顏色時，只需要用滑鼠點選畫面就好，大概是最懶人的配色工具了。

這款沒有像上面的工具一樣給你五種顏色，而是給你兩種顏色做搭配，主要應用在主視覺的字型版面設計上，提供給你兩種視覺效果最對稱的顏色。

但缺點也是顯而易見，就是功能不多，只能提供簡單的顏色配對，只有喜歡跟不喜歡的選擇而已，如果你的配色需求是需要兩種以上，建議使用其他工具。

Hello Color 優缺點及費用

優點	1. 功能極簡操作簡易 2. 無腦快速選擇顏色
缺點	1. 功能較缺乏多樣性 2. 沒有提供中文介面
費用	免費

Hello Color 使用教學

step 1

網站一進入後會給你一組顏色，這個配色網站只會有兩種顏色，一個就是背景色，一個就是字體色，他會提供這兩者搭配起來對比較強烈的顏色，如果喜歡的話可以將下方的色碼記下來，如果不喜歡的直接點一下螢幕就換替換到下一組顏色。

step 2

往下滑一點會看到他提供有關這組顏色的相關漸層色，可以讓你有更多不一樣的靈感。

四、Color Hunt

Color Hunt 這款最大的特色就是能讓你不用思考要怎麼搭，直接給你一堆設計師和藝術家精心配置好的顏色，直接從中選出你喜歡的配色就好，非常適合沒有想法的人。

這款每一種配色組合都有四種顏色，可能是對比色或相近色，每種組合不會讓人看起來很突兀或不搭。

另外還很貼心的幫忙分類好最新、最受歡迎的顏色，甚至用復古、溫暖、聖誕節、婚禮這類的主題去分類，直接省去煩惱主題配色的問題，非常貼心又實用。

Color Hunt 優缺點及費用

優點	1. 提供設計師的配色 2. 提供 Chrome 擴充 3. 多種配色主題分類
缺點	1. 無法自由進行配色
費用	免費

Color Hunt 使用教學

step 1

1. 從版面中選擇最中意的顏色。
2. 可以從左側選擇主題分類。

step 2

點進顏色後可以看到每個顏色的色碼，也能直接下載這張圖片以及複製連結。

五、BrandColors

BrandColors 是一個集結全世界各大官方品牌色的網站，你能從這個網站找到世界知名企業的 LOGO 或品牌色，並複製他們的色碼。

這個網站比較適合用在「參考」的層面上面，可以藉由觀察各大品牌的配色，進而思考背後的意義，再拉回自己的品牌配色上，找到最適合自己品牌的顏色。

BrandColors 優缺點及費用

優點	1. 參考各大品牌配色
缺點	1. 無法自由進行配色
費用	免費

BrandColors 使用教學

進入網站就能看到依照英文字母排列的世界知名企業並呈現每個品牌的顏色，想知道色碼的話點擊一下就能複製。

六、Material UI Colors

Material UI Colors 是一款非常齊全的色盤工具，直接用表格大範圍秀出由淺至深的七彩顏色，讓使用者能直接選擇最對眼的顏色，選好也能直接複製色碼。

在上面你可以看到各種配圾分類，像是：UI 介面常用色、各大品牌色、主色調、HTML 呈現色。顏色上能直接進行篩選，也能夠使用調色器微調自己喜歡的顏色。

Material UI Colors 優缺點及費用

優點	1. 多種配色主題分類 2. 提供可微調的色票
缺點	1. 無提供已搭配組合
費用	免費

Material UI Colors 使用教學

1. 七彩顏色由淺至深直接成列出來，點選顏色就可複製色碼。
2. 不同色碼可由最下方切換。
3. 左側可根據不同分類進行顏色挑選。

七、Colorion

Colorion 提供上萬種由設計師精心搭配的配色選擇，能直接複製色碼使用。如果有自己喜歡的配色，註冊並登入帳號後還能儲存或下載該組配色。

Colorion 跟 Material UI Colors 一樣提供主要配色、材質設計、基礎顏色的配色分類，能根據需求去選擇主題分類節省選色時間，適合不想煩惱顏色怎麼搭配問題的人使用。

Colorion 優缺點及費用

優點	1. 提供設計師的配色 2. 多種配色主題分類
缺點	1. 下載配色需要登入
費用	免費

Colorion 使用教學

1. 可以直接從畫面上的顏色複製喜歡的顏色。
2. 點擊【info】可以查看該組配色的所有色碼。
3. 登入帳戶後可直接儲存或下載喜歡的配色。
4. 上方選單可以依照主題分類進行篩選。

八、Nippon Color

Nippon Color 是一款非常酷炫的配色網站，充滿了日系風格的設計，每種顏色都被賦予了非常日式的名字，整體用起來極具渲染力。

點選顏色後整個網頁底色都會跟著一起變成選擇的那個顏色，旁邊也會呈現該顏色的 CMYK 及 RGB 的彩度及色域。

這個網站雖然注重體驗跟設計，但對於想挑選顏色的人來說可能不會是第一首選，因為他無法直接複製色碼，也沒有提供搭配好的顏色讓使用者挑選，實用性上跟其他款比起來稍弱一些。

Nippon Color 優缺點及費用

優點	1. 設計介面極具風格 2. 可了解日式風配色
缺點	1. 無法快速篩選顏色 2. 無提供已搭配色調 3. 無法進行自由配色
費用	免費

Nippon Color 使用教學

可從左側挑選喜歡的顏色，而整個網站會隨著你選擇的顏色跟著一起改變整體色調，使用起來體驗感十足，但實用性偏弱。

九、ColorDrop

ColorDrop 是一款自由選色的工具，在網站上有已經配好的四種顏色，能直接從中挑選喜歡的配色。

這個網站有提供漸層編輯、色碼轉換、圖片掃描、漸層色票等多種配色工具，跟 Color Hunt 及 Colorion 是類似的配色結構，但工具又更多樣化了一點。

我認為非常適合一樣想無腦配色，想看到喜歡什麼就選什麼顏色的人使用，而且想要臨時做一些比較進階的配色功能，這款也剛好有提供，是款懶人配色的好選擇。

ColorDrop 優缺點及費用

優點	1. 提供設計師的配色 2. 可以進行圖片掃描
缺點	1. 無法自由進行配色
費用	免費

ColorDrop 使用教學

step 1

1. 選擇喜歡的配色方塊後右邊就會顯示該配色的色碼。
2. 點選眼睛可以呈現四種配色的直條排版。
3. 可以查看點擊過愛心的配色。
4. 選擇網站底色。
5. 更多選單有漸層色票、圖片掃描、色碼轉換、漸層編輯等進階工具可以使用。

step 2

進階工具中有個【Scan Image】圖片掃描的功能，這個功能可以將指定的圖片上傳，它會自動辨識圖片中的主色調，點進來後點擊畫面中間就能選擇指定圖片進行上傳。

step 3

接著工具就能自動辨識此圖片的顏色，並在右邊顯示這張圖片的主要色調有哪些，方便想要針對某些圖片進行色彩辨識的用途。

十、Mudcube Color Sphere

Mudcube Color Sphere 這款工具的設計稍微複雜，它跟 Color Supply 一樣是提供一個色輪給大家自由配色，比較不同的是它會提供所有選擇顏色的色碼跟色階、明度、RGB 色彩條，自由度非常高，能隨心所欲搭配顏色。

另外，它還可以選擇不同的選色模式、色調模式、切換色域的清晰度，配色完成也提供儲存 AI、Photoshop 檔方便直接使用，另提供 URL 直接複製網址保存。

Mudcube Color Sphere 優缺點及費用

優點	1. 運用色輪自由選色 2. 提供進階配色功能(色階/色條/明度)
缺點	1. 網站操作門檻較高
費用	免費

Mudcube Color Sphere 使用教學

1. 直接用滑鼠拖曳色輪即可自由配色。
2. 右側可透過色階、明度、RGB 色彩條進行細部調色。
3. 上方可進行設定、儲存、選色模式、色調模式等功能操作。

十一、Adobe Color

Adobe Color 是 Adobe 提供的免費配色工具，最讓人驚豔的功能就是網站畫面中間的大色輪，能用滑鼠拖曳選取顏色，下方的介面會實時顯示你當前選取到的顏色，RGB 色條跟亮度條也能直接調整。

而它的配色方式不只一種，在基本的「類比」配色之外，左側還能選擇「單色、三元群、補色、分割補色、雙分割補色、正方形、複合、濃度、自訂」模式，每個模式都有不同的特性。

也許會因為功能太專業，讓新手反而不知道該怎麼配色，但也不太擔心，Adobe Color 有提供一些配置好的顏色和當前趨勢最流行的配色，對於沒想法的人，根據這些顏色去挑選也是不錯的選擇。

Adobe Color 優缺點及費用

優點	1. 功能齊全實用性高 2. 調色盤有多種色調 3. 連結帳戶儲存配色 4. 有提供全中文介面
缺點	1. 專業功能不易上手
費用	免費

Adobe Color 使用教學

step 1

1. 畫面中的色輪可以用滑鼠拖曳每個選色點去搭配自己喜歡的顏色，下方配色區每個顏色會隨著滑鼠的拖曳而即時變動，也能從下方的 RGB 色條作調整，選好喜歡的顏色後點選右側的【儲存】並登入 Adobe 帳戶即可保存顏色。
2. 左側可以選擇不同的配色模式，能選擇「類比、單色、三元群、補色、分割補色、雙分割補色、正方形、複合、濃度、自訂」模式，每個模式都有不同的特性。
3. 除了當前的色輪，左上方也有功能可以上傳圖片擷取圖片中的配色或是從中自動擷取漸層顏色。協助工具則是可以讓你調整背景色跟文字顏色讓你快速查看怎樣搭配最好看。
4. 上方的【探索】會提供很多已經配好的色票讓你參考。【趨勢】會透過不同的主題的圖片裡擷取主題色讓你做參考。【資料庫】則可以讓你登入 Adobe 的帳戶對你挑選的顏色進行保存，隨時都不怕忘記。

step 2

按下【儲存】後點選右下角的【檢視】。

step 3

我的資料庫中就會顯示你保存的所有顏色。

step 4

在資料庫後來也能對每種顏色進行調整，以及看到顏色的詳細色碼。

十二、Paletton

Paletton 是一款免費線上調色工具，主要是透過色環及六種配色方案來選色，也可以個別進行調色。

配色方案有單色、互補色(兩色)、三分色、四分色，以及自由設定，用滑鼠拖動色盤上的圓點，就會自動跑出配色的預覽圖。

另外，調配好的色調不僅能用於網頁瀏覽、匯出色碼 (HTML 、CSS、LESS等)，也有隨機配色 (Randomize) 及重置 (Reset) 功能。

Paletton 優缺點及費用

優點	1. 功能齊全且較進階 2. 提供網頁配色預覽
缺點	1. 網站上有許多廣告 2. 沒有提供中文介面
費用	免費

Paletton 使用教學

step 1

1. 左側的色輪跟 Adobe 的一樣，可以用滑鼠拖曳喜歡的顏色，右邊的色板會即時顯示顏色跟相近色。
2. 色輪上方可以選擇不同配色模式。
3. 色板上方有操作功能，包含上一步、下一步、重制配色、隨機配色等等。
4. 根據當前的配色可以預覽將這個顏色放到網頁上的樣式。
5. 匯出當前配色。

step 2

點選色板的話能看到顏色的詳細資訊。

關於配色網站的常見問題

結論：我適合哪一款配色工具？

以上介紹了經過我自己實測覺得最好用的五款免費配色網站、工具給大家參考，每款都有獨樹一格的功能跟特點，基本上應該能滿足百分之九十以上的使用者的需求了。

如果看完你還是不知道該用哪一款當作你日常使用的工具的話，這邊我提供一些建議給你，你可以根據你的狀況來做初步篩選。

• 如果你是新手，對顏色沒有概念，想無腦選色的話，我建議優先選擇：Coolors、Palettable、Hello Color
• 如果你稍微對顏色有點概念，需要進階一點的工具，我建議優先選擇：Material UI Color、ColorDrop
• 如果你是設計專業，在配色與調色方面需要有完整的功能，建議選擇：Mudcube Color Sphere、Adobe Color、Paletton
• 如果你想要有現成的配色參考，直接複製色碼，不需要自己配色的話：Color Hunt、BrandColors、Colorion、Nippon Color

當然，也可以每款都玩玩看，幫自己的部落格找到最合適的色調，讓讀者在瀏覽到時願意多看一會。

部落格經營相關文章

【手機版 表格資訊在下方】