色板Color Palette
全站都用同一个绿色，为什么仍然可能显得混乱？
色板是一组协调使用的颜色；用于界面时还应给颜色指定用途，如正文、背景、边框、强调和状态。色值本身与用途名称分开，便于一致维护和不同主题下的适配。
重要的是哪里该用什么色。正文、按钮、成功、失败都抢同一种醒目颜色，用户就分不清重点和状态。
地图会给道路、水域和边界不同的图例。颜色有分工，才有助于找路；不是把喜欢的颜色全部铺上去。
类比到这里为止：界面还要面对色觉差异、显示环境和深浅主题。图例式分工有帮助，但不代表任何配色都满足阅读要求。
给学习站定义正文色、轻背景、行动强调和错误提示，课程详情与询盘练习使用同一套用途。客户看到失败时，文字明确说明原因，不只变成红色。
用途名称比随手写色值更好维护
- 内容
- 正文、辅助文字和链接保持明确层级。
- 表面
- 页面背景、卡片背景与分隔线支撑阅读。
- 动作
- 主要按钮与键盘焦点要容易辨认。
- 状态
- 成功、提醒和错误搭配文字，不只靠颜色。
把组合放回真实页面检查
同一个文字色放在白底和浅绿底上，得到的对比度可能不同；透明背景与照片上还需按实际呈现检查。悬停、焦点、禁用和选中状态都不能漏掉。
可以用 CSS 自定义属性统一维护用途与色值，但技术上共用变量并不等于设计已经合理。先在一篇长词条和一份错误表单上读、填、改，再推广到更多页面。
继续看项目应用与交付检查
色板 在项目中负责什么
- 什么时候用
- 页面、组件或主题越来越多，需要让视觉层级与状态表达保持一致时。
- 它解决什么
- 避免每次凭感觉挑颜色，降低全站修改主题或修正对比度的维护成本。
- 它不负责什么
- 颜色组合是否可读需要按具体前景与背景检查。普通正文的 WCAG AA 最低对比度要求通常为 4.5:1，较大文字等有不同条件；一个通过值不代表整页通过无障碍验收。
- 放进真实项目
- 为独立站定义品牌色、文字色、表面色、成功警告与图表色，并检查对比度。
色板给每种颜色明确用途，并在组合使用时保证可读
品牌红可以用于主行动，但错误、警告、链接和图表还需要各自稳定语义，不能全靠一抹红。
- 01
从品牌与无障碍要求建立基础色。
- 02
按用途命名而非按色值命名。
- 03
检查每种前景与背景组合及深色主题。
先定用途，再选色值，最后检查真实组合。
容易混淆的地方
主色不是所有元素都必须使用的颜色。色板也不是情绪板：情绪板可以探索感觉，界面色板需要进一步明确可执行的用途与约束。
为课程站定了一组品牌颜色，怎样避免成功、警告和普通链接都随意使用同一亮色？
你可以这样告诉 AI Agent
我在处理这件事：为独立站定义品牌色、文字色、表面色、成功警告与图表色，并检查对比度。请以“色板”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：原创整理：Web 开发、产品设计、AI 协作与外贸独立站实践