辞典精译 | 配色老大难？那这篇色彩理论指南别错过了！

UX辞典

北京/设计爱好者/4年前/155浏览

版权

UX辞典

本文约3533字，阅读需要9分钟

色彩带来的冲击力

颜色能唤起人们的情感记忆，刺激视觉并吸引注意力。日常看到的海报、广告牌以及收件箱中的电子邮件，这些颜色都会轻易的吸引我们的视线。颜色甚至会影响人们的心情。你知道红色和黄色组合后的颜色，会使人感到饥饿吗？这么想想，不难发现麦当劳（McDonald's）和肯德基（KFC）这样的知名快餐连锁店，他们的徽标里都使用了红与黄的配色。

色彩理论是一套创建和谐的色彩组合的原理法则，也是科学与艺术的结合。作为设计师，了解色彩理论的基础知识和色彩来源非常重要。掌握这些原理后，为相关设计项目创建最佳的色彩组合，也就没有那么难了。

以下这组例子很直观地说明了色彩对设计的影响，虽然是完全相同的图形，但区别开来的颜色——左图让人眼睛「爆炸」，而右图却是平和舒缓的。

随机色板与单色板 by Monica Galvan

色环

我们小时候在美术课上都学过色环，但如何使用它来改善配色？了解色环上的颜色、基本属性以及如何将它们混合之后，你就会明白如何创建丰富的颜色组合。这些组合不仅能让设计脱颖而出，还可以提升用户体验。

色环版本有很多，我们先对基础版本来探讨。色环分为3个主要类别：原色、次生色和三次色。

色环分为原色、次生色和三次色

原色是红、蓝、黄，这是用于混合和创建其他颜色的3种主要颜色。如果你曾经学过绘画，你会知道如何将适量的蓝色和黄色混合成绿色。把2种原色混合在一起时，就会得到绿色、橙色和紫色这3种次生色。

更进一步的话，将原色与次生色混合时，会得到第三色。这些颜色会以其父级来命名，比如黄橙色、红橙色、红紫色、蓝紫色和蓝绿色等等。

色环工具 by Canva

色温：暖色与冷色

色环被暖色和冷色分为两半，颜色的冷暖又被称为色温。在设计项目时，常常用冷暖色调来传达某种心情。在摄影时，光线和色温也会影响相机拍摄，后期可以通过调整白平衡来纠正色差。

如何创造更丰富的色彩

在创建更丰富的颜色组合之前，我们需要了解一些基本的颜色属性——它们是什么、为什么如此重要以及它是如何影响颜色的。

色相、饱和度与亮度

-色相是纯色，它是色环上的任何颜色；

-饱和度是指颜色的强度，在Photoshop中使用饱和度调整图层时，你可以看到它是如何影响照片的色彩强度。向右移动滑块可获得明亮的饱和色，将滑块向左移动以降低饱和度或灰度；

-亮度是指某种颜色的亮度或光量。

浅色、色调与色度

了解了原色，次生色和三次色后，如何获得更深和更复杂的颜色呢？那就是浅色，色调和色度发挥作用的时候了，使用它们就如同打开了颜色选项的大门。

-浅色是通过添加白色，使颜色变亮而产生的。这样可以降低颜色的强度，在平衡更鲜艳的颜色组合时非常有效；

-色调是通过将黑白或灰色与基础色调相结合产生。像色调一样，色彩也是与原始颜色结合得出的微妙配色。色彩看起来不太柔和，并且可以显示基色中不明显的复杂性；

-色度通过加入黑色形成，实质上就是让颜色变暗，而这也创造了一种更深，更丰富的颜色。

使用配色方案创建和谐色彩

配色方案指的是多种颜色的组合在一起时，既和谐又能传达情感。作为设计师，你需要确定哪种方案适合自己的设计目标。接下来，我们逐一分析几个配色方案。

配色方案的类型

单色配色

“Mono”作为前缀，意思是一种或仅一种颜色。使用这种配色，可以先确定一种色相（例如红色），再利用色调、色度或是通过浅色将其变亮或变暗，以形成和谐的配色组合。单色配色很容易呈现出效果，但也要增加对比度，像数字产品类的设计，假设整个网站、应用程序采用了单色配色，那用户找起内容来也变得很麻烦。

互补配色

互补配色是色环两端的两种颜色，我们熟知的有：黄-紫、蓝-橙和红-绿。由于对比度很强烈，互补配色可以为设计增添很多乐趣，但我个人建议设计师们谨慎使用。

分割互补配色

分割互补配色比互补配色更进一步，你可以在色环上使用两种相邻的颜色来搭配主色调，而不是只用一种。在上图的示例中，选的是黄色、橙色和蓝色。

相似配色

指的是色环上彼此相邻的3种颜色。相似配色是人们接受度偏高的一种选择，也是我本人最爱的配色用法，让设计变得中和舒缓。

三等分配色

这种配色是指在色环周围，均匀分布的任何3种颜色。而这些颜色连接起来时，呈现出一个等边三角形。在实际应用时，你需要谨慎平衡色彩，先使用一种颜色作设计主导色，再用其他两种颜色来强调。

何时使用RGB和CMYK

使用RGB还是CMYK取决于要设计的内容，对这两种颜色模式有基本的了解很重要。

RGB

RGB是一种「加色」模式，红、绿和蓝光组合在一起以创建各种颜色。将这3种颜色的光混合在一起，则会得到纯白色的光。相机、电视和计算机屏幕都是用的RGB来创造颜色，如果在Photoshop中打开照片，颜色模式默认为RGB。

色彩模式转换

CMYK

CMYK同RGB正相反，是减色模式。CMYK代表青色、品红色、黄色和黑色。我们为打印机购买墨水时，墨盒里就包含这4种颜色。印刷机通过将CMYK的颜色与物理油墨不同程度地结合在一起产生图像，这也称为减法混合。所有颜色都从空白开始，每层墨水都会降低初始亮度以创建首选颜色。当所有颜色混合在一起时，就会产生纯黑色。

要打印的设计项目，请确保将文档颜色模式设置为CMYK。如果你使用的是专门用于屏幕设计的软件，例如Figma或Sketch，则可以跳过此步骤。

Adobe切换CMYK颜色模式的路径

选择颜色的技巧

设计师们是否注意到某些颜色组合，其实对眼睛是有害的？将两种高对比度的颜色放在一起时，就会产生强烈刺激的视觉体验，比如蓝色-粉红色、绿色-橙色或红色-紫色。避免使用这些颜色组合，以获得良好的用户体验。

建立对比

尽量不要选择色调或色值太近似的颜色。网页设计、版式设计时，对比度尤其重要。

在设计中创造色彩对比

还可以依靠一些工具来检查对比度，比如下图中，添加好前景色和背景色的色值后，快速给到了对比值和文本的实际呈现效果。

色彩心理学

颜色会影响你的设计情绪，所以在选择主色时，设计师也要对颜色心理学有一个大致的了解。红色通常与愤怒、危险、热情和激情联系在一起。红色可以帮助吸引人们关注着陆页，如果所有内容都是红色，就没有太大意义了。这是一种强烈的颜色，应谨慎使用；而蓝色常与水、和平和安宁相关。由于蓝色被视为稳定性和可靠性的标志，很多公司都将蓝色用作徽标和品牌颜色。

蓝色和红色的色彩心理学

制作情绪板

有时你发现很难从零开始想一个颜色组合，那不妨创建一个情绪板，可以启发和帮助你快速为设计项目找到合适的配色方案。

使用情绪板创建调色板 by Monica Galvan

在进行情绪版创建前，请务必与客户确定偏好，以确保方向正确。等开始收集灵感时，配色方案也会逐渐变得明朗。

使用Adobe Color

Adobe Color是可以反复使用的工具（以前称为Adobe Kuler）。在寻找设计灵感时，比如看到一张色彩迷人的照片，你可以将照片直接上传到Adobe Color，并从中提取配色。该工具甚至为你提供了十六进制颜色代码，可以轻松地将其复制并粘贴进设计软件里。还可以使用色环来探索和创建单色、互补、相似和其他配色方案。你喜欢和创建的配色，都可以保存在Adobe帐户内。