场景：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(饱和度)是指色彩的鲜明程度与它最大可能的鲜明程度的比值，范围是0~100%;brightness(亮度)是指色彩的明亮程度，范围是0~100%。文章把英文在括号外面，括号内写中文，是希望去记住英文，因为不同人对这几个英文都有不同的翻译，理解了区别，就是中文不一样，稍作理解就能够对应回英文，从而知道其所指。

作者：苦茶

本文来源：互联网的一些事