一个主色起步，剩下的七类色值分四个节点补齐

一家做工业自动化设备的客户，品牌手册总共八页，颜色部分只有一行：主色 Pantone 2935C，CMYK 100/60/0/0。设计稿开工第一天，这一行就是全部依据。三周后第一版页面出来，评审会上市场部提了个问题——表格的隔行底色、禁用状态的按钮、报错提示的红字，这些颜色是从哪来的？答案是设计师当场取的。整站数下来，除了那个主色，另外还多出了二十七个色值，没有一个写在手册里。

立项前：先列清楚这个主色要出现在哪些地方

拿到品牌手册的第一件事不是打开设计工具，是列一张承载场景清单。同一个主色至少要跑六个场地：官网页面、公众号文章头图、展会背板、PDF 产品样本、邮件签名、招聘平台的企业主页。前两个是屏幕自发光，中间两个是印刷或喷绘，后两个受第三方平台模板限制。手册里那组 CMYK 值是给印刷用的，直接机械转换成 RGB，在屏幕上通常会偏暗、偏浊，蓝色系尤其明显。

这一步该定下来的是：印刷主色作为锚点保留，屏幕端另取一个值，允许和印刷色有 3 到 5 的色差，换来屏幕上更干净的显色。同时要在网站设计的需求文档里写明一句——本项目色彩系统以屏幕值为准，印刷物料另行对色。这句话不写，后面市场部拿着印好的画册和显示器比对，会来回折腾两三轮。

这个节点最常见的失误是把选主色当成唯一任务，做完就散会。实际上主色只决定了整套系统的一个点，真正决定页面好不好用的，是接下来那些没人在会上提的中性色。

设计中：主色扩成色阶，但真正干活的是灰

主色先扩明度阶，常规做法是拉九档，编号 50 到 900。落到实际页面上高频使用的只有四档：主按钮用 500，鼠标悬停用 600，按下瞬间用 700，浅色底块和选中行用 50。剩下五档是给图表、标签、进度条这类组件备着的，不是每个项目都会用满。

比色阶更要紧的是中性灰，一套企业站六到七档就够：页面大底 #F7F8FA，卡片和分隔区 #EDEFF2，边框和分割线 #D8DCE3，次要文字与占位符 #8A93A0，正文 #3D4450，标题 #1F2430。这六个值承担了整个页面九成以上的面积，主色反倒只是点缀。加上成功、警告、错误、提示四个语义色各取两档，一个企业站的色值总量落在十八到二十二个之间，这个数字是合理的。

失误往往出在灰上。设计稿交付时，同一种灰会冒出十来个近似值，#333333、#353535、#363A40 混着用，肉眼几乎分不出，前端只能照着取色，一个个写进样式表。这些近似值不会在评审会上被发现，因为它们看起来都对；它们会在半年后改版时暴露——想把全站正文颜色调深一点，得改十一处而不是一处。所以网站设计阶段就要强制一件事：设计工具里的颜色必须挂在样式变量上，不允许手动输入十六进制。

中性灰没归并干净，直接影响的是下一个节点。对比度检查是拿具体色值去算的，色值有十一个版本，就得算十一遍，其中总有几个是不合格的。

上线前两周：对比度和跨端色差要一起过一遍

无障碍标准里正文对比度要求不低于 4.5 比 1，18 像素以上的大字可以放宽到 3 比 1。麻烦在于企业站爱用的那类中蓝、青蓝做主色，配白字做按钮时对比度经常只有 3.2 左右，不达标。解决办法不是换主色，是按钮底改用 600 或 700 那一档，主色 500 留给背景块和图标，浅色的 50 只做底纹。

检查范围要定量：抽十二个页面模板，每个模板查五个位置——正文、次要文字、按钮上的文字、表单占位符、页脚小字，一共六十个点。经验上挂得最多的是表单占位符和禁用状态，这两处的对比度常年在 2.1 到 2.8 之间，因为设计时默认它们「本来就该淡一点」。淡是可以的，但占位符里通常写着输入格式提示，看不清就等于没写。

跨端色差要单独抽半天。部分安卓机型走广色域渲染，同一个蓝在手机上比显示器上更艳；深色模式打开后，主色 500 在纯黑背景上会显得刺眼发飘，需要预备一档 400 作为深色模式下的替换值。这些都不是 bug，是显色环境不同，只能靠真机看。手上凑齐一台安卓、一台苹果手机、一台笔记本，同一个页面并排看三分钟就能判断。这项检查在网站设计的排期里最容易被压掉，因为它不产出任何可交付的文件，可它是上线前唯一能提前撞见显色问题的环节。

上线后三个月：给加色这件事定一道闸

上线时干干净净的二十个色值，半年后统计线上实际渲染出的颜色，膨胀到三四十个是常态。来源很固定：运营做促销页临时取了个橙、市场部做行业落地页觉得原来的蓝不够醒目、外包的专题页整套用了另一版视觉。这些页面单看都没问题，放在一起浏览就会感觉不像同一家公司的站。

可执行的闸门有三道。第一，所有颜色写成 CSS 变量，命名带层级，比如 --color-primary-500、--color-text-secondary，页面里禁止出现裸写的十六进制。第二，新增色值走一次登记，每季度上限两个，超了就先合并再加。第三，活动页和专题页只能用已有色阶叠透明度，不能引入新色相——同一个主色配 12% 透明度铺底，视觉上足够出新鲜感，成本是零。

还有一个可以长期观察的指标：主色在首屏的面积占比。健康区间大约在 8% 到 12%，低于 5% 会让人记不住品牌，超过 20% 页面就开始显得廉价。这个数字不需要精确测量，把首屏截图丢进任意取色工具看色彩分布，一眼就有数。网站设计做到这一步，颜色才算真正被管起来，而不是每次改版重开一次会。

手上已经有站的，下一步可以先做两件事。打开现有官网，用浏览器开发者工具把全站用到的 color 和 background-color 导出来去重，数一下总数：超过三十个，本周先做归并，把肉眼分不出的近似值合成一档，通常能砍掉四成；三十以内的，跳过归并，直接排对比度检查，按上面那个十二个模板乘五个位置的表格走一遍，标红的位置列成清单交给前端。两件事各占半天，是整个网站设计流程里投入产出比最高的半天，做完再谈要不要换主色。