Eva Design System

Eva Design System（colors.eva.design）是开源Eva设计体系配套的**深度学习智能色彩生成工具**，面向UI设计师、前端开发者、产品设计系统搭建人员打造，仅需输入品牌主色，即可全自动生成标准化、分层级完整界面色彩体系，配套浅色/深色主题预览、实时调色、多格式代码导出，免费在线使用，完美适配Web、移动端组件库主题搭建场景。

平台核心两大色彩体系：品牌主色渐变阶梯、四大功能语义色组；每类色彩自动生成100-900共9档明度梯度色值，覆盖页面背景、卡片、按钮、文字、提示弹窗全UI场景，基于海量配色数据集训练的深度学习算法，保证整套色彩视觉协调、对比度符合无障碍设计规范，原生适配Nebular、UI Kitten等主流前端组件库。

一、品牌主色完整渐变阶梯（Primary Color）

1. 9阶标准化明度色阶

输入任意HEX/RGB/HSL品牌主色，算法自动推演100（最浅背景）至900（最深文本）全套渐变色值：
– 100/200/300：浅底色、卡片背景、淡分割线
– 400/500：标准主色，按钮、图标、高亮强调（500为基准主色）
– 600/700/800/900：深色 hover、边框、正文标题、强强调文本
全部色值点击色块一键复制HEX十六进制代码，无需手动换算。

2. 锁定微调机制

可锁定任意一档色阶，单独修改色相、饱和度、明度，其余色彩自动同步适配，避免整套配色失衡，快速微调品牌视觉调性。

二、四大UI语义功能色彩（Semantic Colors）

基于主色色彩逻辑衍生4套独立提示色系，每套同样配套100-900九阶渐变，统一视觉风格，区分业务信息状态：

• Success成功色：绿色系，用于操作完成、勾选、成功弹窗、校验通过提示；
• Info信息色：浅蓝系，用于说明提示、通知、帮助引导；
• Warning警告色：暖黄/橙系，用于风险提醒、待确认、预警提示；
• Danger危险色：红橙系，用于删除、报错、错误弹窗、高危操作按钮；

整套语义色与品牌主色同源，不会出现割裂撞色，统一产品设计语言。

三、配套核心实用工具能力

1. 明暗双主题实时预览

一键切换浅色/暗黑模式，同步查看所有色阶在两套主题下的显示效果，提前适配暗色模式界面开发，规避深色模式对比度不足问题。

2. 多格式批量导出方案

完成配色后支持一键导出：JSON色板文件、通用CSS变量、Nebular/UI Kitten专用主题样式代码、图片色卡，直接导入Figma、Sketch、前端项目，省去手动录入色值工作量。

3. 完整Eva生态联动

色彩体系与Eva开源组件库打通，配套Figma/Sketch设计素材、Angular/React Native前端框架、480+开源线性/实心图标库，一套色彩方案直接落地设计稿与开发代码，实现设计研发视觉统一。

四、平台核心适配优势

1. 设计系统专属定位：区别通用配色网站，专为中后台、APP组件库搭建而生，产出标准化分层色阶，符合现代UI设计规范；
2. AI深度学习自动推演：仅输入单一主色生成全套协调色彩，无需设计师手动搭配多套提示色，大幅降低配色门槛；
3. 开发友好输出：直接输出前端可用CSS、JSON变量，适配主流Angular/React组件框架；
4. 轻量化免费访问：网页端全部生成、调色、导出功能永久免费，无注册强制要求；
5. 无障碍色彩保障：算法自动校验文本与底色对比度，规避界面文字看不清、色弱识别障碍问题。

Eva Design System色彩工具依托深度学习自动生成品牌分层主色+全套语义提示色，搭配明暗主题预览与多格式代码导出，一站式完成产品设计系统色彩规范搭建，是中后台、移动端UI设计师与前端开发者高效标准化配色专用工具。