Eva Design System

工具介绍

Eva Design System 是一款在线智能配色工具，专门帮设计师解决”这个颜色配什么色好”这个问题。你可能遇到过这种情况：好不容易选定了品牌主色，结果配出来的辅助色怎么看都不对劲，要么太跳、要么太闷，来来回回改十几遍还是不满意。

Eva Design System 就是来解决这个痛点的。你只需要输入一个主色（十六进制代码或者取色器点选），工具会用深度学习算法自动生成四种配套色：Success（成功/正向）、Info（信息/中性）、Warning（警告）、Danger（危险）。这四种颜色不是随便生成的，而是根据色彩理论计算出来的，和你的主色搭配起来视觉上会很和谐。

设计师最怕的就是配色没有依据、靠感觉。Eva Design System 给你的每一组配色都有算法支撑，而且你可以锁定某个颜色只刷新其他的，这样既能保持品牌核心色调不变，又能不断尝试新的搭配方案。工具支持导出 JPEG、JSON、CSS 等多种格式，做完配色直接用到项目里，效率提升不是一点点。

更重要的是，这个工具是纯网页版的，打开就能用，不用下载安装任何东西，也不用注册账号。对于急需解决配色问题但又不想被各种注册流程折腾的人来说，这个工具非常友好。花一分钟输入主色，就能得到一套专业的品牌配色方案，省下的时间够你喝三杯咖啡了。

核心功能

1. 深度学习颜色生成器

你输入一个品牌主色，Eva Design System 会自动生成四种衍生颜色，分别对应成功、信息、警告、危险四种语义场景。背后的算法会分析主色的色相、明度、饱和度，然后计算出一组视觉协调的搭配色。生成的配色不是随机试错，而是有理论依据的色彩搭配方案。对于设计师来说，这意味着你不用再靠感觉配色，而是有数据支撑的专业方案可以拿给客户看。

2. 颜色深浅调整

生成的四色可能整体偏深或者偏浅，不一定适合你的具体项目。Eva Design System 提供了深浅调节功能，你可以滑动调节杆，让整体配色变亮或者变暗。调节是实时预览的，调到什么效果马上就看到，不用反复点击刷新。这个功能特别实用，因为同一个颜色用在深色背景和浅色背景上，需要的明度其实不一样，用这个功能微调一下就能适应不同场景。

3. 单色锁定与刷新

这个功能非常实用。当你生成一组配色后，对其中某个颜色很满意（比如 Success 绿），可以点击锁定按钮把它固定住，然后点刷新让其他三个颜色重新生成。这样你可以逐步完善配色方案，锁定满意的、刷新不满意的，不用担心好颜色被刷新没了。这个流程模拟了设计师手动调整配色的思考过程，但把机械的试错工作交给算法完成。

4. 多种导出格式

配色做好了要导出到设计文件里用。Eva Design System 支持导出为 JPEG（图片格式，方便给客户看和放入设计稿）、JSON（方便开发同学读取颜色值用到代码里）、Nebular 格式（Eva 自己的组件库格式）、UI Kitten CSS（另一个流行 UI 框架的样式格式）。根据你的工作流选对应格式就行，不用自己手动转换格式。

5. 实时预览调色板

整个配色过程是可视化的。页面上有一个大的调色板区域，显示主色和四种衍生色的搭配效果。你可以在上面直接看到这些颜色用在按钮、提示框、警告条上的实际效果，不用导出到设计软件里才能判断好不好看。对于需要快速出方案的设计师来说，这个所见即所得的功能能省不少反复修改的时间。

6. 精确色值显示与一键复制

每种颜色都会显示精确的色值，包括十六进制代码和 RGB 值。设计师可以复制色值粘贴到 Figma、Sketch 等设计软件里用，开发人员也可以直接拿到代码里用。色值显示清晰，复制按钮一点就能复制，不用手动选中文本再复制。这个小功能在实际工作中使用频率非常高。

7. 调色板场景预览

除了显示单色，Eva Design System 还会在调色板上模拟一些常见的 UI 场景，比如正常按钮、警告提示框、危险操作弹窗等，让你在生成配色的同时就能看到颜色在实际界面元素上的效果。这个功能帮助设计师在选择配色时更有信心，因为看到实际应用效果比看单独的颜色块要直观得多。

使用场景

• 网页设计配色方案：做网站时需要确定一整套配色，主色定了但辅助色没头绪。用 Eva Design System 输入主色，几秒钟就出来一套完整配色，直接用在网页上，比自己试错快多了，而且配色有理论依据，客户问起来也能说得清楚。尤其是对于没有系统学习过色彩理论的设计师，这个工具等于给你配了一个色彩顾问。

• 移动应用 UI 色彩设计：APP 开发需要给不同状态的按钮、提示框、弹窗配上语义色，比如成功是绿色、危险是红色。输入品牌主色，生成的四色就是现成的语义色，改一改明度就能直接用到设计稿里。安卓和 iOS 的设计规范对语义色都有要求，用这个工具生成的配色基本能覆盖这些要求。

• 品牌视觉系统构建：做品牌设计时需要一整套 VI 色彩体系，从主色衍生出一组辅色。用 Eva Design System 可以快速生成多组配色方案，锁定喜欢的颜色继续调整，最终确定一套完整的品牌色板。这个色板可以作为品牌设计系统的基准色，所有设计师都引用同一套色值，品牌的视觉一致性就有保障了。

• PPT 和演示材料配色：做汇报 PPT 或者演讲材料时，配色乱会显得不专业。自己选辅助色往往容易选得不协调，影响整个演示的专业感。选一个主色，输入工具生成配套色，然后用这组配色来统一 PPT 的标题、强调、背景等元素，视觉上会整齐很多，领导看了也会觉得你这个人事先做过功课。

• 设计系统色板维护：团队的设计系统需要维护一套色板，但设计师换人或者时间久了就不统一了。每个设计师对颜色的理解不同，做出来的东西色彩就不一致。用 Eva Design System 生成的标准色作为基准，所有人用同一套色值，设计系统的色彩就能长期保持一致性，新人入职也能快速上手。

价格方案

功能特点

• 输入主色自动生成四种语义配套色，无需手动搭配，省时省力
• 深度学习算法支撑，生成的配色有理论依据，不是随机试错
• 支持锁定单个颜色后刷新其他颜色，灵活调整配色方案
• 深浅调节功能让配色适应不同使用场景，从深色背景到浅色背景都能应对
• 支持 JPEG、JSON、Nebular、UI Kitten CSS 等多种导出格式，设计开发衔接顺畅
• 实时预览调色板，所见即所得，不用反复导出查看效果
• 页面简洁，无需注册打开就能用，体验流畅不拖沓
• 色值显示清晰，复制方便，一键复制提升设计师工作效率
• 衍生色覆盖成功、信息、警告、危险四种语义场景，UI 设计常见场景全覆盖

上手指南

第一步：打开官网

在浏览器里访问 colors.eva.design，打开后你会看到一个简洁的界面。中央有一个大的调色板区域，下方是控制面板。页面加载很快，不需要注册登录，打开就能用。对于急需解决配色问题的人来说，这个零门槛的体验非常重要。

第二步：输入品牌主色

在调色板上方找到”Brand Color”输入框。你可以直接输入十六进制颜色代码（如 #3498db），也可以点击旁边的取色器图标，用鼠标在颜色盘上点选你想要的颜色。输入后调色板会立即更新，所有衍生色都会根据你选的主色重新计算。这个过程几乎是实时的，你能看到颜色变化几乎是秒级响应。

第三步：查看生成的衍生色

系统会自动生成四种衍生色：Success（绿色系）、Info（蓝色系）、Warning（黄色系）、Danger（红色系）。这四种颜色会显示在调色板上，你可以看到它们跟主色的搭配效果。如果配色不满意，直接进入下一步调整。这个步骤你可以快速判断这组配色是否接近你的预期。

第四步：调整深浅和锁定颜色

如果你觉得颜色太深或太浅，用调色板下方的深浅滑块进行调节。如果你对某个颜色满意，点击该颜色旁边的锁形图标锁定它。然后点击刷新按钮，其他三个颜色会重新生成，锁定的颜色保持不变。这个流程可以多轮重复，直到你找到一组完全满意的配色为止。

第五步：导出配色方案

确定好配色后，点击调色板右上角的”EXPORT”按钮。选择你需要的导出格式——如果是给客户看，选 JPEG；如果是开发用，选 JSON 或 CSS。然后下载文件用到你的项目里。导出的文件命名通常会包含主色的色值，方便后续辨认。

第六步：应用到设计项目中

把导出的色值复制到你的设计软件（如 Figma、Sketch）或代码里。十六进制代码直接复制，CSS 格式的可以粘贴到样式表里。现在你的项目就有一套专业调配的品牌配色了，比自己试错出来的配色靠谱多了。

常见问题