场景：PM和UI讨论广告的背景颜色中，PM：“这个广告的背景和内容采用差不多的颜色，区分度会不会不高。”UI：“不会啊，我专门使用单色相配合不同的饱和度和亮度设计的。”PM不停的点着自己快断的脑袋，其实不知道UI说的是什么意思。
本人为了跟充满艺术气质的UI设计师更好的沟通，能够听懂一点在我耳中的“天籁之音”。暗地里学习了一下UI设计，在家里啃着一本《众妙之门-网站UI设计之道》，不知道是我买到了盗版的还是翻译质量的问题，在看到色彩入门时，hue和tone都翻译为色调，让我完全迷失在色调和色调的世界里。再看到色度、色彩后，我彻底崩溃了。
为了秉承“不抛弃、不放弃”的光荣传统，上网查资料，装个photoshop，开始捣腾着ps的拾色器，终于有点明白。决定试着用俗人的语言说说Hue（色相）、Tint（色彩）、Shade（色度）、色调（Tone）的不同。
首先需要了解眼睛的色彩接收原理，人的研究有三个色彩接收器，分别对应红色、绿色和蓝色，通过三种颜色的不同组合，我们可以看看各种各样的颜色。下面开始说说上面提到的四种色吧。
Hue（色相），是饱和度和亮度都为100%的颜色。我的理解是，红色、绿色、蓝色三种原色，两两以不同比例混合后产生的颜色（可以只有一种颜色，最多只能两种颜色混合，不能三种颜色混合）。所有的色相可以用色相环来展示。
Tint（色彩），是纯色与白色度组合产生的颜色。我的理解是，hue（色相）中的任意一种颜色和白色以不同比例混合后产生的颜色。因此，一种hue（色相）通过加入不同比例的白色，可以产生一系列的Tint（色彩）。如下图的红色产生的色彩。
Shade（色度），是纯色与黑色度组合后产生的颜色。我的理解是，hue（色相）中的任意一种颜色和黑色以不同比例混合后产生的颜色。因此，一种hue（色相）通过加入不同比例的黑色，可以产生一系列的shade（色度）。如下图的红色产生的色度。
tone（色调），是纯色和灰色度组合产生的颜色。我的理解是，hue（色相）中的任意一种颜色和黑色、白色以不同比例混合后产生的颜色。因此，一种hue（色相）通过加入不同比例的黑色和白色，可以产生一系列的tone（色调）。如下图的红色产生的色调。
如果大家对饱和度和亮度有点理解，简单地说在Hue（色相）就是饱和度和亮度都为100%，Hue值从0-360度变化而产生的所有颜色;而白色度，其实就是降低饱和度，当饱和度为0时，颜色就是白色，因此Tint（色彩）就是所有的hue（色相）颜色在亮度为100%的情况下，调整饱和度得到的所有颜色;反之，黑色度，就是降低亮度，当亮度为0时，颜色就是黑色，因此Shade（色度）就是所有的hue（色相）颜色在饱和度为100%的情况下，调整亮度而得到的所有颜色。那么，tone（色调）就是所有的hue（色相）颜色通过同时调整饱和度和亮度得到的所有颜色。
下次，你可以跟UI说：“这个logo的颜色我喜欢，不过色度是否可以在深点”。也许，UI会有一种相逢恨晚的感觉，前提是不要露底了。
注：saturation（饱和度）是指色彩的鲜明程度与它最大可能的鲜明程度的比值，范围是0100%;brightness（亮度）是指色彩的明亮程度，范围是0100%。文章把英文在括号外面，括号内写中文，是希望去记住英文，因为不同人对这几个英文都有不同的翻译，理解了区别，就是中文不一样，稍作理解就能够对应回英文，从而知道其所指。
网友评论