配色是模板改造里最便宜也最有效的动作。换一套配色，同一个模板能呈现出完全不同的气质。但配色不是挑几个好看的颜色堆上去，它有一套很朴素的规则。
一、60-30-10 的比例
这是室内设计沿用下来的比例，放到网页上同样成立：60% 是底色（白或浅灰），30% 是主色（品牌色），10% 是强调色（按钮、链接、标签）。
很多企业站的问题是把主色用到了 60%：整页深蓝背景，配白字，看着"高级"，实际读三行就累。反过来，全白页面只放一个蓝色按钮，又显得寡淡。比例对了，视觉才稳。
二、主色怎么选
主色通常来自品牌 VI。如果没有 VI，按行业惯性和目标客户的感受来选。
| 行业 | 常用色系 | 传递的感觉 |
|---|---|---|
| 制造/工业 | 深蓝、钢灰、橙 | 可靠、精密、有力量 |
| 金融/法律 | 藏蓝、墨绿、金 | 稳健、专业、保守 |
| 医疗/健康 | 青绿、浅蓝、白 | 洁净、安心 |
| 教育/文化 | 砖红、墨绿、米色 | 温和、有积淀 |
| 科技/软件 | 蓝紫、青、深灰 | 理性、前沿 |
注意这是惯性不是规定。真正要避免的是"高饱和撞色"：正红配正绿、亮黄配亮紫，除非做儿童或促销类站点，否则很难收场。
三、辅助色与中性色
辅助色一般取主色的邻近色或对比色，用来做分类标签、图标底色、数据图表。数量控制在两到三个，多了就乱。
中性色才是页面的骨架：标题用近黑（#0f172a），正文用深灰（#334155），辅助文字用中灰（#64748b），分割线用浅灰（#e2e8f0），底色用极浅灰（#f8fafc）。这五档灰定好，页面的层次就出来了，反而不需要太多彩色。
四、可访问性：别忽略对比度
正文文字与背景的对比度至少要达到 4.5:1，大号标题可以放宽到 3:1。浅灰字配白底是最常见的错误，"看着柔和"，实际在户外或低亮度屏幕上根本看不清。
按钮也是。浅蓝底配白字，对比度往往不够，尤其在阳光下。深一点的蓝（#1d4ed8）配白字才稳。
五、用 CSS 变量把体系固定下来
配色方案定好后，别到处写死颜色值。用变量统一管理，改一处全站生效，也方便做深色模式。
:root {
--brand: #2563eb;
--brand-dark: #1d4ed8;
--brand-soft: #eff6ff;
--accent: #f59e0b;
--text: #334155;
--text-strong: #0f172a;
--text-muted: #64748b;
--line: #e2e8f0;
--surface: #ffffff;
--surface-alt: #f8fafc;
}这套变量我们在这个主题里就是这么用的。好处是客户说"把蓝色换成绿色"，改两行就完成，不用全局搜索替换。
六、三个实操建议
- 先做灰度稿，确定层次关系，再上色。灰度好看的设计，上色一般不会差；靠颜色撑起来的设计，去掉颜色就散了。
- 把配色放到真实内容里看。用最长的一段文字、最丑的一张产品图去试，别只看设计稿的空状态。
- 移动端单独看一眼。小屏幕上大面积深色会显得压抑，底色建议保留白或浅灰。
主色之外，留一个中性色
主色占一成，辅助色三成，中性色六成。正文用深灰而不是纯黑，背景用带一点蓝的浅灰。四色平均分配，页面一定花。
配色定完后，用灰度看一眼：如果层级还清楚，说明明度关系是对的。
主色只用在按钮、链接和重点标识上，大面积铺主色会显得廉价。留白也是配色的一部分。
常见问题
一定要用品牌色吗
建议用，但可以调明度。品牌色如果是高饱和的正红，直接铺页面会刺眼，压暗或降饱和后再用，既保留识别度又不会累眼。
深色模式要做吗
企业站优先级不高。真要做，别简单反色，要重新调对比度和阴影，工作量不小。
配色会影响SEO吗
间接会。对比度低导致阅读体验差、停留时间短，这些行为信号最终会影响排名。
配色定完，排版是下一个要处理的问题。字号、行高、留白怎么定，见网页字体排版指南。
