UI 设计中色彩应用的初学者指南

2025-05-24

UI 设计中色彩应用的初学者指南

色彩理论让你感到困惑吗？你是否厌倦了千篇一律的预设调色板？你是否厌倦了在神奇的调色板编辑器上点击“重新生成”？ 

别担心，我们都经历过……

希望这篇文章能成为你攀登色彩神秘山峰的虚拟向导。当你到达顶峰时，你将掌握创作美丽、连贯的色彩所需的所有技能。

听起来还好吗？我们出发去大本营吧。

先决条件 

为了充分利用本教程，您应该熟悉使用 HTML 和 CSS。 

本教程的格式

本教程旨在边做边学。我们将从相同的基础设计开始，逐渐添加我们自己的风格。 

基础设计本身是一张“产品卡”，你可能在各种电商网站上都见过类似的设计。这是一个简单的例子，但却提供了一个绝佳的空白画布来尝试不同的颜色。 

我已经创建了一个CodePen，您可以fork 它来开始使用。 

这里是： 

目前，颜色只有黑色或白色。没有产品图片，设计也缺乏个性。非常基础，但没关系。这就是你的用武之地！

选择 您的 产品

首先，你需要选择一张图片来替换问号。图片可以是任何东西——一块巧克力、一双鞋子、一辆拖拉机、一顶酷炫的帽子……一切由你决定。 

不过，我鼓励每个人都选择自己独特的产品图片。为什么呢？ 

不同的产品适合不同的审美，因此也需要不同的配色方案。您可以选择为糖果棒添加鲜艳明亮的色彩，或为瑜伽垫添加柔和平静的色彩。选择您自己的审美和配色方案，可以更好地学习如何将这些技巧运用到自己的作品中。

CodePen 入门版内置了Twemoji，让您轻松选择产品图片。如果您更改了 emoji card__img，Twemoji 会将其替换为高分辨率 SVG 版本。

<div class="card__img" role="img">❓</div>
Enter fullscreen mode Exit fullscreen mode

提示：在 macOS 上，您可以使用 打开表情符号键盘ctrl + cmd + space。在 Windows 上，您可以使用windows/start + .

我要为我的产品卡片选择“草药”表情符号。我还将更改卡片标题和元描述以匹配我的选择。 

我的产品卡现在看起来像这样： 

你应该有类似的效果，但要包含你自己的产品图片/表情符号和文字内容。做得好！让我们继续探索色彩之巅。 

使用 HSL 

处理颜色时，我总是会用到 HSL。对我来说，它是在浏览器中呈现颜色最直观的方式。我们也将在本教程中使用 HSL，所以这里有一个快速入门…… 

HSL 代表色调、饱和度、亮度。

色相是指特定颜色在色轮上的旋转角度（以度为单位）。在浏览器中，红色位于 0 度。以下是示例：

一个色轮，12 种颜色

饱和度指的是颜色的“强度”。饱和度越低，颜色越灰暗；饱和度越高，颜色越鲜艳。 

一系列具有不同饱和度的颜色，从灰色到鲜艳

亮度是指颜色接近黑色或白色的程度。亮度值为 0% 时始终显示黑色，亮度值为 100% 时始终显示白色：

一系列具有不同亮度值的颜色，从暗到亮

我们在 CSS 中像这样编写 HSL 颜色：

p {
  /* hue, saturation(%), lightness(%) */
  color: hsl(0, 100%, 50%);
}
Enter fullscreen mode Exit fullscreen mode

如果这对你来说很陌生，别担心！可能需要一点时间来适应 HSL，但我保证这是值得的。 

如果你觉得需要练习，可以花点时间尝试一下。你可以在 Figma 或 Sketch 等图形编辑器中，或者直接在浏览器中进行操作。只要适合你的工作流程就行。

灰度设计

我个人在设计时总是喜欢从灰色开始。通过将颜色保留到最后，我们可以专注于排版、间距和内容。 

你可能注意到，在入门 CodePen 中只有黑色和白色两种颜色。这还不够设计，所以我们需要添加更多颜色。不过，我们先不要随意添加颜色……

定义灰色阴影

使用颜色时，一个好的做法是预先定义一个系统。对于像这样的小型项目，每种颜色 5 种色调就足够了。对于大型项目，9 到 10 种色调是最佳选择。 

如果您查看Tailwind和Material UI文档，您就可以观察到这种模式。

为了确定一些初始色调，让我们使用基于重构 UI 人员的这篇文章的方法。

1. 选择一种中间/底色——这里没有固定的规则，但尽量不要太亮或太暗。对于灰色，亮度最好在40/50左右。我喜欢确保这种色调具有足够的对比度，以便用于文本（稍后会详细介绍）。

灰色圆圈

2. 选择最深和最浅的色调——同样，这里没有正确或错误的答案。我使用亮度值为10表示最深的颜色，96表示最浅的颜色：

3 个灰色圆圈，颜色从亮到暗

3. 填补空白——最后，选择另外两种介于中间色和最深/最浅颜色之间的色调。我为这两种色调选择的亮度值分别为25和85。

5 个灰色圆圈，颜色从亮到暗

完成上述步骤后，你应该已经设置好了大致的灰度调色板。随着时间的推移，它可能会发生变化，可能需要根据实际情况进行一些调整，但目前来说已经很完美了。 

再次强调，我鼓励你尝试自己制作这些颜色。你不需要完全照搬上面的例子，但它应该能为你打造自己的调色板提供一个很好的参考。 

应用灰色阴影

让我们将灰度颜色应用到产品卡上，柔化那些刺眼的视觉效果。我看着你呢#000。

注意： 我通常会在开始任何设计工作之前定义好灰度，并在设计过程中应用它们。不过，出于本教程的目的，我们将在设计完成后再添加它们。

首先，让我们将预定义的灰度作为CSS 自定义属性添加到代码中。将颜色存储为自定义属性，方便以后进行简单的调整。

:root {
  --gray-100: hsl(0, 0%, 10%);
  --gray-200: hsl(0, 0%, 25%);
  --gray-300: hsl(0, 0%, 46%);
  --gray-400: hsl(0, 0%, 83%);
  --gray-500: hsl(0, 0%, 96%);

  --white: hsl(0, 0%, 100%);
}
Enter fullscreen mode Exit fullscreen mode

我喜欢给我的墨镜贴标签。<color_name>-<increment_of_100>这只是个人喜好，对我来说很方便，不过你也可以随意给它们命名。我知道命名习惯因人而异！ 

现在我们已将自定义属性添加到 CSS 中，我们可以将它们应用到产品卡的各个元素。

首先，让我们将卡片的描述颜色设为第二深的灰色。这样会在“两侧”留出足够的空间，为标题和元文本创建视觉层次。

.card__description {
  color: var(--gray-200);
}
Enter fullscreen mode Exit fullscreen mode

接下来，我们可以将卡片标题设置为最深的灰色。我通常喜欢将标题的颜色设置为比其他文本元素稍深一些，以使其更加突出。

.card__title {
  color: var(--gray-100);
}
Enter fullscreen mode Exit fullscreen mode

为了进一步构建我们的层次结构，让我们将卡片的“元”文本稍微往后推一点，使其成为中间的灰色。我们也可以将小点设为第二浅的灰色：

.card__meta {
  color: var(--gray-300);
}

.card__meta:before {
  background: var(--gray-200);
}
Enter fullscreen mode Exit fullscreen mode

看起来不错！从这里开始，我们可以使用各种颜色来设置“主”和“次”按钮的样式：

.card__btn {
  background: var(--gray-100);
  color: var(--white);
}

.card__btn--outline {
  background: var(--white);
  color: var(--gray-200);
  border: 1px solid var(--gray-400);
}
Enter fullscreen mode Exit fullscreen mode

最后，我们可以将图像背景设置为最浅的灰色，并将小心形图标设置为中间：

.card__img-wrapper {
  background: var(--gray-500);
}
Enter fullscreen mode Exit fullscreen mode 
.card__heart {
  color: var(--gray-300);
}
Enter fullscreen mode Exit fullscreen mode

呼！变化真多。这里有一个 CodePen，展示了我们目前所做的一切……

通过仅使用灰色，我们建立了清晰的视觉层次。产品标题等重要元素颜色较深，更加突出。不太重要的元素颜色较浅，也不太突出。 

与最初的黑白设计相比，卡片的布局更加井然有序。之前，每个元素都争相吸引你的眼球。现在，所有元素都各得其所。

关于可访问性的说明 - 检查对比度

在应用颜色时，尤其是在文本元素上，要注意对比度。对比度，或感知的“亮度”，是指两种颜色之间的亮度差异。 

例如，白色背景上的浅灰色文本的对比度相当低，为1.48：

白色背景上带有浅灰色文本和哭泣表情符号

深灰色文本的对比度更高，为10.37：

白色背景上带有深灰色文本和笑脸表情符号

在网页设计中，我们必须始终至少遵循 WCAG AA 颜色对比度指南。这意味着：

  • 常规文本元素的比例至少为4.5:1
  • 大文本元素的比例至少为3:1 （通常约为 18.5px 和粗体，或 24px 和常规粗细）
  • 图形对象和 UI 组件（例如文本输入的边框）的比例至少为3:1

有很多方法可以检查设计中的颜色对比度。为了测试整个页面，我喜欢使用 Chrome 的Lighthouse，它可以直接从开发工具中运行。为了检查单个颜色，我喜欢Alex Clapperton的这个优秀工具。

随着时间的推移，你会找到最适合你工作流程的对比度检查方法。不过，作为新手，这些方法已经很有效了。

选择个性

好的，我们的产品卡片看起来不错。通过建立视觉层次，内容看起来已经更具“设计感”了。我们之前用灰色做了很多工作，现在是时候添加一些色彩了。 

首先，花点时间思考一下你的 UI 想要传达的个性。最终的个性将有助于决定你的主色调/基色。 

如果您为产品形象选择了钻石戒指，您可能希望追求富丽堂皇/独特的个性。  

如果您选择了沙滩伞，您可能想要探索快乐、充满活力的个性。

这个问题没有正确或错误的答案，所以要相信你的直觉。对于我的草药，我追求的是平静和自然。  

选择原色+色调

创建调色板时，我喜欢从单一的主色/基色开始。我们将在整个 UI 中 大量使用这种颜色。

记住你之前选择的个性，决定开始探索的颜色。就我而言，我选择了绿色。

网上有很多资源探讨不同颜色/情绪之间的关系。虽然这些资源很有帮助，但它们并不能给你一个明确的答案。你可以把它们当作指南，但要相信自己的眼睛。维基百科上关于色彩心理学的页面是一个很好的起点。

选定大致的颜色后，如何进行实验完全取决于你。有些人喜欢在 Figma/Sketch 之类的图形编辑器中工作，而另一些人则喜欢在浏览器中工作。 

如果您不确定，请启动一个新的 CodePen，在页面中间创建一个正方形，然后开始尝试hsl()。

...

卡住了？别担心！

我知道，选择一种原色感觉像是一项不可能完成的任务。即使把范围缩小到大概的色调，仍然有成千上万种选择。你究竟该如何选择呢？

如果您发现自己在色彩海洋中有点迷失，我建议您尝试以下方法： 

  • 研究一些你喜欢的品牌/网站，并使用开发工具或扩展程序检查它们的调色板。尤其要注意，检查它们如何设置主色/基色的饱和度和亮度。这应该能帮助你找到适合自己的颜色范围。 
  • 选择一幅你喜欢的画作或照片。使用浏览器扩展程序提取其颜色，方法与上述相同。如果你遇到瓶颈，这可以成为你灵感的绝佳来源！
  • 尝试使用颜色生成器，例如coolors.co，​​或者查看设计资源，例如colors.cafe。虽然我不建议在整个配色方案中使用生成器或预设调色板……但它们可以帮你找到一个很棒的主色/基色。

对于我的主色调，我选择了这种绿色： 

一个绿色的圆圈

为什么？ 

首先，它符合我想要的自然/平静的性格。 

其次，它与文本元素的白色背景有足够的对比度。这将使将来将其添加到用户界面变得更加容易。同样，这里没有正确或错误的答案，但请尝试选择一种符合这两个标准的颜色。 

选定主色后，你需要定义一些其他的色调。具体步骤可以参考我们之前选择灰色的步骤。比如我的绿色，步骤如下： 

5 个绿色圆圈，颜色从亮到暗

注意： 深色通常需要更高的饱和度，而浅色通常需要的饱和度较低一些。

假设在另一个宇宙中，我决定使用沙滩伞表情符号作为我的产品图片，我最终可能会得到这样的颜色：

5 个橙色圆圈，颜色从浅到深，以及一个沙滩伞表情符号

如果我选择糖果/甜品作为我的产品，我最终可能会得到如下结果：

5 个粉色圆圈，颜色从浅到深，还有一个糖果表情符号

应用原色/基色

太棒了！现在我们每个人都有独特的原色/基色+色调，可以应用到产品卡上。虽然我们有5种令人兴奋的色调可供选择，但我们只需要添加一些颜色。记住，我们的灰色已经可以完成大部分工作了。 

首先，将原色/基色色调放入 CSS 中，方式与灰色相同：

:root {
  --green-100: hsl(152, 100%, 8%);
  --green-200: hsl(152, 100%, 16%);
  --green-300: hsl(152, 100%, 25%);
  --green-400: hsl(152, 50%, 50%);
  --green-500: hsl(152, 50%, 96%);
}
Enter fullscreen mode Exit fullscreen mode

开始应用主色/基色的一个好方法是将其添加到按钮上。在我们的例子中，“立即购买”按钮就非常适合。这是我们想要在卡片中突出显示的主要操作，添加一些亮色将有助于它脱颖而出。 

让我们将按钮的背景色设置为中间色，并将文本颜色设置为最浅的色度。这是一个我经常使用的实用小技巧。较浅的颜色叠加在较深的颜色上，通常看起来比纯白色自然得多：

.card__btn {
  background: var(--green-300);
  color: var(--green-500);
}
Enter fullscreen mode Exit fullscreen mode

看起来不错！接下来，让我们将产品图片背景设置为最浅的色调：

.card__img-wrapper {
  background: var(--green-500);
}
Enter fullscreen mode Exit fullscreen mode

最后，让我们将小元信息点设置为第二浅的色调：

.card__meta:before {
  background: var(--green-400);
}
Enter fullscreen mode Exit fullscreen mode

这是 Codepen 中显示我进行这些更改后的产品卡： 

通过使用一些色彩，我们为我们的产品卡添加了大量个性。 

如果您第一次尝试时不是 100% 满意，也不用担心。这需要练习。如果您遇到困难，可以尝试不同的产品表情符号，并尝试不同的颜色！ 

浅灰色 

让 UI 色彩更协调一致的一个好技巧是，在灰色中添加一些主色/基色。你需要保持这种微妙的过渡。深色比浅色更能体现色彩的层次。 

对于我的颜色选择，它看起来像这样： 

5 个绿色灰色圆圈

我的“灰色”自定义属性现在如下所示：

:root {
  --gray-100: hsl(152, 45%, 10%);
  --gray-200: hsl(152, 25%, 25%);
  --gray-300: hsl(152, 10%, 40%);
  --gray-400: hsl(152, 10%, 83%);
  --gray-500: hsl(152, 10%, 96%);
}
Enter fullscreen mode Exit fullscreen mode

嘘……调整完灰色后，记得重新检查一下颜色对比度！添加色调后，你可能需要调整某些颜色的亮度值。 

这是 CodePen，展示了应用了这些色调的产品卡 UI：

还不错吧！虽然只是个小改动，但值得一做。

扩展你的调色板

至此，我们的产品卡基本完成了。我们只用了 5 种原色/基色和 5 种灰色，就取得了很大的成就。对于我们的小设计来说，这几乎足够了。对于更大的项目，你可能需要更多。

如何组合颜色并构建调色板，值得用一整篇文章来详细讲解。不过，就我们的基本设计而言，我们先来探索一种简单的方法，在 UI 中添加一种颜色……

还记得之前的色轮吗？当我们寻找合适的颜色搭配时，它将成为我们最好的朋友。 

从我们的基色开始，旋转180度，我们就能得到基色的补色。你几乎可以保证，这个补色和你的主色/基色搭配起来会非常完美！ 

这是一个可视化效果： 

圆圈/轮子上有 12 种颜色，其中突出显示两种相反的颜色

对我来说，补色是栗色。对你来说，可以是任何颜色！要在 CSS 中实现这一点，只需将主色/基色值加上 180 即可。

注意，在 CSS hsl() 中，360 以上的数字会直接“绕回”到 0，所以不必担心进行任何复杂的计算。只需在基础色调上加上 180 即可。 

太棒了！就这样！接下来，你可以按照我们之前用过的模式，创建 5 种色调。对我来说，看起来像这样： 

5 个栗色圆圈，颜色从浅到深

定义好色调后，您可以将其添加为自定义属性，并根据需要应用它们。例如，我将使用新的互补色调为“赞”按钮添加一些颜色：

.card__heart {
  color: var(--maroon-300);
  fill: var(--maroon-500);
}
Enter fullscreen mode Exit fullscreen mode

就这样。我们完成了！ 

您的产品卡应该与我的类似，但配色方案和产品完全不同。

总结

好了，各位，就到这里。希望您通过本教程学到了一些关于颜色的实用新知识。也希望您能制作出一张很酷的产品卡片。虽然我们创建的示例很简单，但这里运用的技巧将帮助您完成更大型的项目。

如果你愿意，请分享你制作的任何 CodePen 或示例。我很想看看！

喜欢这个教程吗？关注我的 Twitter @georgedoescode，获取更多前端/创意编程内容🎨 

本教程总共花了大约 12 个小时完成。如果你想支持我的工作，可以请我喝杯咖啡

文章来源：https://dev.to/georgedoescode/a-beginner-s-guide-to-applying-color-in-ui-design-3904
Devto 翻译
PREV
生成式 SVG 入门套件
NEXT
我非常讨厌 Regex，所以我创建了 iHateRegex.io