如何选择颜色并确定不同状态的色调：悬停、活动、按下、禁用

为界面选择颜色的过程可能很复杂，尤其是在考虑各种按钮状态、字体和其他 UI 元素时。在这篇文章中，我将分享我的方法和原则，帮助您成功地为您的项目选择配色方案。

1. 定义主色

设计网站时，通常需要选择配色方案。有时，客户已经有了主要的品牌颜色。在这种情况下，您的任务是选择与主色互补的其他颜色和色调。除了主要颜色之外，网站上还使用其他颜色用于各种目的，例如指示错误状态、链接、插图、图标，或用于图形和仪表板。

2.使用色彩和谐

为了确保颜色协调一致，使用各种颜色协调方案（例如单色、互补色、三角形等）是有益的。它们可以帮助创建和谐的调色板，以补充项目的主要颜色。我们目前生活在一个技术飞速发展的世界，并且有可以轻松生成配色方案的特殊服务。例如，我使用color.adobe.com。

我是这样做的：

一。从下拉列表中选择所需的方案。

二。在表示为基色的字段中输入所需的颜色值

三。确定哪些颜色适合我的需要。

四.在我的例子中，使用 Figma 将它们转移到我的工作区。

3. 音调的选择

接下来，我们需要确定每种选定颜色的色调。要为所选颜色选择色调，您可以使用可以协助此过程的特定服务。有两种方法可以确定颜色的深浅：

第一种方法涉及更复杂的公式：

1. 选择标题颜色（不一定是黑色）。
2. 切换到 HLS 模式。
3. 跳过第一个单元格，将第二个单元格的值减少 2，将第三个单元格的值增加 5。

第二种方法是使用服务（简单快捷）

颜色.dopely.top

一。输入您想要的颜色值。

二。选择色调和步骤数（我使用了 5）。

三。选择色调和步骤数。

四.因此，对于一种颜色，我创建了下表

P = 主要，

P 60 = 这是我们的原色，

从 P 10 到 P 50 = 这些是我们在 Tints 中收集的浅色调，

从 P 60 到 P 100 = 这些是我们在“色调”面板中收集的深色色调。

4. 检查颜色可访问性

确保所有用户（包括能力有限的用户）都可以使用所选的颜色非常重要。创建界面时可以遵循一些指南，例如 Web 内容可访问性指南 ( WCAG )。要检查颜色的可访问性，您可以使用特定工具（例如插件或 Web 服务）来验证所选颜色的对比度和可访问性。

Figma 插件 –对比

网络服务 –冷却器

5. 定义不同界面状态的颜色

在为 Web 项目设计调色板的最后阶段，有必要确定特定元素状态所需的步骤数。通常，我们确定四个关键状态：

• 启用（元素的平静和正常状态）
• 悬停（鼠标悬停）
• 活动（单击按钮或其他控件）
• 禁用（被阻止的元素）

为了确定步骤数，我们使用颜色面板，在其中固定主要颜色值（素色）。然后，我们计算悬停和活动状态的步数。之后，我们测试不同状态的可访问性，以确保我们的按钮及其中的文本易于阅读。

例如， IBM 指南描述了以下方法：悬停状态距初始颜色一步半，而活动状态距主颜色两步。同样，选定的状态也会离主色更进一步。这种方法使我们能够定义调色板并确保其可供广大受众（包括能力有限的用户）使用。同样的方法也适用于文本，其中识别悬停和活动状态。

悬停状态

如果您的主色介于黑色和 70 之间，那么您应该上调半级，选择较浅的色调。

如果你的主色在 60 和白色之间，你应该降低半级到更深的色调。

按下/活动状态

对于从100 到 70 的值，活动状态会变轻两个整级

对于从60 到 10 的值，活动状态会变暗两个整级

选定的州

对于从 100 到 70 的值，所选状态会变浅一级

对于从 60 到 10 的值，所选状态会变暗一级

测试您的设计和文本以确保它们可读并正确显示也很重要。完成工作后，确保不同的界面状态和文本看起来和功能正常。

正确选择配色方案对于创建用户友好且有吸引力的用户界面起着关键作用。通过遵循这些简单的步骤并使用可用的工具，您将能够为您的项目选择和优化颜色。

我希望你喜欢我的文章。如果您有任何疑问或需要更多信息，请随时发表评论。