先定主色，再谈搭配
网页配色的第一步不是找“好看的颜色”，而是确定主色。主色通常来自品牌色或产品调性：工具类偏冷色显理性，消费类偏暖色显亲和。
主色确定后，不要急着加第二个亮色。先建立中性色阶——白、浅灰、中灰、深灰、近黑。中性色承担页面90%的面积，主色只负责强调。很多页面“花”，问题不在主色，而在中性色没有拉开层次。
60-30-10 法则的实用变形
经典法则是：60%主色调、30%辅助色、10%强调色。网页场景可以这样对应：
- 60%：背景与大面积留白
- 30%：文字、卡片、分隔线等结构色
- 10%：按钮、链接、选中态等交互色
关键是让强调色只出现在需要点击或关注的地方。如果每个模块都有强调色，用户就找不到重点。辅助色建议从主色的邻近色或同色系深浅变化中取，避免色相跳跃过大。
对比度决定可读性
文字与背景的对比度直接影响阅读。正文与背景的对比度建议不低于 4.5:1，大号标题可放宽到 3:1。灰色文字放在浅灰背景上，是常见的翻车现场。
工具层面，浏览器开发者工具和在线对比度检查器都能快速验证。不要凭肉眼判断“差不多”，屏幕亮度和环境光会欺骗你。
状态色要统一语义
成功、警告、错误、信息这四类状态色，建议在项目初期就固定下来。错误色用红、成功色用绿是通用认知，不要为了“设计感”随意替换。
状态色还需要配套的背景色和文字色。例如错误提示常用浅红背景配深红文字，而不是纯红底白字——后者在大面积使用时视觉压力过大。
深色模式不是简单反色
深色模式不能把白底黑字直接换成黑底白字。纯黑背景配纯白文字对比过强，容易产生光晕。常用做法是深灰背景（如 #121212 附近）配略降亮度的文字（如 #E0E0E0 附近）。
主色在深色模式下通常需要提亮或降低饱和度，否则会显得浑浊。阴影在深色模式下效果有限，常用边框或表面亮度差来区分层级。
落地时建立 Token
把颜色定义成设计 Token，例如 color-primary、color-text-secondary、color-bg-surface。组件只引用 Token，不写死色值。这样换肤、调整品牌色或适配深色模式时，只需改一处。
配色不是一次性工作。上线后用真实内容检查：长文是否易读、按钮是否突出、图表颜色是否可区分。配色方案要在真实页面里验证，而不是只在设计稿里好看。
