新手来看！写给设计小白的色彩基础指南

本次分享的主题是：「设计师必须掌握颜色知识」

预计阅读时间 15 分钟，知识点多，建议慢慢收藏。

颜色的本质

今天是一个色彩世界，不同的物体颜色给我们带来了完全不同的情感。要掌握颜色，首先要研究颜色的本质。

颜色分为光学三原色和颜料三原色。

1. 光学三原色

光学三原色由红、绿、蓝组成。

色值分别为：

红（red ）：#FF0000 RGB（255，0，0）绿（green）：#00FF00 RGB（0，255，0）蓝（blue）：#0000FF RGB（0，0，255）

2. 颜料三原色

颜料三原色由品红、黄、青组成。

色值分别为：

品红（magenta）：#FF00FF CMYK黄色(42，64，0，0)（yellow）：#F8F400 CMYK(0，11，92，0)青（cyan）：#FFFF00FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF CMYK（38，0，16，0）

理论上，原色可以调制其他大部分颜色，而其他颜色不能调制原色。

那这两种有什么区别呢？

3. 区别

光学三原色和颜料三原色的主要区别在于它们的混合原理不同，分为相加混色和相减混色。

光学三原色为相加混色(可理解为光叠加)，混合后颜色亮度增加，三色混合为白色。

相反，颜料三原色采用相减混色(可理解为光的吸收)，混合后颜色的亮度和纯度会下降，三种混合物为黑色。

在设计中，我们可以区分它 RGB(光学三原色)和 CMYK(颜料三原色)。

RGB 模型本质上是和的 CMYK 模式没有区别，只是产生颜色的方式不同。显示器采用RGB模式，因为显示器是电子光束轰击荧光屏上的荧光材料，产生颜色。当没有光时，它是黑色的，当光添加到最大时，它是白色的。打印机呢？它的墨水不会发出自己的光。因此，只有吸收特定光波并反射其他光的颜色才需要通过减色来解决。

运用场景：

光学三原色:RGB模式，灯光颜色；颜料三原色:CMYK模式，绘画印刷领域。

冷暖色调

冷暖色由三种原色、三种间色和六种复色组成，称为十二色环，从紫色到黄绿色为冷色，从黄色到紫色为暖色。

冷色能让人联想到海洋、天空、雨雪等，让人感到理性、寒冷、沉默。

暖色能让人联想到火焰、太阳等，让人感到温暖、热情、开放。

在实际情况下，冷暖色调的搭配，直接决定了观赏者的第一感官。第一眼就是观赏者的情感感受。

颜色的三个属性

颜色的三个属性是：色相（Hue）、明度（Brightness）、饱和度（Saturation）。

1. 色相

色相是指这些不同波长的颜色。红色是波长最长的，紫色是波长最短的。

颜色是由物体上的物理光反射到人眼视神经上的感觉。颜色的差异取决于光波长的长度差异。红、橙、黄、绿、蓝、紫、红、橙、黄、绿、蓝、紫、紫 6 种中间色-共计 12 颜色作为色相环。色相环上排列的颜色是纯度较高的颜色，称为纯色。

2. 明度

亮度是指颜色的亮度和暗度。计算明度的基准是灰度测试卡。黑色是 0，白色为 10，在 0~10 等间隔排列为 9 个阶段。

颜色可以分为彩色和无色，但后者仍然有亮度。作为一种颜色，每种颜色的亮度和暗度在灰度测试卡上都有相应的位置值。高色度的颜色对亮度有很大的影响，不容易识别。在明亮的地方很容易识别颜色的亮度，在黑暗的地方也很难识别。

3. 饱和度

饱和度是用数值表示颜色的亮度或亮度。

饱和度为 0 当时，它是黑色、白色和灰色。各种颜色都有颜色值，无颜色的颜色值为0。对于颜色（纯度）的颜色，差异方法是根据颜色中灰色的程度来计算的。

颜色搭配

1. 单色

单色是指颜色纯度的变化，即在原色上叠加 10%~90% 白色/黑色得到一种颜色。

在产品中使用这种方法会给人一种简单、低调、干净的感觉；同时，它也会给人一种单调的感觉。单色搭配适用于沉浸式产品，不会因颜色而扰乱用户体验。

产品案例：MUJI

2. 互补色

互补色是指色相环的对立(180°）两种颜色。

红色和绿色互补，蓝色和橙色互补，紫色和黄色互补。

并列补色时，会引起强烈的对比色感，会感觉红色更红，绿色更绿。

互补色是一种难以控制的色彩搭配。因为色彩冲击力强，用得好可以达到视觉峰值，反之会很“村气”

3. 邻近色

相邻颜色是指颜色环上相邻的两三种颜色，在颜色环上相距 60°

它们的颜色相似，冷暖性质一致，色调统一和谐，情感特征一致。相邻的颜色是选择相似颜色的好方法，可以在相同的颜色中创造出丰富的纹理和层次。一些有效的颜色组合包括蓝绿色、蓝色和蓝紫色，以及黄绿色、黄色和橙色。

4. 对比色

对比色是人类视觉感官产生的生理现象，是视网膜对颜色的平衡。指相环上的距离 120° 到 180° 两种颜色之间。

对比色能使色彩效果更加明显，形式多样，表现力极强。需要注意的是，互补色必须是对比色，但对比色不一定是互补色。

视觉呈现色彩

1. 光源色

只有在光的照射下，我们才能看到物体的颜色。

发光体发出的光形成了不同的颜色，我们称之为光源色。

2. 固有色

固有色是我们通常看到物体的颜色。

例如，在正常光照下，我们看到一个物体是红色的，那么它的固有颜色就是红色。

3. 环境色

环境色是物体周围环境的颜色。

环境颜色对我们看到的物体颜色有很大的影响。我们通常会遇到一个物体在不同的光线下呈现不同的颜色。例如，蓝天下的苹果会呈现一些浅蓝色，这是环境颜色的影响。

色彩格式

1. RGB

RGB 色彩模式是工业界的一种色彩标准，通过红色(R)、绿(G)、蓝(B)三种颜色通道的变化以及它们之间的叠加来获得各种颜色，RGB 也就是说，代表红、绿、蓝三个通道的颜色，几乎包括人类视力所能感知到的所有颜色，是目前应用最广泛的颜色系统之一。

2. HSB

在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示明度。

3. HSL

在 HSL 模式中，H(hues)表示色相，S(saturation)表示饱和度，L（Lightness）表示明度。

4. HSB 和 HSL 的区别

HSB 和 HSL 它们都表示色相、饱和度和亮度。不同之处在于，在应用开发中，不同开发语言下可调节的亮度值名词是不同的，因此这两种格式不必太担心哪种格式使用得更多，而是需要使用哪种格式。

不同颜色的感觉

1. 黑色

黑色代表品质、权威、严肃、稳重、先进。它是所有颜色中最强大的。黑色+金色凸显高贵感，黑色+红色凸显时尚感。

黑色是永不过时的颜色。

2. 白色

白色代表纯洁、信任、简单和简单。黑色和白色通常被用作无色。这两种颜色没有颜色倾向，属于中性颜色，因此经常被忽视。在界面设计中，白色常被用作背景颜色，以提高图片的亮度，突出其他内容，提高文本的可读性。

3. 红色

红色代表节日、热情、无拘无束、自由和快乐。它是一种非常强烈的颜色，一出现就会让人们热血沸腾，经常出现在电子商务活动中，让人们有购物的冲动。与此同时，红色也有一个警告的意义。一些产品的高风险操作 Button，用红色提醒用户。

4. 蓝色

蓝色代表冷静、商业、未来、技术和安全。这是一种理性的颜色。在色彩心理学的测试中，发现很少有人不喜欢蓝色。蓝色的主色调太多了：知乎，Twitter、Behance、钉钉等，蓝色的使用给用户一种安全放心的感觉。

5. 黄色

黄色代表辉煌、高贵和自信。它的亮度很高。虽然它没有红色那么强烈，但黄色给人一种警告。黄色通常用于高贵的含义：网站 VIP。

6. 绿色

绿色代表健康、活力、生命、安全、和平和宁静。绿色可以治愈你的心。当你不开心的时候，看看绿色的东西会增加你的快乐。它在生活中使用最多的意义是安全：绿色通道、绿灯等。

7. 紫色

紫色代表浪漫、时尚、性感、梦幻和创造力。女性化妆品经常使用紫色+粉色。紫色在自然生活中很少见到，所以它也有一种罕见而高贵的感觉。

色彩在设计中的应用

1. 数量

尽量不要超过一个页面 3 颜色过多(黑白除外)会增加用户的兴奋值，不易长期查看。

2. 统一性

每个产品都有自己的主色调，所有页面的颜色搭配都应该与主色调相呼应。主色调的合理使用直接关系到用户对产品的信任值。在同一组件和场景中，颜色的使用应保持一致，避免“自由发挥”

3. 60-30-10原则

60%、30%、10% 实现色彩平衡的最佳比例是原则。在 60% 在空间中使用主色，可应用于导航栏、按钮、图标等关键元素，使其成为整个元素 App 视觉焦点与色彩关系；30% 使用辅助色的空间可以平衡主色过多引起的视觉疲劳；最后，剩下的 10% 当一些不太重要的元素需要区分时，空间是点缀色。6:3:1 原则构建了丰富的色彩层次，使界面看起来和谐、平衡、无序。

4. 颜色禁忌

禁止使用纯黑色、纯灰色、纯黑色和纯灰色会使用户陷入负面情绪，你可以在黑色和灰色中添加一些颜色，使颜色看起来更柔软，此外，纯黑色看很长一段时间会使人疲劳，在实际产品中，很少使用纯黑色。

5. 使用文字

为什么超链接颜色是蓝色的？

最早的计算机使用深灰色背景+黑色单词。当时，非黑色最深的颜色是蓝色，所以这个习惯一直延续到今天。当这种用户习惯非常一致时，尽量不要改变颜色，因为改变其他颜色会颠覆用户的认知，增加学习成本。

6. 卡片阴影

不要使用纯黑色阴影。阴影的颜色会受到环境颜色和固有颜色的影响。对于彩色卡片的背景，尽量使用比卡片更深的相同颜色来调整阴影，这将使阴影更加干净整洁。

推荐配色网站

1. Wbgradients

网站链接：https://webgradients.com/

Wbgradients 是一个在线调整渐变颜色的网站 ，根据您想要的调整效果，支持复制 CSS 能更好地与开发对接的代码。

2. Grabient

网站链接：https://www.grabient.com/

Grabient 是一个非常漂亮实用的渐变配色网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下自由添加和调整渐变颜色系统和线性渐变方向。

3. Color Grid

网站链接：https://www.0to255.com/740941

该网站随意选择颜色值，并自动转换已选择的颜色值 32 色值种明度，使用方便。

4. Eva Design System

网站链接：https://colors.eva.design/

Eva Design System 它是一个基于深度学习算法的配色网站。适用于为我们的产品或品牌生成系统的配色方案。浅色模式和深色模式的对比可以切换到右上角。

5. Color Hunt

网站链接：https://colorhunt.co/

Color Hunt 它是一个开放的调色板集合，可以添加到 chrome 浏览器，方便随时随地使用。

欢迎关注作者微信微信官方账号:「友设青年」