从零构建或重建产品色彩系统：生成完整色调阶…

在需要为数字产品从零定义或重建色彩系统时，用于系统化产出品牌/中性/语义/扩展调色板并保证可访问性。

适用场景

解决思路

1. 构建品牌调色板：为主色、辅助色和强调色生成完整色调阶（50-950 或等价范围）。
2. 构建中性调色板：为文本、背景、边框和表面定义灰阶。
3. 定义语义颜色：成功（绿色）、警告（琥珀色）、错误（红色）、信息（蓝色）。
4. 为每种语义颜色提供背景、前景、边框和图标变体。
5. 构建扩展调色板：包含数据可视化颜色、插画颜色和渐变定义。
6. 确保背景上的文本对比度最低达到 4.5:1（AA）或 7:1（AAA）。
7. 确保大文本对比度最低达到 3:1。
8. 确保 UI 组件相对相邻颜色的对比度最低达到 3:1。
9. 不要仅依赖颜色来传达含义。
10. 为每种色相创建 tint/shade 色阶。
11. 为对比创建互补色对。
12. 为和谐创建类似色组。
13. 为文本/表面组合创建中性搭配。
14. 生成完整色调阶，而不是只生成单个色块。
15. 测试每一个前景/背景组合的对比度。
16. 为每种颜色提供使用指导。
17. 为色盲设计，并使用模拟器测试。
18. 从一开始就包含深色模式映射。

适用边界 · 注意事项

• 仅做深色模式适配时，使用 `dark-mode-design`。
• 仅做图表调色板时，使用 `data-visualization`。
• 需要多品牌 token 架构时，使用 `theming-system`（design-systems）。