每天十分钟，系统学习设计，成为设计师。终生学习，受益终生。这里是【

知更常青藤】，欢迎你的到来，这是我和你一起学习设计的第四天。本文体系非常长，约6500字，如果你没有耐心，请直接看文末总结，如果你不想丢失这个体系，可以关注我，转发本文。

  色彩的基础

故事的起源

  我的朋友Jesse是一个跨行的新手设计师，如果你看过我的系列文章你应该认识Jesse（杰西），当然，还有他的设计入门导师Tom（汤姆）。

  如同所有跨行到设计行业的新手一样，Jesse走了太多的弯路。是报班还是进入设计学院，每一个都是重大的决定。

  坦率地讲，设计是一个非常庞杂的体系，对于Jesse这样的新手而言，一旦扎进去，再也难以自拔，尤其是自学设计的新手。让我感到难过的是，互联网和商业运作组织或者培训机构对于设计培训的宣传过于商业化，他们避重就轻的宣传让许多新手劳命又伤财。

  绝大部分在线课程强调设计软件的使用和培养，这些课程都是付费的。我一再强调学习设计软件不会让你懂得设计，拿我最喜欢的一个例子来讲就是：你买了一堆油画刷并不会让你成为艺术家，设计软件就是这些油画刷，如Photoshop、Illustrator一类。它们是实现设计/艺术的工具，而不是设计/艺术本身。

  我并不是在传达设计软件无用论，相反，它们对于设计效率和设计效果的提升是几个世纪以来的艺术家和设计师们难以企及的。

  对于Jesse这样的新手，如果自学还有一个严重的问题，那就是学习的体系，他们求助无门，得来的只是广告和商业宣传。他们本应有更好的途径可以入门，但是信息的不对称和资源的非有效利用导致他们成为了玻璃窗外的鸟儿，如果没有人引导，他们会一直在玻璃窗外徘徊。如果没有学习设计的方法论，没有一个学习框架的情况下去自学无疑是自寻死路，这会极大地打击他们的自信心，也会打击设计行业的前途。

  我和Tom致力于这样的入门框架，帮助这样的新手搭建设计学习框架和体系，此后他们再深入学习可以做到有的放矢。我的一篇文章释出了这样的基本框架，而现在这篇文章就是色彩的基础，你放心，这很简单。

从设计的外衣-色彩-讲起

  如果知识的学习由许多概念组成，那么你需要知道这些概念名词，然后熟悉并且理解这些概念。在本文你能学习到的概念有：

  正如标题所言，本文的重点在于扫清设计的基础学科之一：色彩。你不必成为色彩学专家，但是你一定要理解并运用色彩。

  关于色彩我写了太多文章，你可以翻阅我以前的文章来看。不过由于这个话题太冷门，没有人愿意静下心来学习，新手还有一个自身的问题就是太过急躁，这导致我的文章没有多少人愿意看，因此，我改变策略极力为你呈现快速入门的框架和基础，但是你必须要懂得一个哲学道理：厚积薄发。

  还有一个问题，关于设计师和艺术家是否需要充分理解电磁波、光能感受器或者人类感知等方面的科学解释和原理。尽管设计师和艺术家们不需要懂得这些科学，也能娴熟地运用色彩，但是，我们要清楚地知道，所有的色彩都是光线（电磁波）的结果，可见光通过与眼球和大脑的综合反应呈现了色彩。了解这些内容有利于你理解，并且打下良好的基础。毕竟，专业的能力要从新人开始构建，我们已经很难说服从事过设计的人相信这一点，但至少可以肯定的是，他们不是优秀的设计师。

  色彩作为设计的外衣，是新人遇到的第一道关卡。许多设计师过了很长时间依然无法设计出易用并且美观的产品，这是基础不牢靠所致。无论你学了多少软件也没有用，模仿多少UI也不会让你走得更长远，你必须理论和实践相结合。

  Jesse也经常向我询问配色问题，我相信许多新手经常被此问题困扰。基础、基础、基础，还是基础问题。在你学会熟练使用Photoshop之后，摆在你面前的就是配色问题。

  关于色彩科学原理的内容请看往期文章，限于篇幅，我不再此累赘了。

色相、明度、饱和度

  对于一篇文章来说，本文太长了，但是你坚持到了这里，感谢你，同时也恭喜你。

  【色相】

  我们先来看色相，从字面意思理解：色彩的相貌。是的，色彩也有相貌，它长成了什么样子，就是它的色相。红色就是一种色相，同理蓝色、黄色、橙色、紫色、蓝绿色......

  从光学角度本质地看待色相，那就是波长决定的。每种色彩表现出来的独一无二的感官都是光波独特的波长决定的。如红色是波长约650纳米的电磁波表现出来的色彩。

  值得一提的是，黑白灰没有色相，只有明度。

  【明度】

  许多新手一开始对明度嗤之以鼻，诚然这是一个很容易理解的概念，但是越到后期他们发现明度越难以描述。但是，请记住：明度最重要。

  我们还必须要将明度和亮度区别开来，一般地，明度是指人的感官，但是亮度却是客观存在的变量。不过有时候大家会把亮度和明度混淆。我的建议是只看明度。

  大多数书籍会告诉你明度是色彩的深浅程度，它的范围从接近白色到接近黑色。这没有问题，你可以这么理解，如果你有一桶红色颜料，那么你往里添加白色颜料的时候，它的明度就在提升，添加黑色颜料的时候明度就在下降。

  但是这是为什么呢？为什么会和白色黑色有关系呢？实际上，要理解这个概念最好还是从电磁波上理解。我在《揭开色彩的面具》一文中详细解释了色彩的原理问题。其中有关于电磁波振幅这一属性的描述。

  如果你能够理解波的基本特性，那么你一定能够理解振幅这个概念，振幅与电磁波的能量相关。当然，如果振幅不变的情况下，电磁波频率越高，照射到物体表面时积累的能量也会更高。

  请想象一下声音的传播，有些人的声音很尖锐，这是因为声带振动频率高，每秒振动次数高的原因；反之，声音很低沉，声带振动频率低。这种频率可以区别一个人的声音特性，好比色相是由波长决定，波长越长，频率越低，道理一样。

  但是，声音的大小，即强度与振幅相关，你可以认为声带振动幅度很大，此时产生的声音响度高，能量大。因此，类比一下，当光波的振幅宽，那么能量就强，产生了更高的明度。需要强调的是，明度还与频率（波长）有关，他们相互作用。

  简单地讲，频率越高，振幅越大，即振幅和波长的比值越大，积累的能量越强，我们的视觉系统受到的刺激越强，大脑反应出强烈的明度。

  明度还会叠加，当两种或者以上的有色光线混合的时候，明度是增强的，你可以简单地理解为他们的明度之和。实际上这和电磁波的干涉有关系，但是最终他们经过干涉之后形成新的波长，这就意味着产生了新的色相，但是新的波的振幅和波长之比大于原先的色光，明度就增强了。请记住：色光混合，明度增强。

  【饱和度】

  接下来色彩属性的最后一个：饱和度，也叫纯度、彩度、艳度、鲜度......，总之，他们说的都是一件事情。

  理解饱和度很简单，它是指一种色彩成分的多少程度，含的越多，饱和度越高，反之越低。

  我们来做个例子，在红色中添加白色，此时红色成分占比下降，红色和白色的混合光进入眼睛时，相比于不添加白色时，前者比例更高，眼球对红色的感光效果越强，表现更为强烈，称之为饱和度高。

  那么在红色中添加其他色相呢，比如添加蓝色，同样地，红色占比依旧下降，红色的饱和度降低了。也就是说，只要某种色相所占比例下降，那么这种色相对眼球的刺激降低了，它的饱和度就低。

  为了你能够更好地理解饱和度，我们利用对盐水再次做对比。我们往一杯清水中添加盐，一开始盐是溶于水的，随着盐分含量越多，到了一个临界点的时候不再溶于水，你会发现无论你放多少盐进去都无法溶于水，此时我们称盐水饱和了。这个原理等同于色彩的饱和，当你往盐水中添加水或者其他液体（可溶解盐的）都可以打破这种饱和状态，即降低了饱和。

  因此，降低饱和度的方法：使其比例降低，对于红色而言：

• 加入更多白色，红色的饱和度越低，白色达到一定程度，不足以引起视觉的感知，最终趋向于白色。
• 加入更多黑色，红色的饱和度降低，黑色添加到一定程度，不足以引起视觉感知，最终趋向于黑色。
• 加入其他色相，红色饱和度降低，其他色相添加到一定程度，不足以引起视觉感知，最终趋向于其他色相。

  你理解了吗？如果你能够对上述三种属性足够理解，你现在利用Photoshop进行三者的操作完全可以了然于胸，而不至于死记硬背，看效果。

  知晓了原理，才能够实现目的。

原色、间色、复色、CMY模式与RGB模式

  在讲原色之前，我们先弄清楚两个概念：加色和减色。这两个概念我在前面色彩科学当中有详细提到，鉴于你没有看过这些文章，我再次简要说明。

  人的眼睛看到色彩是由于光进入人眼，经过视觉系统处理，在大脑中呈现的感知结果。

  人类看见色彩可以分为两种情况，第一，直接看到光源。比如手机、显示屏、电视、电灯等，这些都是光源，它们直接发射色光进入眼球。

  第二，间接光线。除了上述情况，你看到的其他物体都是由于光线经过物体吸收、反射、折射、投射、漫反射等情况后最终进入视觉系统的结果。不过物体会吸收光线，这就导致反射到眼球中的色光和光源的不一致。

  加色模式

  尽管如此，最终都是光线进入视觉系统。因此，加色和减色没什么区别。对于光源色而言，色光的叠加和混合都是有效的，视觉系统都能感受，比如红光和蓝光进入视觉系统会感知到两种色光的混合效果。因此，色光是在做加法，我们称之为加色模式。人们将光源色即显示器、手机等这类直接发射色光的体系定义为RGB模式。当日光中的所有色彩都进入视觉系统，表现为白色，当然，RGB的混合也就是白色了。

  RGB

  但是，物体反射的光线情况略有不同，红色物体反射红色光线，这是你能看见红色的原因，这意味着红色物体理论情况下吸收了其他色光；同理，蓝色物体反射了蓝色光线，吸收了其他光线。如果将不同的色相的颜料混合，它们会相互吸收彼此应当反射的光线，最终反射的可能是其他色光，这好比为太阳光做了减法，我们称之为减色模式。人们将物质的混合或者颜料的混合产生的色彩模式定义为CMY模式。

  CMY

  对于CMY模式而言，我们需要知道，这三种原色混合之后相互吸收光线，导致没有色光反射，呈现出黑色，但是由于颜料分子化学性质导致不可能有这么完美的黑色出现，实际上呈现出的是一团杂乱的类似于黑色的深色，因此，人们为了产生更加理想的黑色，专门制作了黑色颜料而不使用CMY的混合来产生，这种黑色颜料取名Key（关键），因此，你最常见到的就是CMYK（这里的K是黑色）。

注：对于减色模式，我们讲的是理想情况。实际上黄色物体不会完美地只反射黄光，实际上它反射了较多的红光和绿光，吸收了蓝光和紫光较多，红光和绿光反射后混合在一起，我们看起来就是黄色的；对于蓝色物体，它反射蓝光、紫光、绿光多一些，二者混合，蓝色物体吸收了黄色的红光，黄色物体吸收了蓝光和紫光，二者相互吸收，最终只留下了绿光，因此，它们之间的混合呈现出绿色。

  艺术家和设计师们几乎工作在减色模式，除非你要在Photoshop、Illustrator和InDesign软件中指明采用其他理论。

  对于设计师和艺术家而言，颜料的混合使用频繁，但是如果他们要操作舞台灯光，那么就需要涉及加色模式。

  减色模式

  【原色】

  你能够坚持到这里很不容易，我们的行程即将结束，请耐心观看。

  自从牛顿发现太阳光的色散以来，人们逐步完善了光谱理论，人类知道了太阳光是复色光，由红、橙、黄、绿、青、蓝、紫7种单色光组成。不仅如此，人们还发现有些单色光是可以通过其他单色光混合而成的。

  但是，有些单色光无论如何也无法通过其他色光混合而出。而红（Red）、绿（Green）、蓝（Blue）就是这些无法通过其他光线混合的单色光。我们将红、绿、蓝（RGB）称为光线的三原色。如上所说，它们是加色模式。

  人类除了明白光线的混合，对于颜料的混合往往不是那么如意，在作者看来，科学的理论与实践是如此的精确，相反，颜料的色彩混合总是比不上加色模式精确。

  尽管如此，几千年来，艺术家们经过尝试，最终发现了有些颜料的色彩同样无法通过其他颜料混合而成，起初这些颜料的原色是红、黄、蓝，不过现代科学家们认为这并不准确，因此，改为了青（Cyan）、品红（Magenta）、黄（Yellow），他们就是CMY的由来。不过如果你不是那么在意精确的细节的话，红黄蓝和CMY只是差了一点点，品红也是红色，青色类似于天空的色彩（有点像淡蓝色），因此，人们只是在色彩的精度上调整了，因此你不必纠结红、黄、蓝还是品红、黄、青的问题，它们说的是同一个事物。

  如今，打印、印刷等领域使用的都是CMY。RGB和CMY就是我们所说的光和颜料的三原色。它们各自在自己的领域无法被混合，因此成为了基色或者原色。

  【间色】

  在你理解了原色之后，间色就变得如此简单：三原色混合时产生间色。拿颜料的三原色来讲：

• 红色（原色） + 黄色（原色） = 橙色（间色）
• 黄色（原色） + 蓝色（原色） = 绿色（间色）
• 蓝色（原色） + 红色（原色） = 紫色（紫色）

  因此，三原色两两混合生成间色，即：红、黄、蓝产生橙、绿、紫三种间色。因此，间色只有三种。

  【复色】

  同理，三原色和间色混合生成复色。当然，如果你非要将复色与复色混合也是可以的，它们还是复色。也有许多设计师和艺术家们这么做，但是，对于新手，我不建议你进行如此复杂的色彩混合。事实上，仅仅使用原色和间色就已经非常复杂了，不要忘记，这些色彩除了色相上的维度，还有明度和饱和度可以更改，这些组合使得色彩可以呈现出上千万种可能。

  【复色的命名】

  对于色彩的命名，我从来都是深恶痛绝的，这是一个没有标准的地带，对于人类而言，并不友好。许多设计领域的事务都有难以建立管理和标准的问题，一些自以为是的家伙总会提出一个论调：这是艺术啊，艺术就是这样。对此，我从来都是嗤之以鼻，艺术与科学从来不是对立的，在人类的进化与发展史中，科学与艺术一直是两架并排前进的马车，有时，艺术超前于科学，有时科学超前于艺术，显然，你当前所处的时代，科学超前于艺术。每当科学太过超前于艺术就会造成人性的丢失，每当艺术太过超前于科学就会丧失理性。因此，艺术依然服从于科学，科学用艺术形式展现。二者相辅相成，协同前进。

  对于色彩的命名，在古英语中仅仅只有原色和一些间色有单独较短的词汇，比如Red、Blue等，你会发现这些原色和间色的词汇如此之短，这正是奇特之地，这意味这人类很早以前就发现了这些色彩，并且为之命名。但是复杂的色彩，是到很后期才出现的，并被艺术家们使用。

  但是，随着人类工艺和工业进程的提升，合成颜料的出现使得复色的组合变得简单，接下来的命名问题就变得十分具体。但是人们一直就没有好的方案。以致于总是出现我讨厌的命名方式：咖啡色、柠檬黄、橄榄绿、浅咖色、深咖色、铁灰、古铜、象牙白、蛋黄诸如此类，我已经无法再忍受这样的色彩命名体系，有些人连橄榄长什么样子都没有见过，他何以理解橄榄绿，绿到什么程度呢？

  这种命名是建立在人类对于自然之物的认识基础上的，在古代这带有极强的地域色彩，我认为这并不合理。有鉴于此，国际上给出了一些命名规范，不过收效甚微。

  对此，我们的做法是，对复色采取明确的符号系统。这种命名法则带有明显的逻辑或者数学思维。即将两种色彩的符号组合，使之成为复色新的名称，这种构造法类似于英语的构造，不过也不完全相同。如下：

• 红色（原色） + 紫色（间色） = 紫红色（复色）

  你发现了吗，这好很多，不过依旧存在一个问题，紫红色到底是什么色彩，这还不如先前的叫法。不过，人们为其约定了一个规则，哪种色彩名称在前，那么这种色彩就更加明显，如紫红色，说明这种色彩有紫色和红色成分，看起来像红色，也像紫色，但是“紫”在前面，我们说这种色彩紫色成分居多。如果是红紫色，那么红色成分居多。目前，这种专业的命名法是一些专业的设计师和艺术家常用的。

  不过色彩有千万种，不能一言以蔽之。因此，最终对于无法描述的色彩，我们只能采取编号或者使用16进制的RGB描述。这种描述方式非常精确，但是你无法直观地感受到色彩。

总结

  对于色彩的基础，你现在明白了色彩的属性：色相、明度、饱和度，还有原色、间色、复色。请原谅我大费周章地、啰嗦地解释这些概念，它们的确很基础，很重要。限于篇幅问题，我不再讲色相环，色相环将会留到下一章讲解，同时在那一章，将会有简单的案例。

我的案例尽量表现得简单，实际上我希望案例从简单到复杂，最终形成一个完整的项目。

  我们总结一下你学习到的概念：

• 色彩的属性：色相、明度、饱和度
• 色相与波长有关，明度与振幅和波长之比有关，比值越大，明度越高，反之越低。饱和度与色彩所占比例有关。
• 明度最重要，没有明度，就没有色相和饱和度。
• 色相分为原色、间色、复色
• 原色不可被混合而成
• 间色由两种原色混合，总共有三种
• 光（加色模式）的三原色是红（Red）、绿（Green）、蓝（Blue） = RGB
• 颜料（减色）的三原色是青色（Cyan）、品红（Magenta）、黄色（Yellow） = CMY
• 由于物理和材料分子原因，CMY无法混合出纯净的黑色，因此使用单独的黑色，补充后得到CMYK模式，这里的K是黑色，意味关键色彩。
• 加色和间色模式本质不变，加色是色光相加，间色是物质吸收了色光，对色光进行了减法。
• 复色的命名采用色彩的派生法，如紫红色、红紫色、蓝紫色、紫蓝色......，哪种色彩在前，表明其成分居多。

下章内容

• 色相环与案例

  如果文章对你有价值，让你得到了提升，请你相信作者，并且关注他，转发文章让更多的人看到有质量的内容。或者用【打赏】喂食作者，让他继续为你奋斗。如果你有疑问或建议，请留言告诉我。

閱讀更多 知更常青藤 的文章

關鍵字: 设计师 Photoshop 数学