尧图网站建设 
【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载Element React 通过一套固定的调色板Palette统一定义产品界面中的颜色避免不同页面、不同组件之间出现视觉传达差异。本文以 site/docs/en-US/color.md 为骨架结合仓库内文档渲染代码与组件源码完整梳理主色、辅助色、中性色三组色系的色值、用途以及它们在真实组件Progress、Rate、Switch中的落地方式帮助你在自定义主题或业务组件时准确复用这套色板。色彩体系概述Element 色彩体系的核心思想是用一套预先规定好的颜色为所搭建的产品提供一致的外观视觉感受。整个体系分为三层层级作用文档对应章节主色Main Color品牌与交互主色调明亮友好### Main Color辅助色Secondary Color表达场景语义成功、警告、危险等### Secondary Color中性色Neutral Color用于文本、背景和边框表现层次结构### Neutral Color该文档在仓库中同时维护英文版 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 ColorElement 的主色是鲜艳、友好的蓝色bright and friendly blue主要用于品牌标识、主要操作按钮、激活态、链接等核心交互元素。主色包含三个由浅到深的递进色阶色名色值演示类名Light Blue浅蓝#58B7FF.bg-blue-lightBlue蓝色主色基准#20A0FF.bg-blueDark Blue深蓝#1D8CE0.bg-blue-dark三个色阶的 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除主色之外还需要在不同的业务场景中使用场景色辅助色——例如用危险色标识危险操作。文档给出四个标准场景色场景色名色值演示类名信息 / 主要Blue#20A0FF.bg-info成功Success#13CE66.bg-success警告Warning#F7BA2A.bg-warning危险Danger#FF4949.bg-danger注意两点一是info场景复用主色#20A0FF见上文 SCSS 中.bg-blue, .bg-info同值二是这几个色值与主色一样都是组件默认配色的事实来源而非仅停留在文档层面Success#13CE66/ Danger#FF4949除上文 Progress 的stroke()之外开关组件测试 src/switch/test/switch_test.jsx 也展示了它们作为onColor/offColor的典型用法onColor#13ce66 offColor#ff4949Warning#F7BA2A评分组件 src/rate/Rate.jsx 的默认colors数组即使用#F7BA2A作为星级图标着色src/rate/test/rate_test.jsx 也用它做颜色断言。实际使用建议success色用于正向反馈如操作成功提示、完成态进度、warning色用于需注意的中间态、danger色用于删除、报错等破坏性操作保持颜色即语义的统一认知。中性色Neutral Color中性色用于文本、背景和边框颜色通过不同明度的中性色来表现界面中的层次结构。文档将其按明度分成四组、共 11 个色值黑色系深色背景 / 正文文字色名色值演示类名Black#1F2D3D.bg-blackLight Black#324057.bg-black-lightExtra Light Black#475669.bg-black-lighter银色系次级文字 / 图标色名色值演示类名Silver#8492A6.bg-silverLight Silver#99A9BF.bg-silver-lightExtra Light Silver#C0CCDA.bg-silver-lighter灰色系边框 / 分割线色名色值演示类名Gray#D3DCE6.bg-grayLight Gray#E5E9F2.bg-gray-lightExtra Light Gray#EFF2F7.bg-gray-lighter白色系页面背景 / 卡片色名色值演示类名Dark White#F9FAFC.bg-white-darkWhite#FFFFFF.bg-white全部色值同样可以在 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: #EFF2F7src/rate/Rate.jsx对应 Extra Light Gray用于禁用状态下置灰的星级占位轨道 / 底槽背景进度条组件在 src/progress/Progress.jsx 中用stroke#e5e9f2绘制进度轨道底色对应 Light Gray未选中图标src/rate/test/rate_test.jsx 中#99A9BFLight Silver也作为低分段的置灰配色出现在测试用例里。这也印证了文档所述的分层逻辑越靠前的色值Black 系越深适合承载文字与强调越靠后的色值Gray、White 系越浅适合承载背景与边框。如何在实际项目中落地这套色板把文档规范落实到业务代码中可以遵循以下三个层次直接复用组件默认值绝大多数内置组件已经内置了主色与辅助色如 Progress 的status、Switch 的onColor/offColor、Rate 的colors无需额外传色即可获得统一观感需要自定义时引用文档色值传色时优先从本文三张表取值例如进度条自定义color、开关自定义开关色、评分自定义分段颜色避免随意引入文档色板之外的野生色值查阅/修改文档站色卡色卡类名与色值的完整映射集中在 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双重印证可作为团队统一视觉规范的可靠基准。赞分享【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载相关推荐Element 色彩体系完全指南主色、辅助色与中性色的设计规范与源码实现Element 色彩体系完全指南主色、辅助色与中性色的设计规范与源码实现 导读 色彩是 UI 组件库最直观的品牌语言。ElementA Vue.js 2.0前端UI组件设计系统Element 色彩系统全解析主色、辅助色与中性色在 Vue 2.0 UI 库中的设计与实践Element 色彩系统全解析主色、辅助色与中性色在 Vue 2.0 UI 库中的设计与实践 ElementElement UI是一套基于 Vue.js前端UI组件设计系统Ant Design色彩系统终极指南主色、辅助色与功能色的完美应用规范Ant Design色彩系统终极指南主色、辅助色与功能色的完美应用规范 Ant Design作为企业级UI设计语言和React组件库其精心设计的色彩系统是构前端UI组件设计系统上一篇Open Agents web_fetch 工具指南如何让 AI 安全获取外部网页内容下一篇MODNet实时人像分割3分钟从零到专业级抠图体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Element React 色彩规范：主色、辅助色与中性色全解析
【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载Element React 通过一套固定的调色板Palette统一定义产品界面中的颜色避免不同页面、不同组件之间出现视觉传达差异。本文以 site/docs/en-US/color.md 为骨架结合仓库内文档渲染代码与组件源码完整梳理主色、辅助色、中性色三组色系的色值、用途以及它们在真实组件Progress、Rate、Switch中的落地方式帮助你在自定义主题或业务组件时准确复用这套色板。色彩体系概述Element 色彩体系的核心思想是用一套预先规定好的颜色为所搭建的产品提供一致的外观视觉感受。整个体系分为三层层级作用文档对应章节主色Main Color品牌与交互主色调明亮友好### Main Color辅助色Secondary Color表达场景语义成功、警告、危险等### Secondary Color中性色Neutral Color用于文本、背景和边框表现层次结构### Neutral Color该文档在仓库中同时维护英文版 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 ColorElement 的主色是鲜艳、友好的蓝色bright and friendly blue主要用于品牌标识、主要操作按钮、激活态、链接等核心交互元素。主色包含三个由浅到深的递进色阶色名色值演示类名Light Blue浅蓝#58B7FF.bg-blue-lightBlue蓝色主色基准#20A0FF.bg-blueDark Blue深蓝#1D8CE0.bg-blue-dark三个色阶的 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除主色之外还需要在不同的业务场景中使用场景色辅助色——例如用危险色标识危险操作。文档给出四个标准场景色场景色名色值演示类名信息 / 主要Blue#20A0FF.bg-info成功Success#13CE66.bg-success警告Warning#F7BA2A.bg-warning危险Danger#FF4949.bg-danger注意两点一是info场景复用主色#20A0FF见上文 SCSS 中.bg-blue, .bg-info同值二是这几个色值与主色一样都是组件默认配色的事实来源而非仅停留在文档层面Success#13CE66/ Danger#FF4949除上文 Progress 的stroke()之外开关组件测试 src/switch/test/switch_test.jsx 也展示了它们作为onColor/offColor的典型用法onColor#13ce66 offColor#ff4949Warning#F7BA2A评分组件 src/rate/Rate.jsx 的默认colors数组即使用#F7BA2A作为星级图标着色src/rate/test/rate_test.jsx 也用它做颜色断言。实际使用建议success色用于正向反馈如操作成功提示、完成态进度、warning色用于需注意的中间态、danger色用于删除、报错等破坏性操作保持颜色即语义的统一认知。中性色Neutral Color中性色用于文本、背景和边框颜色通过不同明度的中性色来表现界面中的层次结构。文档将其按明度分成四组、共 11 个色值黑色系深色背景 / 正文文字色名色值演示类名Black#1F2D3D.bg-blackLight Black#324057.bg-black-lightExtra Light Black#475669.bg-black-lighter银色系次级文字 / 图标色名色值演示类名Silver#8492A6.bg-silverLight Silver#99A9BF.bg-silver-lightExtra Light Silver#C0CCDA.bg-silver-lighter灰色系边框 / 分割线色名色值演示类名Gray#D3DCE6.bg-grayLight Gray#E5E9F2.bg-gray-lightExtra Light Gray#EFF2F7.bg-gray-lighter白色系页面背景 / 卡片色名色值演示类名Dark White#F9FAFC.bg-white-darkWhite#FFFFFF.bg-white全部色值同样可以在 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: #EFF2F7src/rate/Rate.jsx对应 Extra Light Gray用于禁用状态下置灰的星级占位轨道 / 底槽背景进度条组件在 src/progress/Progress.jsx 中用stroke#e5e9f2绘制进度轨道底色对应 Light Gray未选中图标src/rate/test/rate_test.jsx 中#99A9BFLight Silver也作为低分段的置灰配色出现在测试用例里。这也印证了文档所述的分层逻辑越靠前的色值Black 系越深适合承载文字与强调越靠后的色值Gray、White 系越浅适合承载背景与边框。如何在实际项目中落地这套色板把文档规范落实到业务代码中可以遵循以下三个层次直接复用组件默认值绝大多数内置组件已经内置了主色与辅助色如 Progress 的status、Switch 的onColor/offColor、Rate 的colors无需额外传色即可获得统一观感需要自定义时引用文档色值传色时优先从本文三张表取值例如进度条自定义color、开关自定义开关色、评分自定义分段颜色避免随意引入文档色板之外的野生色值查阅/修改文档站色卡色卡类名与色值的完整映射集中在 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双重印证可作为团队统一视觉规范的可靠基准。赞分享【免费下载链接】element-reactElement UI项目地址https://gitcode.com/gh_mirrors/el/element-react点击查看免费下载相关推荐Element 色彩体系完全指南主色、辅助色与中性色的设计规范与源码实现Element 色彩体系完全指南主色、辅助色与中性色的设计规范与源码实现 导读 色彩是 UI 组件库最直观的品牌语言。ElementA Vue.js 2.0前端UI组件设计系统Element 色彩系统全解析主色、辅助色与中性色在 Vue 2.0 UI 库中的设计与实践Element 色彩系统全解析主色、辅助色与中性色在 Vue 2.0 UI 库中的设计与实践 ElementElement UI是一套基于 Vue.js前端UI组件设计系统Ant Design色彩系统终极指南主色、辅助色与功能色的完美应用规范Ant Design色彩系统终极指南主色、辅助色与功能色的完美应用规范 Ant Design作为企业级UI设计语言和React组件库其精心设计的色彩系统是构前端UI组件设计系统上一篇Open Agents web_fetch 工具指南如何让 AI 安全获取外部网页内容下一篇MODNet实时人像分割3分钟从零到专业级抠图体验创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考