重點整理
Eva Design System 的配色工具（colors.eva.design）適合建立介面色彩系統：設定品牌主色後，自動算出成功、資訊、警告、危險四種功能色。不滿意可按重新整理，喜歡的顏色先鎖定保留，完成後按 EXPORT 匯出色票。
之前的文章中介紹過不少配色工具，但大部分都是提供使用者顏色代碼，或是提供已經搭配好的相關配色，今天要介紹的配色工具是可以讓使用者自訂主色，隨即系統在提供成功訊息、一般資訊、警告和危險訊息這四種顏色，這個顏色產生器就是 -「Eva Design System」。
Eva Design System 是什麼
Eva Design System 跟一般的配色工具不一樣的是，Eva Design System會先要求使用這自訂主色後，隨即就能算出其他四種可能其他四種功能顏色分別是成功訊息、一般資訊、警告和危險訊息顏色。並且 Eva Design System 能將主色與功能色很好的融合，不僅能條深淺，還可以鎖定特定顏色後重新眼色其他功能色，直到使用者滿意。
Eva Design System 使用教學
第一步：點擊上方網址，進入「Eva Design System」網站。
第二步：設定主色（ Primary Color ) 後，系統會根據主色演算出其他四種功能色（成功訊息、一般資訊、警告和危險訊息顏色）。
第三步：如果對配色不滿意的話，可以選擇右側的重新整理鍵更改配色，若想保留色定色的話只需點選旁邊的「鎖頭」待重新整理時即會保留該項目原有的顏色。
第四步：想輸出以搭配好的色票，點選右上角「EXPORT」就能將顏色匯出！
產生的色票怎麼用在網站上？
- 先定義成全域顏色：把主色與四種功能色設進佈景主題或 Elementor 的「全域顏色」，之後所有按鈕、提示框都引用這組顏色，改色時只要改一個地方。
- 寫成 CSS 變數：自己寫樣式的話，用
--color-primary、--color-danger這類變數名稱管理。 - 檢查對比：淺色階放白字常常看不清楚，按鈕文字與背景的對比要足夠，可以用色彩對比檢查工具確認。
- 功能色不要拿來裝飾：紅色只用在錯誤或刪除，避免讀者誤會。
常見問題
Eva Design System 配色工具要付費嗎？
配色工具 colors.eva.design 可以直接在瀏覽器免費使用，不需要註冊。輸入品牌主色後就會產生成功、資訊、警告、危險四種功能色與各自的深淺色階。
Eva Design System 的配色要怎麼匯出？
按畫面右上角的 EXPORT 就能把整組色票匯出，也可以點個別色塊複製色碼。匯出前先用鎖頭把滿意的顏色鎖住，避免按重新整理時被換掉。
成功、資訊、警告、危險四種功能色是做什麼用的？
它們是介面的狀態色：成功（綠色系）用在送出成功訊息，資訊（藍色系）用在提示，警告（黃橘色系）提醒注意，危險（紅色系）用在錯誤與刪除按鈕。和品牌主色分開，使用者才能一眼看懂狀態。
結語
對於資訊設計來說最重要的是清楚區分主色與功能色，可切換深色模式，一鍵複製 HEX 色碼或一次匯出，而 Eva Design System 不僅是顏色生產器，對於使用者來說更是很好配色學習工具！