配色小幫手！Eva Colors 深度學習配色工具，幫你找出 4 種可搭配使用的顏色

只要設定品牌主顏色，它能自動運算出 4 種可用資訊顏色；並幫助每個顏色有更好的結合，看起來更有一致性，還能切換深色模式。

免費資源網路社群介紹過不少配色工具，但大部分都是提供使用者顏色代碼，或是幫你找出幾個相關色碼，在毫無頭緒的情況下或許派得上用場，卻很難在現有的配色下做更多運用，若不是把整體配色換掉，單獨只有加入顏色可能會略顯突兀，於是有開發團隊想到在使用者選擇色碼後就產生一些相關功能會用到的顏色，也算另類的色彩工具。

本文要推薦的「Eva Design System」是一個深度學習的顏色產生器，可以幫使用者進行顏色配色，但跟一般色彩工具不一樣的是 Eva Design System 要求使用者先設定一個主色（Primary Color），隨即就能幫你演算出其他 4 種可能會用到的功能顏色，分別是成功訊息、一般資訊、警告和危險訊息顏色。

Eva Design System 最有價值的部分在於運算出來的 4 種顏色都能和主色彩有相當好的結合，不致於產生很混亂、刺眼或無法融合等問題，還能加深或調淺，單獨鎖定特定顏色來重新演算其他顏色，而產生的配色結果可以匯出保存。

網站名稱： Eva Design System
網站鏈結：https://colors.eva.design/

使用教學

STEP 1

開啟 Eva Design System 網站，依照網頁上的提示訊息輸入你的主顏色，可以是你的品牌顏色、網站顏色或鏈結顏色等等，輸入後就會在旁邊產生其他配色。

依照網頁上的提示訊息輸入你的主顏色，輸入後就會在旁邊產生其他配色。 螢幕截圖自 Eva Colors

　
在這裡我使用免費資源網路社群的超連結顏色做為範例（嚴格來說應該要用品牌色，不過只是做個示範），直接將 HEX 色碼貼上，或是利用調色工具選色、HSB 色彩模式。

範例輸入 #C3251D 螢幕截圖自 Eva Colors

STEP 2

設定完主顏色後，旁邊的 Semantic Colors 就會出現四種最常用的訊息顏色，可以依照建議使用於成功訊息、一般資訊、警告或危險訊息上，如果不滿意配色，按下右側的重新整理可再次運算並產生新顏色， 想保留特定顏色的話就點選旁邊的「鎖頭」，重新整理時就會維持該項目原有顏色。

按下右側的重新整理可再次運算並產生新顏色 螢幕截圖自 Eva Colors

STEP 3

想測試一下在深色背景的呈現情形，也可點選右上角的黑夜模式進行切換。

單獨點選每一個色塊就會自動複製 HEX 色碼，非常簡單，而每一組顏色則有更淺、更深色的選項，若要保存顏色，點選右上角「EXPORT」就能將顏色匯出，不過並不是直接給使用者色碼檔案，而是儲存成一般圖片檔。

點選右上角的「月亮」可切換為深色背景模式 螢幕截圖自 Eva Colors

值得一試的三個理由：

1. 設定品牌主顏色，自動運算出四種可用資訊顏色
2. 讓每個顏色有更好的結合，看起來更有一致性
3. 可切換深色模式，一鍵複製 HEX 色碼或一次匯出

　
本文經授權轉載自《免費資源社群網路》，原文請點此。