配色
Color Palette也常被叫作：颜色色板主题色颜色搭配品牌色色彩方案
「页面用什么颜色、每种颜色用在哪，让页面不花、语义清楚。」
配色 Color Palette
一小组有明确职责的颜色（主色、文字、背景、状态），全站只用它们，不随手加新色。
配色的关键不是「颜色好看」，是每个颜色有职责。一个产品通常只需要 5-8 个颜色：主色（按钮、链接、选中态）、背景色（页面底、卡片底）、文字色（深灰正文、浅灰辅助）、状态色（成功绿、警告黄、错误红）、边框色。全站只用这一小组颜色，页面才不会花。你问用户「这个红色是什么意思」，如果答不上来或每处答得不一样，就是这个颜色没分配好职责。
状态色尤其要语义一致：错误永远是同一个红，成功永远是同一个绿。最常见的翻车是同一个意思出现了两个颜色——表单校验的红和删除按钮的红不一样，用户会以为这是两种东西。主色还要有自己的深浅变体：悬停时深一点、禁用时浅一点，而不是悬停就换个毫不相干的颜色。
判断配色是否合格有个可操作的办法：打开页面数颜色种类。如果数出来超过十个、或者你答不出某块区域为什么是某个颜色，就该收敛。另一个硬指标是对比度：正文和背景的对比至少 4.5:1（WCAG AA），浅灰字配浅灰底是典型的不合格。给 AI 下单时给它「角色 → 具体色值」的对照表，别让它自由发挥「来个高级的莫兰迪色」。
长什么样 真实可交互，不是截图
两个地方的红不一样
浅灰字配浅灰底，看不清
左：全部颜色按职责归成四组，全站循环使用。右：颜色种类失控、同语义不同色、对比度不足——三个最常见的翻车，用户说不出来，但会觉得「这页面很乱」。
拆开看，里面有这几块
-
1
主色 Primary
表示「可操作、当前选中」的颜色，按钮、链接、选中态用它。全站一个。
-
2
文字色 Text
正文深灰、辅助浅灰。比纯黑柔和，层级靠深浅分。
-
3
背景色 Background
页面底和卡片底，通常一深一浅两个中性色。
-
4
状态色 Status
成功 / 警告 / 错误三色，语义必须全站一致。
-
5
边框色 Border
分隔线、输入框描边用的浅色，常被忽略但很关键。
常见的有哪几种
全站一个主色，最多配深浅变体。
用在：最稳妥，适合大多数产品
一个主色加一个强调色，强调色只用于特定场景。
用在：需要突出某个动作的产品
每个频道 / 板块一个颜色，但每个页面内依然要收敛。
用在：门户、资讯类站点
容易搞混？这样区分
主题（theme）是整个界面的风格（配色 + 字体 + 圆角 + 间距）；配色只是其中的颜色部分。AI 说「做了个主题」可能只换了颜色，字体圆角间距都没动。下单时点名要哪几样。
亮度是颜色本身亮不亮；对比度是前景和背景的亮度差。颜色很亮不代表对比度够——浅黄字放在白色上照样看不清。验收用对比度工具算 4.5:1，不靠眼睛觉得「挺清楚」。
什么时候用得上
主色只用在可操作元素上，悬停用主色加深一档，禁用用主色变浅。
错误提示全站同一个红，成功全站同一个绿，不要两处两样。
深色模式是另一套色板，不是把颜色取反。背景用近黑，文字用浅灰。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【任务】给 [范围] 建立一套配色，并收敛到固定色板 【色板】以下角色，每角色给一个色值，全站循环使用，不许再加新色： - 主色：[给我具体 hex] - 主色悬停变体（比主色深一档） - 主色禁用变体（比主色浅一档） - 文字色两档（正文 / 辅助） - 背景色两档（页面底 / 卡片底） - 状态色三色（成功 / 警告 / 错误，给我具体 hex） - 边框色 【要求】 - 先给我这份「角色 → 色值」表确认，再动手 - 正文与背景对比度 ≥ 4.5:1，用在线对比度工具验证并贴结果 - 全站同一个语义只能用同一个色（比如错误都是同一个红） - 不允许用渐变替代语义色 【边界】不动布局、字号、间距、圆角 【交付】列出改了哪些文件、色板定义在哪、我打开哪个地址能看到主色和状态色、你没验证的部分单独说
「角色 → 色值」的对照表写死，AI 就没法随手加第 13 种颜色。对比度要求它「用工具验证并贴结果」，把验证动作也交给它，防止口头宣称「对比度足够」。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 打开页面数一遍实际出现的颜色，不超过你色板里的数量，没有第 9 种、第 13 种颜色混进来。
- 全站「错误」相关的提示、边框、文字是同一个红；「成功」是同一个绿。
- 正文文字和背景的对比度 ≥ 4.5:1：用在线对比度检查工具输入色值自己查一遍。
- 主色悬停时变深一档、禁用时变浅，不是换成一个毫不相干的颜色。
- 所有颜色值都能在色板定义处找到出处，没有硬编码的陌生色值。
它常这么糊弄你
- 「配色已统一」——但页面上还是数出十几种颜色，尤其是阴影、边框里藏着陌生色值。
- 「这个红色是设计上的强调」——但表单错误提示也是这个红，用户会以为错误是强调。
- 「浅灰文字对比度没问题」——工具一查只有 3:1，看不清就是看不清，别信口头保证。
- 「用了渐变色显得高级」——但渐变把两种语义混在一起，状态色没法用了。配色要的是职责，不是渐变。
配色这类纯视觉任务最高能验到「主路径」层：数颜色种类、用对比度检查工具输入色值，自己都能做。重点查「语义是否一致」（错误是不是同一个红）和「对比度是否达标」，不要被「这是高级感配色」糊弄。
考考你 选一个你觉得对的
页面上两处「错误提示」，一处是红色文字，一处是橙色边框。这说明？
状态色的铁律是语义一致：同一个意思全站一个颜色。两处错误两个颜色，用户会疑惑它们是不是同一种问题。A 把混乱说成丰富；C 的「本来就是两回事」恰恰是问题本身；D 用审美代替了语义。