UI配色要先解决三个问题：用户先看哪里、哪些地方可以操作、当前处于什么状态。比较稳妥的做法是先用中性色搭好文字与背景，再用一个主色突出关键操作，最后给成功、警告、错误分配固定颜色。选好一组色块只是起点；颜色放进真实按钮、表格和输入框后，仍要检查文字是否清楚、状态是否冲突、整页是否出现太多视觉重点。
品牌已经给出主色时，也不必把它铺满整个页面。可以先在墨刀设计的界面画布搭一页订单工作台，把主按钮、选中项、正文、边框和错误提示放在一起，再决定这套颜色是否适合实际使用。
先分配颜色角色，再挑具体色值
同一个蓝色可以代表品牌，也可以代表链接或选中状态，但这些用途不能只靠设计师记忆。需要先约定每种颜色承担的角色，才能让不同页面保持一致。
Material Design的颜色角色把颜色组织为主色、表面色、错误色及对应的前景色等。这个思路适用于自建配色：按钮背景与按钮文字要成对确定，不能只选一块漂亮的背景色。
- 主操作色：用于当前页面最重要的操作，例如“新建订单”。次要操作可以用描边或文字，避免与主操作争抢注意力。
- 中性色：承担页面背景、卡片、正文、辅助信息和分隔线。业务系统的大部分信息靠它们建立层级。
- 状态色：表达成功、警告和错误。它们应和明确文案或图标一起出现，而不是让用户猜一个红点是什么意思。
- 选中与聚焦色：说明“当前选了什么”和“键盘正在操作哪里”。选中行可以用浅底色，焦点需要清楚的轮廓，二者不是同一个状态。
“主色占60%、辅助色占30%、强调色占10%”不适合作为所有UI的硬性公式。表格密集的工作台、图片主导的商城和阅读页面，信息密度不同；让颜色服从任务，比凑面积比例更有用。
一套可以直接练习的浅色工作台配色
下面以订单管理页面为例：页面包含导航、订单列表、状态标签和“新建订单”按钮。配色采用蓝色主操作、中性灰文字及独立的状态色。它是一套练习起点，具体品牌仍应在自己的页面内容和设备上调整。
| 角色 | 色值 | 放在哪里 | 搭配要求 |
|---|---|---|---|
| 页面背景 | #F8FAFC | 内容区外层背景 | 与白色卡片形成轻微层次 |
| 卡片表面 | #FFFFFF | 表格、表单、弹窗 | 正文使用深色，不靠阴影区分全部信息 |
| 主要文字 | #0F172A | 标题、订单号、重要金额 | 在白底上保持清楚 |
| 辅助文字 | #475569 | 日期、说明、次要字段 | 仍然要可读，不能浅到接近背景 |
| 主操作 | #2563EB | “新建订单”实心按钮 | 配白色文字；悬停可用#1D4ED8 |
| 功能边界 | #64748B | 需要单靠轮廓辨认的输入区域边界 | 边界要能从白底中辨认 |
| 装饰分隔 | #E2E8F0 | 已有清楚分组的辅助分隔线 | 不把它作为输入框唯一的识别边界 |
| 成功 | #166534 | “已完成”文字与图标 | 搭配状态文字，避免只留绿色圆点 |
| 错误 | #B91C1C | “付款失败”及表单错误 | 同时说明原因与恢复办法 |
| 警告 | #92400E / #FEF3C7 | 深色文字与浅黄色提示底 | 用于“待确认”等需要留意的信息 |
这张表刻意没有给每个模块各配一种亮色。订单页上，蓝色主要引导操作，状态色解释业务结果；订单号、金额和日期仍靠字号、字重、位置建立层级。这样用户不会把一排彩色标签误认成一排按钮。
品牌色很亮，或者品牌色本身就是红色，怎么办？
品牌色不一定能直接成为小字号白字按钮的背景。浅黄、亮绿、亮蓝在海报里很醒目，放进界面后可能与白字对比不足。可以保留原色用于品牌装饰，同时选择同色系更深的操作色；也可以在亮色按钮上使用经过检查的深色文字。
如果品牌色是红色，不必强行改成蓝色。但要避免把所有红色都解释成错误：主按钮保持固定位置和完整动作文案，错误提示则靠近出错字段，附带错误图标与原因。例如主操作是“提交订单”，错误提示是“手机号不足11位，请补全后重试”。让位置、形状和文字共同表达含义，比要求用户辨认两种很接近的红色更可靠。
一页中有两个重要动作时，也不一定需要两种鲜艳颜色。可以把常用主动作做成实心按钮，把“导出订单”做成描边按钮，把“查看帮助”做成文字链接。先分操作优先级，再决定视觉强弱。
对比度要看一对颜色，不能只看单独的色块
对比度是前景和背景之间的关系。相同灰字在白底上可能清楚，放到浅灰禁用底上就未必合适。检查时应使用最终色值；文字或背景存在透明度、图片和渐变时，还要考虑合成后的实际背景。
按照WCAG 2.2的文字对比度要求，普通文字通常需要至少4.5:1，大文字至少3:1。大文字有具体尺寸定义，不能把“视觉上像标题”直接算作大文字；不确定时，按4.5:1检查更省事。
| 本文的前景与背景组合 | 计算对比度 | 怎么理解 |
|---|---|---|
| 白字 / #2563EB主按钮 | 约5.17:1 | 这对不透明颜色满足普通文字4.5:1阈值 |
| #475569辅助文字 / 白底 | 约7.58:1 | 辅助信息可以有层级，但仍清楚可读 |
| #B91C1C错误文字 / 白底 | 约6.47:1 | 错误说明不必做成刺眼的大红底 |
| #92400E警告文字 / #FEF3C7浅黄底 | 约6.37:1 | 提示色也要检查文字与提示底的组合 |
这些数值按不透明sRGB色值计算，展示值作了四舍五入，判定使用未舍入结果。它们只说明相应颜色组合的对比度，不能代表整页的所有可访问性问题都已解决。换了透明度或背景，就需要重新计算。
还要分别看输入框边界、图标和焦点。文字对比足够，并不意味着用户一定能发现输入区域。如果界面只能靠一条很浅的线辨认输入框，应加强边界；如果布局和标签已经清楚地形成分组，装饰分隔线则不必和正文一样醒目。
颜色要覆盖操作状态，不能只画默认态
不少配色方案在静态稿里好看，一到实际操作就混乱：选中项和错误项都是红色，加载中的按钮突然变成灰色，用户无法判断是正在提交还是被禁止操作。可以先把一个主按钮和一个输入框的状态排出来。
| 状态 | 颜色应该解决什么 | 同时补充的信息 |
|---|---|---|
| 默认 | 主动作明确，次动作退后 | 具体动作词，例如“新建订单” |
| 悬停 / 按下 | 让用户感知当前可操作对象 | 鼠标状态与触摸按下状态分别考虑 |
| 键盘聚焦 | 焦点轮廓与组件、页面背景都能区分 | 保持轮廓可见，不能只改变一点底色 |
| 提交中 | 保持动作身份，避免看起来像失效 | “提交中”与进度反馈，防止重复提交 |
| 不可用 | 和可用操作区分 | 必要时说明为什么不可用、如何恢复 |
| 出错 | 标出具体出错位置 | 保留用户输入，给出修正方法 |
“禁用态一律降低到30%透明度”也不是通用规则。透明度改变后，文字、图标和背景会一起变浅；先判断是否确实需要禁用，再检查用户能否理解不可用的原因。
在墨刀设计里，把配色表变成一页能检查的界面
- 先搭无彩色结构。用真实字段完成导航、订单列表、筛选和主操作。如果去掉颜色就完全看不出层级，应先调整位置、间距和字重。
- 给高频用途建立颜色变量。先处理正文、辅助文字、页面背景、卡片、主操作和状态色。名称描述用途，例如“文字/主要”“操作/主按钮”，避免所有页面都直接写一个“蓝色1”。
- 把变量应用到组件。用同一个按钮组件表现默认、悬停和不可用状态；给输入框、标签和选中项建立相应样式。修改颜色后检查关联组件，避免出现同名不同色。
- 替换成有压力的业务内容。同时放入“已完成”“待确认”“付款失败”，再加入长订单名、较大金额和多行说明。观察状态是否挤掉正文、多个强调色是否让整页失去主次。
- 以实际显示尺寸检查。不要只在放大的画布上看色块。查看页面正常阅读尺寸和手机宽度，逐对检查主要文字、按钮与提示色，再让同事指出第一眼想点击的位置。
墨刀设计提供颜色变量、组件与自动布局等能力，适合把这一过程留在同一份设计文件里。自动布局解决内容和尺寸变化，变量帮助统一颜色；它们不会替代配色判断，也不应被理解为自动完成对比度审核。
需要暗色模式时，沿用相同的用途名称，分别为暗色背景、文字和状态设置合适值，不要简单把整页反相。具体组织方法可以继续看深浅主题与颜色变量设计。
最常见的三种配色返工，怎样提前避免
页面很好看，但找不到主操作。通常是状态标签、促销信息、导航和按钮都用了高饱和色。先把非操作内容降为中性色或浅底标签，再看“新建订单”是否成为明确入口。
配色统一了，内容却难读。常见原因是把辅助文字做得过浅，或直接把品牌亮色用作小字。保留品牌色的识别位置，把需要阅读的文字换成足够清楚的前景色。
同一颜色在不同页面含义不同。例如绿色有时是成功、有时是优惠、有时又是主按钮。把常用颜色按用途记录在配色表中，再检查跨页面复用。确实需要不同用途时，借助文字、形状和位置区分，不能仅凭颜色传达关键含义。
开始做第一套UI配色时，不需要先收集几十种调色板。选一页真实界面，把上述角色、色值和状态配完整，再扩展到其他页面；这样得到的颜色体系更容易落地，也更容易在评审时说明每一种颜色为什么存在。
