企业官网建设流程全解析

Element React 通过一套固定的调色板（Palette）统一定义产品界面中的颜色，避免不同页面、不同组件之间出现视觉传达差异。本文以 site/docs/en-US/color.md 为骨架，结合仓库内文档渲染代码与组件源码，完整梳理主色、辅助色、中性色三组色系的色值、用途，以及它们在真实组件（Progress、Rate、Switch）中的落地方式，帮助你在自定义主题或业务组件时准确复用这套色板。

色彩体系概述

Element 色彩体系的核心思想是：用一套预先规定好的颜色，为所搭建的产品提供一致的外观视觉感受。整个体系分为三层：

该文档在仓库中同时维护英文版 site/docs/en-US/color.md 与中文版 site/docs/zh-CN/color.md，两者内容一一对应。

文档站中，这一页由 site/pages/color/index.jsx 承载：它继承libs/markdown的Markdown基类，通过document(locale)按当前语言加载对应 md 文件，再经 libs/markdown/index.jsx 中的marked渲染成 HTML；页面在 site/pages/index.jsx 的'color': require('./color')处注册。md 文档内的色卡并不是纯文本，而是内嵌了demo-color-box等 HTML 结构，其视觉样式由同目录下的 site/pages/color/style.scss 提供，色卡实际背景色即由该 SCSS 中的bg-*类定义——这为我们核对文档色值提供了第一手依据。

主色（Main Color）

Element 的主色是鲜艳、友好的蓝色（bright and friendly blue），主要用于品牌标识、主要操作按钮、激活态、链接等核心交互元素。主色包含三个由浅到深的递进色阶：

三个色阶的 SCSS 定义可在 site/pages/color/style.scss 中直接查到：

.bg-blue-light { background-color: #58b7ff; } .bg-blue, .bg-info { background-color: #20a0ff; } .bg-blue-dark { background-color: #1d8ce0; }

从源码看，主色基准值#20A0FF在组件中的复用度最高。以进度条组件 src/progress/Progress.jsx 为例，其stroke()方法在没有任何status时默认返回#20a0ff作为进度条填充色：

stroke(): string { let ret; switch (this.props.status) { case 'success': ret = '#13ce66'; break; case 'exception': ret = '#ff4949'; break; default: ret = '#20a0ff'; } return ret; }

由此可以推断：在 Element React 的默认视觉体系里，#20A0FF承担着"默认/主要"语义色位的角色，与文档中"主色"的定位一致。

辅助色（Secondary Color）

除主色之外，还需要在不同的业务场景中使用场景色（辅助色）——例如用危险色标识危险操作。文档给出四个标准场景色：

注意两点：一是info场景复用主色#20A0FF（见上文 SCSS 中.bg-blue, .bg-info同值）；二是这几个色值与主色一样，都是组件默认配色的事实来源，而非仅停留在文档层面：

• Success#13CE66/ Danger#FF4949：除上文 Progress 的stroke()之外，开关组件测试 src/switch/test/switch_test.jsx 也展示了它们作为onColor/offColor的典型用法：

  onColor="#13ce66" offColor="#ff4949"

• Warning#F7BA2A：评分组件 src/rate/Rate.jsx 的默认colors数组即使用#F7BA2A作为星级图标着色；src/rate/test/rate_test.jsx 也用它做颜色断言。

实际使用建议：success色用于正向反馈（如操作成功提示、完成态进度）、warning色用于需注意的中间态、danger色用于删除、报错等破坏性操作，保持"颜色即语义"的统一认知。

中性色（Neutral Color）

中性色用于文本、背景和边框颜色，通过不同明度的中性色来表现界面中的层次结构。文档将其按明度分成四组、共 11 个色值：

黑色系（深色背景 / 正文文字）

银色系（次级文字 / 图标）

灰色系（边框 / 分割线）

白色系（页面背景 / 卡片）

全部色值同样可以在 site/pages/color/style.scss 中找到对应的.bg-black、.bg-silver、.bg-gray、.bg-white-*类定义。特别地，该 SCSS 中.color-gray { color: #5e6d82 !important; }（site/pages/color/style.scss）还定义了灰色系色卡上的文字颜色，属于文档站展示层细节，正式开发时正文文字建议直接取黑色系色值。

中性色在真实组件中的典型应用有：

• 正文文字：评分组件 src/rate/Rate.jsx 的辅助文字默认色textColor: '#1F2D3D'正是黑色系基准值 Black；
• 禁用态背景：同组件disabledVoidColor: '#EFF2F7'（src/rate/Rate.jsx）对应 Extra Light Gray，用于禁用状态下置灰的星级占位；
• 轨道 / 底槽背景：进度条组件在 src/progress/Progress.jsx 中用stroke="#e5e9f2"绘制进度轨道底色，对应 Light Gray；
• 未选中图标：src/rate/test/rate_test.jsx 中#99A9BF（Light Silver）也作为低分段的置灰配色出现在测试用例里。

这也印证了文档所述的分层逻辑：越靠前的色值（Black 系）越深，适合承载文字与强调；越靠后的色值（Gray、White 系）越浅，适合承载背景与边框。

如何在实际项目中落地这套色板

把文档规范落实到业务代码中，可以遵循以下三个层次：

1. 直接复用组件默认值：绝大多数内置组件已经内置了主色与辅助色（如 Progress 的status、Switch 的onColor/offColor、Rate 的colors），无需额外传色即可获得统一观感；
2. 需要自定义时引用文档色值：传色时优先从本文三张表取值，例如进度条自定义color、开关自定义开关色、评分自定义分段颜色，避免随意引入文档色板之外的"野生色值"；
3. 查阅/修改文档站色卡：色卡类名与色值的完整映射集中在 site/pages/color/style.scss，可以作为"文档声明 vs 实际渲染"不一致时对账的第一入口；文档源文件则位于 site/docs/en-US/color.md 与 site/docs/zh-CN/color.md。

需要说明的是：本文所有色值、类名与组件默认值均以当前仓库 src 与 site 目录中的实际内容为准，组件内部对色值的硬编码（如 Progress 的stroke()）是组件默认实现，业务中仍可通过 props 覆盖。

小结

• 主色为蓝色系三阶（#58B7FF→#20A0FF→#1D8CE0），#20A0FF是默认主色位；
• 辅助色四场景（#20A0FF/#13CE66/#F7BA2A/#FF4949），分别对应信息、成功、警告、危险；
• 中性色四组 11 值，按"深色文字 → 浅色背景"的梯度组织层次结构；
• 所有色值都有文档站 SCSS 类与组件源码（Progress、Rate、Switch）双重印证，可作为团队统一视觉规范的可靠基准。