好用的AI自動配色工具! 可以直接匯出套用!

配色工具介紹

https://colors.eva.design/
在眾多配色網站中，這款成為我少數幾個有加入標籤的網站
他透過深度學習，快速產生具有美感的顏色並且能夠直接匯出使用!!

1. 選擇主色之後，自動幫你產生網站中常用的功能型配色
   喜歡的話可以鎖住保留，不喜歡的話可以一直刷新
   
2. 調整出喜歡的顏色後，可以匯出成多種格式
   包括 Akveo 自家的 Nebular 主題格式，以及常見的 JSON 格式
   
3. 以 Nebular 主題為例，打開來會長這樣
   可以很方便地加入到 Nebular 中做自訂主題
   

選完喜歡的配色，套用到主題中

1. 將匯出的檔案加入到themes.scss

$nb-themes: nb-register-theme(
  (
    color-primary-100: rgba(219, 253, 246, 1),
    color-primary-200: rgba(184, 252, 243, 1),
    color-primary-300: rgba(146, 246, 241, 1),
    ...
    ...
  custom-theme,
  default
  );

4. 在子元件中需要用到變數的 SCSS 檔案中
   引入主題的樣式變數
   例如: 將 text-color 這個 class 的顏色設定為主色

@import 'src/app/@theme/styles/themes.scss';
.text-color{
  color: nb-theme(color-primary-500);
}

結語

如果是本來就在用 Nebular 主題的一定要試試看
就算不是，一般使用上也非常好用
產生出來的顏色都頗有質感
快點收藏起來吧~