这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > PhotoShop > 正文
Reading Color
2013年11月19日 PhotoShop ⁄ 共 2394字 等你评论

中秋的时候我们小组在杭州的 Central Perk 做了一次分享,大家说说自己最近的动态以及感兴趣的东西,最后提到了色彩相关的内容。这一篇东西主要是我自己 YY 的,关于如何从 16 进制或者 RGB 表示的颜色值大致推其表示的色彩。

Format

首先简单说明一下颜色的表示方式。在 web 前端 CSS 代码里边,过去流行使用 hexadecimal color notation (HEX,16进制颜色) 或者是 RGB 的方式。例如对于绿色,多数情况我们会写成 #00FF00 或者 rgb(0, 255, 0)。在 CSS3 里边,新增了以 HSL (hue, saturation, lightness) 表示颜色的方式,刚才的绿色就可以写成 hsl(120, 100%, 50%)。在 Photoshop 或者 Illustrator 里边,可以使用 HSB 方式来描述颜色。HSB 和 HSL 是类似的表示方式,这里的 B 指的是 Brightness。

至于 HSB 和 HSL 两者的区别,引用维基百科的解释(HSB 和 HSV 模式的在数值上是一样的):

二者在数学上都是圆柱,但 HSV(色相,饱和度,色调)在概念上可以被认为是颜色的倒圆锥体(黑点在下顶点,白色在上底面圆心),HSL 在概念上表示了一个双圆锥体和圆球体(白色在上顶点,黑色在下顶点,最大横切面的圆心是半程灰色)。注意尽管在 HSL 和 HSV 中“色相”指称相同的性质,它们的“饱和度”的定义是明显不同的。

color

fig.1 HSV and HSL color model from Wikipedia

 

至于 HSB 和 HSL 哪种更“好”,估计就跟讨论 Mac OS X 和 Windows 哪个更好一样吧。继续引用维基百科:

对于一些人,HSL 更好的反映了“饱和度”和“亮度”作为两个独立参数的直觉观念,但是对于另一些人,它的饱和度定义是错误的,因为非常柔和的几乎白色的颜色在 HSL 可以被定义为是完全饱和的。对于 HSV 还是 HSL 更适合于人类用户界面是有争议的。

就我个人而言,我更习惯 HSB。所以后面的部分内容是专门针对 HSB 来写的。

 

Conversion

虽然 HSB 和 HSL 两种表示方法有些区别,但是它们的值都是 RGB 的简单变换。在维基百科上有详细的转换规则,包括 RGB to HSB,RGB to HSL,HSB to RGB,HSL to RGB。为了方便后面的说明,把这里需要的 RGB to HSB 的转换公式贴一下。

注意,在 CSS 里边用 rgb(0, 255, 0) 描述颜色时,这三个数值范围是 0-255 之间的整数。但在下面的公式里,把这三个值转成了 0-1 之间的实数。 设 max 是 r,g,b 中最大的,min 则是它们当中最小的。

color

fig.2 RGB to HSV formula

 

计算结果里边 h 的范围是 0(含)-360(不含),s 和 v(b) 的范围是 0-1,包括 0 和 1。

 

Color Wheel

上面的转换结果得到的 h(Hue) 值是 0-360 之间的一个数,刚好是一个圆周。人眼可见光谱所包含的色彩就可以使用这样一个颜色轮盘来展现。

color

fig.3 color wheel

 

0° 为红色,顺时针为正向,120° 为绿色,240° 为蓝色,再转过 120° 回归到 0°。在 180° 位置上的青色是红色的反色。正向旋转 120° 到达 300° 为洋红,它是绿色的反色。继续正向旋转,过 360° 回归之后到达 60° 为黄色,它是蓝色的反色。

也就是说,青色是吸收了红色,反射绿色和蓝色的结果色;洋红是吸收了绿色,反射红色和蓝色的结果色;黄色是吸收了蓝色,反射红色和绿色的结果色。

如果在 Photoshop 里边打开上面这个颜色轮盘,给它加一个 Hue/Saturation 调整图层,把 Hue 滑块拖到 -60,那么上面这个轮盘的颜色就会顺时针移动 60°,图像上的黄色会变成红色,绿色变成黄色,青色变成绿色,蓝色变成青色,洋红变成蓝色,红色变成洋红。

color

fig.4 color wheel rotated -60 degrees using hue/saturation in Photoshop

 

Inferring the Color

如果你数学足够好,心算足够快,那么按照上面的公式,一眼分辨出 16 进制颜色值表示的具体色彩完全是没有问题的。

下面稍微慢一点,随便写一个颜色来分析一下,例如 #AE35D4。

这里红色值为 AE,A0 是160,那么第一反应红色会在 170 左右;绿色值为 35,转成 10 进制大约是 50,蓝色值最大,为 D4,大概是 210。

因此蓝色值非常大,比最小的绿色值大得多,那么绿色和蓝色的比值很小,因此饱和度就会比较高。蓝色和红色的叠加会比较明显,但偏向蓝色。之前说了蓝色和红色叠加出现的是洋红,往蓝色方向偏转,那么会是一个紫红色。RGB 三者的最大值为 D4,说明 Brightness 值很高,是一个明亮的紫红色。

 

Wrapping Up

上面的分析部分可以当成是个无聊的人闲着没事做,大半夜的一个人 YY 个东西 happy 一下哈。随便写个颜色,自己猜猜,再找个工具贴进去核对,发现居然差不多诶,就跟读书时候对上了所有的答案一样。

不过想熟练地使用类似 Hue/Saturation 这种调整工具的话,一点点对于色彩的基础知识还是有很大帮助的。

最后给个快捷键。在 Photoshop 的偏好设置里边 (CS5+),General 选项卡下有一个选项叫做 HUD Color Picker,默认的选项应该是 Hue Strip,我喜欢调成 Hue Wheel。

05

fig.5 HUD color picker options

 

这个选项的作用是,当你选中任何一个绘图工具的时候,在 Mac 上按住 Command + Option + Control,单击鼠标左键,在 Windows 上按住 Shift + Alt,单击鼠标右键,可以出来这个颜色选择轮盘,在用大屏幕画图的时候快速调整颜色比较方便。

color

fig.6 HUD color picker

原文地址:http://yehao.diandian.com/post/2013-09-23/40052640779

【上篇】
【下篇】
友荐云推荐
×