今天要推薦的「Eva Design System」是一個深度學習的顏色產生器,可以幫使用者進行顏色配色,但跟一般色彩工具不一樣的是 Eva Design System 要求使用者先設定一個主色(Primary Color),接著提供其它四種語意化顏色的建議,分別是 Success(成功)、Info(訊息)、Warning(警告)以及 Danger(危險),每種顏色皆提供 9 個不同深淺的色階可選用,幫助你擺脫選色的障礙。
Eva Design System 最有價值的部分在於運算出來的四種顏色都能和主色彩有相當好的結合,不致於產生很混亂、刺眼或無法融合等問題,還能加深或調淺,單獨鎖定特定顏色來重新演算其他顏色,而產生的配色結果可以匯出保存。
如果覺得產出的顏色建議不是很順眼,只要點擊重置按鈕,就能再產出其它的配色組合,其中有喜歡的顏色則可鎖定不再變動,可以嘗試到你滿意為止。在網頁中的顏色都可以直接點擊複製色碼來使用,也可以將整組色票儲存下來備用哦!
以下將會教導大家如何使用這個網站:
*** STEP ONE ***
開啟 Eva Design System 網站,依照網頁上的提示訊息輸入你的主顏色,可以是你的品牌顏色、網站顏色或鏈結顏色等等,輸入後就會在旁邊產生其他配色。
在這裡隨意使用一個顏色做為範例(嚴格來說應該要用品牌色,不過只是做個示範),直接將 HEX 色碼貼上,或是利用調色工具選色、HSB 色彩模式。
*** STEP TWO ***
設定完主顏色後,旁邊的 Semantic Colors 就會出現四種最常用的訊息顏色,可以依照建議使用於成功訊息、一般資訊、警告或危險訊息上,如果不滿意配色,按下右側的重新整理可再次運算並產生新顏色,想保留特定顏色的話就點選旁邊的「鎖頭」,重新整理時就會維持該項目原有顏色。
*** STEP THREE ***
想測試一下在深色背景的呈現情形,也可點選右上角的黑夜模式進行切換。
單獨點選每一個色塊就會自動複製 HEX 色碼,非常簡單,而每一組顏色則有更淺、更深色的選項,若要保存顏色,點選右上角「EXPORT」就能將顏色匯出,不過並不是直接給使用者色碼檔案,而是儲存成一般圖片檔。
Eva Colors 值得一試的三個理由:
- 設定品牌主顏色,自動運算出四種可用資訊顏色
- 讓每個顏色有更好的結合,看起來更有一致性
- 可切換深色模式,一鍵複製 HEX 色碼或一次匯出