Eva Design System 页面展示的是一个基于深度学习的色彩生成工具,重点在于把品牌色与语义色整理成可直接查看的色彩体系。页面以 Brand Color 和 Semantic Colors 两个部分组织内容:品牌部分提供一组 Primary 色阶,语义部分则分别提供 Success、Info、Warning、Danger 四组色阶。每组颜色都以 100 到 900 的等级呈现,并给出对应的 HEX 色值,因此用户可以在同一页面中查看从浅到深的连续颜色变化,以及不同语义用途下的颜色组合。页面底部还关联 Eva Design System、Nebular 和 UI Kitten,说明这些内容与 Eva 设计系统及其相关项目处于同一产品体系中。
核心功能
品牌主色体系
页面提供一组名为 Primary 的品牌色阶,共包含 100、200、300、400、500、600、700、800、900 九个等级。色值从较浅的 #D6E4FF 开始,经过 #ADC8FF、#84A9FF、#6690FF 和 #3366FF,继续延伸到较深的 #254EDB、#1939B7、#102693 与 #091A7A。这组内容用于展示 Brand Color 部分的完整颜色范围。
成功色
Semantic Colors 中包含 Success 色阶,同样按照 100 到 900 划分九个等级。页面列出的颜色从 #EBFBD6、#D3F7AE、#AEE981 逐步过渡到 #58B72F,并继续提供 #3F9D22、#298317、#186A0E、#0B5709 等更深色值。它是页面明确标注的成功语义颜色组。
信息色
Info 是页面提供的另一组语义色,共有九个等级。其色值由 100 级的 #CEFBFF、200 级的 #9CF1FF 和 300 级的 #6CE0FF 开始,中间包括 #47CDFF 与 #0AADFF,较深等级则包括 #0786DB、#0564B7、#034793 和 #01337A。页面以这一组连续色阶呈现信息语义的颜色选择。
警告色
Warning 色阶覆盖 100 至 900 九个等级。浅色部分包括 #FFFACE、#FFF39D、#FFEB6D 和 #FFE348,500 级为 #FFD60C;从 600 级开始,页面继续列出 #DBB408、#B79306、#937303 和 #7A5D02。这些色值构成页面中的警告语义色组。
危险色
Danger 也是九级语义色阶,页面从 100 级的 #FFE6D3、200 级的 #FFC7A8、300 级的 #FFA07C 和 400 级的 #FF7C5C,过渡到 500 级的 #FF3F26。更深的等级依次包括 #DB221B、#B7131A、#930C1D 与 #7A071E,用于展示危险语义对应的完整颜色范围。
使用方式
官网正文展示了 Eva Design System 的色彩生成页面及其色板结果,未说明需要注册、登录、自备模型 Key,也未提供客户端、浏览器插件、API 或命令行的使用方式。当前可确认的内容是:页面直接按品牌色和语义色分类展示颜色等级与 HEX 色值;正文没有提供导入、导出或其他操作说明。
适用人群与场景
需要整理品牌主色的设计系统维护者,可以参考页面中的 Primary 九级色阶。需要区分成功、信息、警告和危险状态的界面设计者,可以查看四组 Semantic Colors 及其从 100 到 900 的不同深浅等级。使用 Eva Design System、Nebular 或 UI Kitten 相关体系的人员,也可以将页面展示的色彩分组作为相关设计系统中的颜色参考。