网页与 UI

网站配色方案：如何为网页选色

好的网站配色不在于挑漂亮颜色——而在于分配角色。把结构搭对（一个基色、一组中性色、一个点缀），几乎任何颜色都能成立。下面是这套方法。

⏱ 7 分钟阅读 · 设计指南

核心要点

按角色思考，而非颜色

每个可用的网站配色都有三项职责：基色（品牌或主色）、一组中性色（背景、表面、边框、文字）、一个点缀（行动号召）。按这些角色选色，色板就立得住——60-30-10 法则是不错的比例目标。

基色

表面

中性文字

点缀

真实界面的大部分是中性色：白或近白背景、灰文字、淡边框。建一组小的中性色阶（背景、表面、边框、弱化文字、正文），略微染向品牌色相，让灰色显得有意为之。可读性就靠它。

你最饱和的颜色应当表示"点这里"——主按钮、活动链接。如果到处都是彩色，就没有重点，用户找不到操作。把点缀控制在页面约 10%，它就成了可靠的路标。

配色只有让人读得清才算成立。对正文与其真实背景检查至少 4.5:1 的对比（WCAG AA），且不要只靠颜色传达信息（配上图标或标签）。在点缀色实际会落到的浅色和深色表面上都测一遍。

一个网站该用几种颜色？

按角色而非数量来想：一个基色/品牌色、一组用于背景和文字的中性色、一个用于操作的点缀色。干净可用的网站通常这些就够。

网站最好的配色组合是什么？

没有唯一最佳组合——关键是结构。一个品牌基色、一组染向它的中性色、一个用于行动号召的饱和点缀，几乎适用于任何色相。

怎么确保网站配色无障碍？

对文字与真实背景检查至少 4.5:1 的对比（正文 WCAG AA），且绝不只靠颜色——配上文字或图标来传达含义。

暗色模式需要单独设计一套配色吗？

通常需要，至少表面色和文字色要单独考虑。直接反相亮度容易过冲、显得刺眼；保持品牌色相不变、只重新映射亮度，暗色主题会更舒适。

生成网站配色

构建基色、中性色和点缀的方案，可导出 CSS