Color generator

一、网站简介

　　Color generator是一个基于Eva Design System的智能配色生成器，可帮助设计师快速创建语义化色彩体系。输入一个品牌主色，系统自动生成配套的浅色变体、深色变体以及成功、信息、警告、危险等状态色，支持一键导出JSON、SCSS变量，完美适配Angular、React等前端框架的UI配色需求。

二、背景介绍

　　Color generator由Eva Design System团队开发维护。Eva Design System是Akveo公司推出的开源UI设计体系，广泛应用于Nebular、UI Kitten等Angular/React组件库。配色生成器作为Eva生态中的关键工具发布于2019年前后，凭借其语义化色彩算法迅速在设计社区获得关注，GitHub上Eva Design System项目累计超过3万星标，配色生成器是其最受欢迎的独立页面之一。

三、核心功能

　　语义色板生成：给定一个主色，自动推算success、info、warning、danger四类状态色，每种状态色包含正常态、悬停态、激活态、禁用态等变体。 实时预览：生成的配色即时渲染在示例组件上，按钮、输入框、标签等UI元素的配色效果一目了然。多格式导出：支持一键复制为JSON对象或SCSS变量，直接粘贴进项目代码。明暗模式：可切换浅色主题与深色主题预览，确保颜色方案在两种模式下都具备可读性。 品牌色定制：支持同时定义多个品牌色，生成完整的品牌调色板。

四、特色亮点

　　与Coolors主打调色板灵感探索、Adobe Color侧重色彩理论规则（互补色、三角色等）不同，Color generator的独特之处在于其面向前端工程化的语义色彩体系——它不只告诉你”什么颜色好看”，更直接输出一套可直接用于代码的design token色彩规范，设计师与前端开发者之间的沟通成本被大幅压缩。命名规则清晰、导出格式标准，是同类工具中工程化程度最高的一款。

五、适用人群

　　Angular或React项目的前端开发者需要快速搭建主题色系统；UI设计师在定义组件库色彩规范时寻找参数化工具；使用Nebular或UI Kitten组件库的开发者配套调整主题配色；需要为MVP项目快速产出配色方案的全栈工程师；设计系统团队中负责颜色token定义与维护的设计工程师。

六、实用场景

　　接手一个Angular后台项目时，输入企业VI品牌色，三秒生成全套UI色彩变量直接替换主题文件；设计评审会上，产品经理要求调整按钮颜色，现场用生成器预览效果后导出新色值达成共识；搭建个人博客时不确定配色，多次尝试不同主色直到找到最能代表个人风格的色调组合；前端新手学习design token概念时，通过该工具的导出功能直观理解语义化色彩命名规则。

七、常见问题（FAQ）

Q：Color generator生成的颜色可以商用吗？
A：完全可以。生成的颜色值本身不涉及版权问题，导出的JSON与SCSS代码可直接用于商业项目。Eva Design System本身是MIT开源协议，无任何商用限制。

Q：Color generator与Coolors、Adobe Color有什么区别？
A：Coolors偏灵感式配色探索，适合平面设计与插画；Adobe Color基于色彩理论生成规则化配色方案；Color generator则严格面向UI组件开发，输出的不是”调色板”而是”语义化色彩体系”，每个颜色都有明确的功能角色。三者目标用户不同，可根据项目阶段搭配使用。

Q：是否支持自定义状态色而非自动生成？
A：当前版本以自动语义生成为核心，暂不支持逐色手动微调。但导出后可自行在代码中调整具体色值。H139导航收录此工具，正是因为其在UI开发效率上的独特价值。

八、同类推荐

　　Coolors：快速生成五色调色板，支持空格键随机切换，灵感式探索。Adobe Color：色轮工具，支持互补色、三角色、分割补色等色彩规则。Paletton：同样基于色彩理论，但更侧重网页整体配色预览。Happy Hues：展示真实页面中的配色效果，适合寻找配色参考。

Color generator快速直达链接：https://colors.eva.design/。H139网址导航提醒您，按Ctrl+D可以快速收藏哦！