产品经理眼中的色相、色彩、色度和色调

作者:浩网科技
发布时间:2011-11-27

场景:PM和UI讨论广告的背景颜色中,PM:“这个广告的背景和内容采用差不多的颜色,区分度会不会不高。”UI:“不会啊,我专门使用单色相配合不同的饱和度和亮度设计的。”PM不停的点着自己快断的脑袋,其实不知道UI说的是什么意思。 互联网的一些事

  本人为了跟充满艺术气质的UI设计师更好的沟通,能够听懂一点在我耳中的“天籁之音”。暗地里学习了一下UI设计,在家里啃着一本《众妙之门-网站UI设计之道》,不知道是我买到了盗版的还是翻译质量的问题,在看到色彩入门时,hue和tone都翻译为色调,让我完全迷失在色调和色调的世界里。再看到色度、色彩后,我彻底崩溃了。

yixieshi

  为了秉承“不抛弃、不放弃”的光荣传统,上网查资料,装个photoshop,开始捣腾着ps的拾色器,终于有点明白。决定试着用俗人的语言说说Hue(色相)、Tint(色彩)、Shade(色度)、色调(Tone)的不同。

yixieshi

  首先需要了解眼睛的色彩接收原理,人的研究有三个色彩接收器,分别对应红色、绿色和蓝色,通过三种颜色的不同组合,我们可以看看各种各样的颜色。下面开始说说上面提到的四种色吧。 yixieshi

  Hue(色相),是饱和度和亮度都为100%的颜色。我的理解是,红色、绿色、蓝色三种原色,两两以不同比例混合后产生的颜色(可以只有一种颜色,最多只能两种颜色混合,不能三种颜色混合)。所有的色相可以用色相环来展示。 互联网的一些事

yixieshi

  Tint(色彩),是纯色与白色度组合产生的颜色。我的理解是,hue(色相)中的任意一种颜色和白色以不同比例混合后产生的颜色。因此,一种hue(色相)通过加入不同比例的白色,可以产生一系列的Tint(色彩)。如下图的红色产生的色彩。 yixieshi

yixieshi

  Shade(色度),是纯色与黑色度组合后产生的颜色。我的理解是,hue(色相)中的任意一种颜色和黑色以不同比例混合后产生的颜色。因此,一种hue(色相)通过加入不同比例的黑色,可以产生一系列的shade(色度)。如下图的红色产生的色度。

互联网的一些事

互联网的一些事

  tone(色调),是纯色和灰色度组合产生的颜色。我的理解是,hue(色相)中的任意一种颜色和黑色、白色以不同比例混合后产生的颜色。因此,一种hue(色相)通过加入不同比例的黑色和白色,可以产生一系列的tone(色调)。如下图的红色产生的色调。 互联网的一些事

yixieshi

  如果大家对饱和度和亮度有点理解,简单地说在Hue(色相)就是饱和度和亮度都为100%,Hue值从0-360度变化而产生的所有颜色;而白色度,其实就是降低饱和度,当饱和度为0时,颜色就是白色,因此Tint(色彩)就是所有的hue(色相)颜色在亮度为100%的情况下,调整饱和度得到的所有颜色;反之,黑色度,就是降低亮度,当亮度为0时,颜色就是黑色,因此Shade(色度)就是所有的hue(色相)颜色在饱和度为100%的情况下,调整亮度而得到的所有颜色。那么,tone(色调)就是所有的hue(色相)颜色通过同时调整饱和度和亮度得到的所有颜色。 互联网的一些事

  下次,你可以跟UI说:“这个logo的颜色我喜欢,不过色度是否可以在深点”。也许,UI会有一种相逢恨晚的感觉,前提是不要露底了。

yixieshi

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