Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
从您的品牌价值和目标受众开始。以色彩心理学为指导：蓝色传达信任和专业性，绿色代表成长和自然，红色表示紧迫感或激情，紫色暗示奢华或创意。将主要调色板限制在 3-5 种颜色。确保足够的对比度（4.5:1 比例）以满足无障碍要求。
60-30-10 法则是一种平衡使用色彩的设计原则：60% 主色（背景、大面积区域），30% 辅助色（卡片、侧边栏、UI 元素），10% 点缀色（按钮、高亮、行动召唤）。这在保持和谐的同时建立视觉层次。中性色（白色、灰色、黑色）通常在现代 UI 设计中构成 60% 的基础。
WCAG 2.1 要求普通文字的最低对比度比为 4.5:1，大文字为 3:1。使用 WebAIM Contrast Checker 或浏览器 DevTools 等工具进行验证。不要仅依赖颜色传达信息（同时使用图标/文字），用色盲模拟器测试，并确保交互元素具有可见的焦点状态。
对于 Web 开发：CSS 用十六进制代码（#RRGGBB），动态操作用 RGB/HSL 值，主题用 CSS 自定义属性。对于设计工具：大多数接受十六进制代码；Figma 和 Sketch 支持颜色库。对于 Tailwind CSS：在 tailwind.config.js 的 theme.extend.colors 下定义颜色。对于品牌：包含 Pantone（印刷）、CMYK（印刷）和 RGB（屏幕）值。