--- id: "semantic" title: "全局色彩与使用规则" category: "基础视觉" document_type: "component-specification" spec_status: "local-current-draft" element_ui: "2.15.6" vue: "2.6.14" page: "../index.html#spec-semantic" source_data: "../component-data.json" official_components: [] template_components: [] scenario_count: 10 verification: "scenario-checklist-not-full-test-pass" --- # 全局色彩与使用规则 专题 `semantic` · 基础视觉 · Element UI 2.15.6 ## 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 本专题为基础规则、同一组件的补充场景或组合模式，不作为独立的 Element UI 官方组件声明。 ## 通用基线 - 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。 - 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。 - 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。 - 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。 - 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。 - 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。 - 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。 - 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。 - 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。 - 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。 - 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。 ## 本页用法与分类 默认用法：先按主色、辅助功能色、中性色查公共色板，再按文字、背景、边框和交互状态查使用条件；全后台复用同一套16个基础色值。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 色板归属 | 主色3个、辅助功能色3个、中性色10个 | 用于管理基础色值；不同组件按用途复用，不各自新增色板。 | | 文字角色 | 正文、说明、操作、状态、空值、占位与禁用 | 正文与有效零值用正文深灰，只读不变淡；操作和反馈按真实语义取色。 | | 背景与边框 | 内容底、工作区、表头、悬停、选中、控件边框 | 按容器用途和真实状态使用已有色值；选中浅蓝不作为斑马纹。 | | 叠加优先级 | 禁用、错误与聚焦、选中与悬停 | 禁用阻断交互；错误边框优先于聚焦蓝；选中底优先于悬停底。 | 使用边界：文字颜色统一在本页维护；字号与字体见“字体、字号、字重与行高”。状态变化不是主色与辅助色的任意切换，规范页装饰也不是业务可选主题。 ## 组件规则 - **SEMANTIC-R01**：全局颜色统一在本页维护：主色系3个、辅助功能色3个、中性色10个，共16个基础色值。文字、背景、边框和反馈按用途复用，不为不同组件新增近似色；遮罩35%与阴影12%从外壳深色派生。 - **SEMANTIC-R02**：状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **SEMANTIC-R03**：蓝色表示可交互或当前选择，不是所有“启用”文字都必须变蓝。功能反馈必须同时有文案；无需强调的状态保持正文色。 - **SEMANTIC-R04**：详细数值、归属、迁移映射见本专题色板表。 - **SEMANTIC-R05**：主要内容及标题 正文深灰 #303133；必要说明 辅助深灰 #595959；空值“无” 空值灰 #909399；占位/禁用 禁用灰 #C0C4CC。 - **SEMANTIC-R06**：普通链接统一 操作蓝 #3377BB；删除/移除危险文字用 #F56C6C；正文链接14px/400；次级操作12px/400。金额、账号不额外加粗；有效零值不得变成空值灰。 - **SEMANTIC-R07**：不用透明度、灰蓝色或浅灰来弱化正文。字段错误提示使用 错误红；普通说明用 辅助深灰，详细错误原因可用 正文深灰，保留错误文案及功能图标。 - **SEMANTIC-R08**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **SEMANTIC-R09**：【默认】正文 正文深灰；标题 正文深灰 + 600；说明 辅助深灰；次级操作 操作蓝 + 12px/400。 - **SEMANTIC-R10**：【交互】主要控件默认使用主题蓝；表格行和候选项悬停使用浅灰背景，持续选中使用各组件规定的选中样式。主按钮悬停使用操作蓝，普通按钮悬停使用选中浅蓝底、操作蓝文字和主题蓝边框，文字动作悬停加下划线。输入类聚焦只改原边框为主题蓝；其他可交互控件按各专题保留键盘焦点提示。 - **SEMANTIC-R11**：【边界】非交互说明没有悬停、按下或选中状态；不可因鼠标经过而变蓝。 - **SEMANTIC-R12**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 - **SEMANTIC-R13**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。 - **SEMANTIC-R14**：示例与文档不一致时属于待修复缺陷；禁止以“说明已更新”代表所有页面已迁移。每次改动需同时检查规则、实际计算样式、鼠标与键盘、下拉弹层以及复制下载文档。 - **SEMANTIC-R15**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。 - **SEMANTIC-R16**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。 - **SEMANTIC-R17**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。 - **SEMANTIC-R18**：主题蓝、操作蓝、选中浅蓝都属于同一个主色系，分别服务于主要控件、链接/悬停和选中背景；它们不是成功绿、警告橙、错误红这组辅助功能色。交互状态不等于颜色分类，按钮按下也不等于持续选中。 - **SEMANTIC-R19**：主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 - **SEMANTIC-R20**：提醒角标复用 #F56C6C 与白字，不新增红色色阶；红点表示新动态，数字角标表示未读数量，不能据此判断业务失败。具体尺寸、定位、计数与清除规则只在“标签与角标”专题（#spec-tags）维护。 ## 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **SEMANTIC-S01**：默认 / 悬停 / 激活 / 聚焦 / 选中浅蓝 / 禁用灰 - [ ] **SEMANTIC-S02**：品牌色与语义色映射 / 文案冗余 / 实际背景对比度 / 升级色值回归 - [ ] **SEMANTIC-S03**：核对本专题每个适用状态引用公共色值；禁用/错误+聚焦/选中+悬停组合按优先级检查。 - [ ] **SEMANTIC-S04**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。 - [ ] **SEMANTIC-S05**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。 - [ ] **SEMANTIC-S06**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。 - [ ] **SEMANTIC-S07**：未保存字段、待上传附件和已保存记录都先验证居中确认与取消保留；确认后再验证删除结果、可用的撤销及失败重试。入口颜色不代替确认流程。 - [ ] **SEMANTIC-S08**：当前示例核对文字角色表的色值与用途；有效零值到字体阅读样例核对，只读、占位与禁用到输入框专题核对，不能把角色表说明当作这些状态的交互实例。 - [ ] **SEMANTIC-S09**：接入验收：在实际背景上核对文字可读性，不通过透明度弱化正文。 - [ ] **SEMANTIC-S10**：接入验收：普通链接与危险文字动作保留各自语义色；错误红配明确错误文案，状态不只靠颜色。 ### 专题验收重点 同时核对色板归属与使用角色：正文、有效零值、只读值不变淡；占位、禁用、空值分开；状态色配文案。对比度按实际背景检查。 ## 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html

先控制数量，再统一使用

颜色仅从公共色值引用：主色系3个基础色值、辅助功能色3个、中性色10个，共16个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停或不同字段再新增近似颜色。遮罩35%与阴影12%从外壳深色派生。

“主色 / 辅助色 / 中性色”是色板归属；“文字 / 背景 / 边框 / 交互 / 反馈”是用途。它们是两个维度，不是每个组件各自再建一套主辅色。

色板归属 公共色值 / 色值 使用条件
主色 --ui-primary
#409EFF 		主按钮默认/按住/加载、勾选、开关开启、焦点边框
主色 --ui-action
#3377BB 		文字链接、次级操作、主按钮悬停及键盘焦点；与主题蓝同属主色系
主色 --ui-selected
#ECF5FF 		选中行、已选菜单底、日期范围；不是斑马纹
辅助色／功能反馈 --ui-success
#67C23A 		成功图标、完成进度、已完成标识
辅助色／功能反馈 --ui-warning
#E6A23C 		警告图标、需注意标识；不用于普通待处理
辅助色／功能反馈 --ui-danger
#F56C6C 		错误边框、错误提示、必填符号、失败图标、无框红字删除与危险按钮边框
中性色 --ui-body
#303133 		正文、字段名、数值、标题；层级用字号字重
中性色 --ui-help
#595959 		必须阅读的辅助说明、计数、说明性图标
中性色 --ui-muted
#909399 		无、非关键空值、非交互装饰图标；不用于正文
中性色 --ui-disabled
#C0C4CC 		禁用文字、占位符、不可用图标、未选评分
中性色 --ui-white
#FFFFFF 		内容、输入、弹层底；填充按钮的反白文字
中性色 --ui-workspace
#F1F3F6 		页面内容外的工作区背景
中性色 --ui-subtle
#F5F7FA 		表头、悬停底、禁用底；同色不同角色
中性色 --ui-border
#DCDFE6 		输入、按钮、卡片边框及骨架占位；悬停边框也复用，不新增灰
中性色 --ui-divider
#EBEEF5 		表格分隔、选项分隔、步骤未完成连线；骨架轻微动效的亮部
中性色／外壳专用 --ui-shell
#00162A 		深色侧栏；组件内容区不引用

文字颜色与使用边界

以下按阅读角色选择颜色。不可用透明度、额外加粗或整页缩放改变正文轻重；普通文字不因鼠标经过而变蓝。

文字角色 统一颜色 使用边界
正文、字段名、数值、标题与只读值 #303133 有效零值保持正文色；标题靠字号和字重表达层级。
辅助说明、计数 #595959 次要解释使用辅助深灰；承载主要结论的内容仍使用正文色。
空值“无” #909399 仅表示没有内容，不能把0或只读值显示成空值灰。
占位提示与禁用文字 #C0C4CC 占位不是已填值；禁用表示当前不可操作，只读不使用禁用灰。
普通链接与次级操作 #3377BB 正文中的链接14px；查看更多、编辑、详情等次级操作12px，字重均为400。
危险文字与错误短提示 #F56C6C 删除、移除使用12px红字；错误必须配明确文案，详细解释仍用正文色。
成功短状态 #67C23A 仅用于真实成功或完成的短状态与图标；长说明使用正文色。
警告短状态 #E6A23C 有明确风险或需注意事项时使用；普通待处理不自动使用警告色。
填充按钮内文字 #FFFFFF 只用于规定的有色填充背景；不在白底内容区使用。

字体、字号、字重和行高统一查看 字体规范；输入框、按钮和标签的具体交互查看各自专题。

状态不是另一套色板

状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。

现有原型的收敛映射

当前散落值 统一引用 适用范围
#1990FF / #1592F4 / #409EFF 主题蓝 主题填充与选中标识
#1677D2 / #245DCC / #3377BB / #3A8EE6 操作蓝 文字交互与主按钮悬停
#1F2329 / #303133 正文深灰 标题与正文，字重分层
#606266 / #616266 正文深灰 或 辅助深灰 按内容角色迁移，不能全局替换
#FAFAFA / #F5F7FA 浅灰背景 表头与轻背景
#DFE3E8 / #DCDFE6 边框灰 控件边框
#C0C4CD / #C0C4CC 禁用灰 占位与禁用

此表是新公共规则及迁移目标；业务原型尚有历史值，不能据此宣称所有业务页已完成迁移。红色标注圆点属于评审工具，不进入产品色板；品牌素材、图表系列及深色主题需要单独明确需求，不能借机新增通用色。

对比度边界

功能色用于图标、边框、进度以及明确的短状态反馈。字段错误提示及短状态文案使用对应功能色，较长解释使用 正文深灰；同时写明“失败 / 成功”等文案。下面按白底计算文字对比度；白字主按钮仍有已知对比度限制，不将当前样板称为完整无障碍认证。

``` ## 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ## 来源与关联 - 来源线索：历史样板规范 10 / 43–46 / 76；W3C Contrast Minimum；原“文字颜色与使用边界”专题已合并，旧入口转至本页。 - [打开本专题页面](../index.html#spec-semantic) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`semantic`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) ## 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 默认 | 正文 正文深灰；标题 正文深灰 + 600；说明 辅助深灰；次级操作 操作蓝 + 12px/400。 | | 交互 | 主要控件默认使用主题蓝；表格行和候选项悬停使用浅灰背景，持续选中使用各组件规定的选中样式。主按钮悬停使用操作蓝，普通按钮悬停使用选中浅蓝底、操作蓝文字和主题蓝边框，文字动作悬停加下划线。输入类聚焦只改原边框为主题蓝；其他可交互控件按各专题保留键盘焦点提示。 | | 边界 | 非交互说明没有悬停、按下或选中状态；不可因鼠标经过而变蓝。 | | 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 | | 主按钮状态顺序 | 主按钮状态固定为：默认主题蓝 #409EFF；悬停操作蓝 #3377BB；鼠标按住时恢复主题蓝 #409EFF，并下移1px；松开后若仍悬停则回到操作蓝，移出回到默认。仅键盘定位时保留当前填充并显示操作蓝2px外圈，普通鼠标点击不显示外圈；加载保持主题蓝并防重复，禁用用浅灰底和禁用灰文字。 | | 有效内容 | 正文、字段值和标题使用正文深灰；必要说明使用辅助深灰，零值不变成空值灰。 | | 空值与不可用 | 空值提示使用空值灰；占位和禁用使用禁用灰；只读仍使用正文深灰，不能用禁用灰代替。 | | 普通与危险操作 | 普通操作使用操作蓝，删除/移除等危险操作使用错误红；次级操作统一12px/400，悬停加下划线且保留原语义色。 | | 状态提示 | 真实成功、警告和失败的图标或独立短状态标识分别使用成功绿、警告橙和错误红，并保留明确文案；详细说明使用正文深灰。 | 仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ## 业务落地场景 - [会员列表 · 会员正文、操作蓝、禁用文字及选中行用色](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)