网页配色表到底是什么
网页配色表是把一个项目要用的颜色提前定好，并写清每个颜色的角色：主色、辅助色、强调色、背景色、文字色、边框色、状态色。它和“调色盘”不同，调色盘只负责好看，配色表要负责可复用、可维护、可交接。
一份合格的配色表通常包含三部分：
- 色值：HEX、RGB 或 HSL，前端能直接使用。
- 角色：这个颜色用在哪里，比如主按钮、链接、错误提示。
- 层级：同一颜色的深浅梯度，用于悬停、禁用、分隔线。
常见配色结构：60-30-10
最稳的网页配色通常遵循 60-30-10 比例：
- 60% 背景与大面积留白，常用低饱和浅色或深色背景。
- 30% 文字与结构色，保证正文清晰。
- 10% 主色与强调色，用于按钮、图标、关键数据。
这个比例的好处是：页面不会花，重点又足够突出。很多“看起来高级”的网页，本质是把 60% 和 30% 压得很克制，只让 10% 出彩。
选色的四个实用步骤
1. 先定背景与文字
不要一上来就挑品牌色。先把背景和正文文字定下来：
- 浅色背景配深灰文字，比纯黑更柔和。
- 深色背景配浅灰文字，避免纯白刺眼。
正文对比度要足够，否则再好看也不合格。
2. 再定主色
主色建议只选一个，来自品牌色或行业常见色。主色要能同时用在按钮、链接和选中状态上。如果主色太浅，按钮上就要配深色文字；如果太深，配白色文字更稳。
3. 补齐状态色
一个完整的网页配色表至少要有：
- 成功色：绿色系
- 警告色：橙色或黄色系
- 错误色：红色系
- 信息色：蓝色系
状态色不要和主色太接近，否则用户分不清“可点击”和“出错了”。
4. 生成深浅梯度
每个主要颜色至少准备 3 档：浅、中、深。用于悬停、按下、禁用和边框。这样前端不用临时调透明度，视觉更统一。
无障碍与可读性检查
配色表最容易翻车的地方是对比度。正文文字与背景的对比度建议达到 4.5:1 以上，大号文字可放宽到 3:1。检查方法很简单：把色值输入任意对比度检测工具，不达标就压暗文字或提亮背景。
另外注意：
- 不要只用颜色传达信息，错误提示要配文字或图标。
- 链接颜色要和正文有区分，同时保留下划线或悬停变化。
- 色盲用户对红绿不敏感，状态色尽量搭配形状差异。
让配色表真正落地
配色表写好后，最好转成设计变量或 CSS 变量，例如 --color-primary、--color-text-muted。这样改一处，全站生效。交接时把色值、角色、使用场景列成表格，比丢一张色卡图有用得多。
最后记住：网页配色表不是越丰富越好，而是越稳定越好。颜色少一点，规则清楚一点，页面反而更耐看、更好维护。
