如何为您的设计生成调色板

颜色是人们在网站、应用或设计中最先注意到的东西之一。精心挑选的调色板能营造一致、专业的外观。选择糟糕的调色板会让好内容也显得业余。

您无需成为设计师来选择好颜色。色彩理论提供了可靠的公式。

色彩和谐模式

这些基于色环上颜色之间的关系：

互补色· 色环上相对的两种颜色（例如蓝色和橙色）。对比强烈、充满活力。非常适合需要突出的行动号召。

邻近色· 色环上相邻的三种颜色（例如蓝色、蓝绿、绿色）。和谐而宁静。非常适合背景和自然外观。

三色· 色环上等距的三种颜色（例如红、黄、蓝）。活泼而平衡。非常适合充满玩趣或创意感的设计。

分裂互补色· 一种颜色加上其互补色的两个邻居。与互补色相似的对比度但张力更小。

单色· 单一颜色的不同明暗和色调。始终和谐，但如过度使用可能缺乏视觉兴趣。

如何生成调色板

1. 选择一种和谐模式· 选择随机、邻近、互补、三色或其他模式以确定颜色之间的关系。
2. 锁定您喜欢的颜色· 发现一种想保留的颜色时，锁定它并重新生成其他颜色，直到整个调色板协调。
3. 导出· 复制 HEX 代码、CSS 变量，或将调色板保存为图像。

构建可用的调色板

调色板不仅仅是一组好看的颜色。对于真实项目，您需要：

• 主色· 您的品牌色，用于按钮、链接和关键 UI 元素
• 副色· 支持主色，用于不太突出的交互元素
• 中性色· 灰色或低饱和度色调，用于文本、背景和边框（占您大部分界面）
• 强调色· 谨慎使用以高亮、提醒或标示重要状态
• 错误/成功色· 红色表示错误，绿色表示成功（通常与主调色板分开）

小贴士

• 从一种颜色开始· 选择您喜欢的主色，然后使用和谐模式寻找能搭配的颜色。这比独立选择 5 种颜色容易得多。
• 用真实内容测试· 调色板在色板上看起来不错，但应用到真实文字、按钮和背景时可能不行。始终在实际界面中测试。
• 检查对比度· 如果文字不可读，漂亮的颜色毫无用处。将文字/背景组合通过对比度检查器以满足 WCAG（普通文字 4.5:1）。
• 少即是多· 精心选择 3 种颜色的设计比 7 种颜色的看起来更专业。大部分界面使用中性色，亮色留给最重要的地方。