认出颜色

辨识色彩是一件主观的事情，看到一张图片的时候，我们往往会受画面中的不同元素的颜色组合的影响。产生一部分人称之为”错觉”的认识。

因此，为了能够学习和使用色彩，首先我们要知道我们看到的颜色是什么。如果能够量化地描述一个颜色，让我们看到某个色彩的时候会联想到某些量化的指标，那么这对我们辨识一个颜色会很有帮助。现代计算机的发展让我们有了易学的可以量化描述颜色的模型。这个模型让我们能够相对准确地描述我们看到的颜色到底是哪个颜色。

* 一些理论认为黑白灰不能称之为颜色或者色彩。但在本文中，黑白灰都被囊括在颜色这个概念之内。 我不希望作者和读者陷入文字游戏中。如果你遇到某个词，根据本文上下文推断出来的意思和你认知中的意思不一致，请当作你根据上下文推断出来的那个意思理解。

量化描述一个色彩：HSV 模型

接触过设计软件的人对这些描述色彩的模型应该都不陌生：RGB、CMYK、HSL、HSV.

色彩空间和色彩模型的含义不同。RGB、CMYK、HSL、HSV 这些词被称为色彩空间和色彩模型时的含义也不相同。我们下文把其当作理想的数学模型（即色彩模型）看待。

每个模型有不同的用处，RGB 是为了显示器显色设计的，CMYK 则是为了印刷。HSL 和 HSV 则是为人类使用而设计的。

我们在这里来熟悉 HSV 模型。

数学定义-资料

色相

色相本身带有“亮度”

一些在实践：

1. 当我们想要更深的颜色，可以改变色相试试

   经典的两个例子：

   • 黄色和橙色
   • 天蓝色和靛蓝色

   橙色的感官亮度会比黄色更低，因此当我们需要一个比黄色看起来更深的颜色的时候，相比直接拉低 V 的值，将色相向橙色偏移往往会更有感觉。

   橙色在描述黄金的阴影的时候尤其有效。

   

1. 现实中的光照是有颜色的，物体也往往是有颜色的，因此眼睛对于有颜色的光打到有颜色的物体产生的色彩效果更熟悉。因此当我们在寻找更深和更浅的颜色的时候，我们可以假想光的颜色来改变色相，或者只是有意识地试着改变一下色相。这样得到的新颜色对人眼来说往往才更加自然。如果我们将这样的特性夸张化，或许能做出很好的风格化效果。

一些“对比”对颜色认知的影响的经验

在对比强烈的环境下，我们的眼睛更难区分相近颜色之间的差别（左图）。相对的，在对比弱的环境下（右图），眼睛可以更容易地发现相近的颜色的差别。

因此在做背景颜色对比弱的设计的时候，例如产品网页的日间模式或夜间模式，我们更需要注意颜色值的差异不需要特别大。

此外，因为个背景是白色的，我们在选择文字的颜色的时候如果直接选择 #000000，这些文字会产生强大的对比，夺走大量的注意力。同时可能会让长时间阅读变得疲惫。这件事牵涉到“灰度”概念， 我们会在后面介绍。

色相之间的细微差别不能被忽视

实话说，我一直觉得偏绿色色相的黄色有一种发芽的土豆的感觉，让我有种不适感，因此我在选择黄色的时候通常会选择偏红色色相的黄色。

彼此差 10 度的色相已经会带来比较明显的视觉感觉上的差异了。如何理解这些色相差异带来的感受，它们可能是主观的，需要在实践中积累。

不同色相附近数值差异给人带来的感官差异的大小不同。我看不出来 236 度和 246 度的差异。

颜色与注意力

颜色与注意力有很大的关系，有这样一些经验规律：

• 颜色与背景对比越强烈的元素更容易吸引注意力
  
  
• 高饱和度和明度的元素更容易吸引注意力
  
  

即使 Block 在上方，Key 还是更能吸引读者第一眼的注意力。即使蓝色背景的图在右边我想读者第一眼也更容易看向蓝色背景的图。

• 如果是要被长时间阅读的内容，过高的饱和度会让读者眼睛疲劳。因此长时间阅读的部分，例如文章段落，我们通常会选择饱和度较低的背景+对比不那么强烈的文字颜色。

文字的“灰度”

这个部分使用“灰度”狭义的词义，指文字的视觉重量或密度。希望不被与其它场景下“灰度”的词义混淆，或被望文生义。

这两段文字看起来或许颜色相近，但其实有着很大的区别。

左图的文字颜色为 #00000 明度为 0%，字重为普通 Normal ；右图为 #464444 明度为 27%，字重为中等 Medium . 可以发现，我们对文字颜色的感知并不仅仅由文字颜色决定，还受背景颜色、字重、字体、字距行距等等的影响。任何影响文字形态的因素都会影响文字的“灰度”。

我想大家也能很直观的发现留白的地方越多，我们感受到的“灰度”越浅。

同时我们可以发现“灰度”之间的各种因素是互相影响的；如上图，两段文字字重相同，但是却感觉左边的字重更重一些。正是因为各个因素互相影响十分复杂，所以我们抽象出一个“灰度”的概念来描述人对文字的视觉重量或密度的直观感受。

需要在意“灰度”的场景

在长文本的场景，我们希望灰度不要太深，因为这往往带来了更强烈的文字和背景对比，长期阅读给人带来视觉疲劳。另一方面，如果对比过高，反而让文字更难辨识。

一些经验：

• 长文本的字重不建议超过 Medium. 一个字体中 Normal 和 Regular 字重一般是为了阅读设计的，是比较好的选项。
• 如果使用很细的字体，可以用与背景对比强一点的颜色；相对的，如果你的字体本身较粗，就让颜色对比弱一点。

同时，从一个设计项目的整体上来看，一个元素的灰度也会影响整个设计的视觉重心。灰度与背景更强的元素可能更容易吸引读者的注意力。

此外，灰度的思想不仅仅可以用于描述长文字，它也适合描述任何类似长文本这样的“密铺”的视觉元素，例如一个花纹图案平铺的背景。我们也可以用灰度描述其它非密铺元素的“视觉重量或密度”，不过在考虑这样的视觉元素的时候，我们可以更精密地思考字重、颜色、形状等。也就没有必要用灰度这样的概念了。

资料

设计师电脑上的颜色不是读者被看到的颜色

在考虑任何设计内容的时候，我们都要考虑读者是在什么条件下看到内容的。颜色更是要被考虑的重点。这里有一些例子：

• 我们要做一个 Nova 见面会，教师的设备是投影仪，并且光线条件不好。那么用户看到的内容的饱和度会降低很多，明度会提高不少。
• 我们要做一个网站，它通常被人在显示器上阅读，那么可能更接近我们制作内容时的色彩。
• 我们要做一个三折页，它要被印刷出来，印刷后的高饱和度颜色对眼睛的刺激度可能远远低于我们在显示器上看到的。这不仅仅是因为它以 CMYK 格式被印刷，还因为纸和颜料是通过反光被看到。

颜色在是各类场景下产生偏差的重灾区。下文会介绍一些防止发生意料之外的偏差的经验。

印刷

• 当设计印刷物的时候，最好创建文件时就用 CMYK 色彩格式设计。但是某些图形效果只能在 RGB 空间使用，若是有这样的需求，使用 RGB 设计导出前转为 CMYK 格式也没有大碍。不过在印刷前务必转为 CMYK 格式并确认颜色。
• 在 CMYK 格式下的黑色建议使用 K 值为满，其它值为 0 的颜色。这样了印刷黑色时只使用黑色墨水，可以防止不同墨混合产生的溢色现象，也可以节约墨水。设计软件在将 RGB 转 CMYK 时通常会把黑色转为 CMY 的混合而不是满的 K 值，这点需要注意。

让人眼前一亮的设计不仅仅来自颜色。在有限的时间内，如果过于专注颜色被展示的效果而忽视了将其它内容做得更好，就有些得不偿失了。设计师在经验不断积累后才变得可靠，不出纰漏。那么没有那么多经验的时候，尽自己所好得到权衡后的结果吧。

资料

积累色彩经验

实践是最高效的手段：临摹喜欢的画师、临摹照片、对喜欢的网站取色、看到喜欢的照片的时候思考它其中的颜色的值、思考现实中眼睛看到的颜色之间的关系。这些比看多数“配色视频”和“审美提升视频”更有帮助。

随机配色工具

我没用过随机配色工具，但或许会对一些人有帮助