色彩 Eva Colors 帮你深度学习的颜色产生器

oswald 2019-09-02   10587

只要设定品牌主颜色,它能自动运算出 4 种可用资讯颜色;并帮助每个颜色有更好的结合,看起来更有一致性,还能切换深色模式。

网上有不少配色工具,但大部分都是提供使用者颜色代码,或是帮你找出几个相关色码,在毫无头绪的情况下或许派得上用场,却很难在现有的配色下做更多运用,若不是把整体配色换掉,单独只有加入颜色可能会略显突兀,于是有开发团队想到在使用者选择色码后就产生一些相关功能会用到的颜色,也算另类的色彩工具。

本文要推荐的「Eva Design System」是一个深度学习的颜色产生器,可以帮使用者进行颜色配色,但跟一般色彩工具不一样的是 Eva Design System 要求使用者先设定一个主色(Primary Color),随即就能帮你演算出其他 4 种可能会用到的功能颜色,分别是成功讯息、一般资讯、警告和危险讯息颜色。

Eva Design System 最有价值的部分在于运算出来的 4 种颜色都能和主色彩有相当好的结合,不致于产生很混乱、刺眼或无法融合等问题,还能加深或调浅,单独锁定特定颜色来重新演算其他颜色,而产生的配色结果可以汇出保存。

STEP 1

开启 Eva Design System 网站,依照网页上的提示讯息输入你的主颜色,可以是你的品牌颜色、网站颜色或链结颜色等等,输入后就会在旁边产生其他配色。

依照网页上的提示讯息输入你的主颜色,输入后就会在旁边产生其他配色。

在这里使用范例(严格来说应该要用品牌色,不过只是做个示范),直接将 HEX 色码贴上,或是利用调色工具选色、HSB 色彩模式。

范例输入 #C3251D

STEP 2

设定完主颜色后,旁边的 Semantic Colors 就会出现四种最常用的讯息颜色,可以依照建议使用于成功讯息、一般资讯、警告或危险讯息上,如果不满意配色,按下右侧的重新整理可再次运算并产生新颜色, 想保留特定颜色的话就点选旁边的「锁头」,重新整理时就会维持该项目原有颜色。

按下右侧的重新整理可再次运算并产生新颜色

STEP 3

想测试一下在深色背景的呈现情形,也可点选右上角的黑夜模式进行切换。

单独点选每一个色块就会自动复制 HEX 色码,非常简单,而每一组颜色则有更浅、更深色的选项,若要保存颜色,点选右上角「EXPORT」就能将颜色汇出,不过并不是直接给使用者色码档案,而是储存成一般图片档。

点选右上角的「月亮」可切换为深色背景模式

值得一试的三个理由:

设定品牌主颜色,自动运算出四种可用资讯颜色

让每个颜色有更好的结合,看起来更有一致性

可切换深色模式,一键复制 HEX 色码或一次汇出



查看更多[色彩]的文章

0   9018

文章评论(0)