Question 1

什么是调色板？为什么它在设计中很重要？

Accepted Answer

调色板是在整个设计中一致使用的精心挑选的颜色集合。精心选择的调色板可以创造视觉和谐、建立品牌认同感并引导用户注意力。大多数调色板包括主品牌色、1-2个强调色、中性背景色以及成功/错误/警告状态的语义色。

Question 2

什么是调色板的60-30-10法则？

Accepted Answer

60-30-10法则是经典的设计原则：主色用于设计的60%（背景、大面积区域），辅助色用于30%（卡片、侧边栏），强调色用于10%（按钮、高亮、CTA）。这个比例创造出平衡、专业的视觉效果，不会让眼睛感到不适。

Question 3

如何创建无障碍的调色板？

Accepted Answer

确保文本和背景颜色之间有足够的对比度。WCAG AA要求普通文本最低对比度为4.5:1，大文本为3:1。避免仅用颜色传达信息（同时使用图标或标签）。可以使用WebAIM Contrast Checker等工具验证调色板是否符合无障碍标准。

Question 4

互补色、类似色和三色方案有什么区别？

Accepted Answer

互补色位于色轮的对面（如蓝色和橙色）——高对比、鲜艳。类似色相邻（如蓝色、蓝绿、绿色）——和谐且平静。三色方案使用均匀分布的三种颜色（如红、黄、蓝）——均衡但充满活力。互补色适合CTA，类似色适合背景，三色方案适合插图。

Question 5

设计系统调色板需要多少颜色？

Accepted Answer

典型的设计系统调色板有5-10种基础颜色，每种都有多个色调（如Tailwind CSS的50-900刻度）。至少需要：主色、辅助色、中性/灰色和语义色（成功绿、错误红、警告黄、信息蓝）。每种颜色都应有用于背景的浅色变体和用于文本的深色变体，以在浅色和深色模式下保持对比度。

调色板生成器

常见问题