建立、探索、匯出配色，快速簡單，一站搞定。
我們的工具
建立
配色
幾秒做出一組配色。按下空白鍵，鎖定喜歡的顏色，繼續嘗試。
開始建立探索
配色
從 31 個分類的配色中找靈感：馬卡龍色、復古、霓虹、秋天、夕陽等等。
看配色從圖片取色
上傳一張照片，擷取最好看的顏色，變成一組配色。
上傳圖片對比檢查
依照 WCAG 無障礙規範，檢查文字放在背景上是否好讀。
檢查對比色彩和諧
選一個顏色，在色環上找出它的互補色、類似色和三等分色。
看色彩和諧互動色環
在色環上移動圓點，立刻知道哪些顏色和你選的顏色最搭。
使用色環漸層產生器
在兩個或更多顏色之間做出平滑的漸層，並複製可直接使用的 CSS 程式碼。
建立漸層顏色名稱
搜尋數百種有名稱的顏色，複製它們的 HEX 或 RGB 色碼。
搜尋顏色網站配色
專為網站和介面設計的配色，CSS 可直接複製貼上。
看網站配色更多配色靈感
用你習慣的格式匯出
主題配色靈感
熱門顏色
不知道什麼顏色搭配嗎？看看顏色搭配、查查顏色的意義，或試試HEX 轉 RGB 工具。
常見問題
什麼是配色？
配色是一組挑選好、要在同一個設計裡一起使用的顏色。通常包含一個主色、主色的淺色與深色版本，再加上一到兩個強調色。Logo、品牌識別、社群貼文、網站、介面和插畫都會用到配色。
這個配色產生器怎麼運作？
它不是顯示固定的清單，而是即時產生配色。先選一個基礎色相，再依照色彩和諧的規則（類似色、互補色、三等分或單色）組出五個顏色。每種風格都有自己的明度和彩度範圍，所以馬卡龍色會很柔和，霓虹色則很鮮豔。在編輯器裡按空白鍵就能產生新的配色，想保留的顏色可以先鎖定。
怎麼挑出好的配色？
先想想你想傳達什麼感覺。暖色調親切又有活力，冷色調沉穩、讓人信任，深色調則顯得優雅。顏色不要用太多，保留足夠的對比讓文字好讀，決定之前先放進實際的設計裡試試看。
怎麼找到搭在一起好看的顏色？
顏色之間有和諧關係時就會好搭：色環上相鄰的顏色（類似色）、相對的顏色（互補色），或同一色相的深淺變化（單色）。本站的每組配色都遵循這些規則。範例請看好搭的配色。
什麼是色環？
色環把原色、二次色和三次色排成一個圓。從色環可以看出哪些顏色好搭、哪些顏色對比強烈，所以它是做配色的起點。到色彩和諧工具試試看吧。
什麼是原色和二次色？
原色是紅、藍、黃三色，無法用其他顏色混出來。二次色是由兩個原色混合而成：藍加紅是紫色，藍加黃是綠色，紅加黃是橘色。原色再和二次色混合，就會得到三次色。
什麼是單色配色和互補色？
單色配色只用同一個色相，搭配它的淺色和深色版本，看起來統一又優雅。互補色則是在色環上彼此相對的顏色，例如藍色和橘色。兩者放在一起對比最強烈，能互相襯托。
這些配色可以免費使用嗎？
可以。你可以複製 HEX 色碼或 CSS，用在任何個人或商業專案中。