色生心中：人性化HSL模型.pdfVIP

色生心中 ：人性化的HSL模型 　　对于视觉设计师来说 ，RGB、CMY K什么的就像左右手一 熟悉。但如果仅用心算的方法 ，不 借助于Phot osho p拾色器或任何类似的工具 ，你可不可以快速说出“海棠红”所对应的RGB色值 ？如 果再加一点橙色进去 ，把亮度提高一点 ，色值又是多少 ？ 　　很难回答 ，是吧……面对这些坑爹的问题 ，视觉设计师/前端工程师们通常只能打开Phot osho p ，输入当前颜色对应的色值 ，在色板上调出新的颜色 ，再把色值复制下来 ，替换当前的色彩。 　　人生很短暂 ，这 白白浪费掉大块的时间 ，你甘心吗 ？ 　　那么 ，让我们来探索一下有没有更好的解决方案。 让人又爱又恨的RGB 　　RGB是基于色光混合的原理设计的 ，是一种以硬件为导向的色彩模型 ，它描述了显示器的电 子枪打在Red红、Green绿、Blue蓝三色发光极上的显色方式。当红绿蓝三色光的亮度均为最大 值(255)的时候 ，屏幕上重现的颜色就是最亮的白色 ，都为 的时候 ，结果就是黑色。 　　如果想要得出刚才提到的“海棠红” ，我们就要把红光调到最亮 ，把绿光的亮度调到1/5左右 ，再 把蓝光的亮度调到1/3左右 ，如下图 ： 　　同 ，要得到刚才说的“加点橙色进去 ， 再亮那么一点点”的颜色 ，我们要把绿光调亮1倍多 ，再 把蓝光调暗少许 ，如下图 ： 　　虽然得到了需要的色彩 ，但我们所做的事情与“橙色”或“增加亮度”实在扯不上关系。这种调色 方法 ，完全不符合我们对颜色的直观感受。连这种事都可以忍受吗 ？不要再假装视觉设计师了 ，舞 台灯光师才是你的真实身份 ！ HSL色彩模型又是什么 ？ 　　HSL同 使用了3个分量来描述色彩 ，与RGB使用的三色光不同 ，HSL色彩的表述方式是 ：H(hue)色相 ，S(sat urat io n)饱和度 ，以及L(light ness)亮度。听起来一 复杂 ？稍后你就会发现 ，与“反人类”的RGB模型相比 ，HSL是多么的友好。 　　HSL的H(hue)分量 ，代表的是人眼所能感知的颜色范围 ，这些颜色分布在一个平面的色相环上 ，取值范围是 °到36 °的圆心角 ，每个角度可以代表一种颜色。色相值的意义在于 ，我们可以在不 改变光感的情况下 ，通过旋转色相环来改变颜色。在实际应用中 ，我们需要记住色相环上的六大 主色 ，用作基本参照 ：36 °/ °红、6 °黄、12 °绿、18 °青、24 °蓝、3 °洋红 ，它们在色相环上 按照6 °圆心角的间隔排列 ，如下图 ： 　　HSL的S(sat urat io n)分量 ，指的是色彩的饱和度 ，它用 %至1 %的值描述了相同色相、明度 下色彩纯度的变化。数值越大 ，颜色中的灰色越少 ，颜色越鲜艳 ，呈现一种从理性(灰度)到感性( 纯色)的变化 ，如下图 ： 　　HSL的L(light ness)分量 ，指的是色彩的明度 ，作用是控制色彩的明暗变化。它同 使用了 % 至1 %的取值范围。数值越小 ，色彩越暗 ，越接近于黑色 ；数值越大 ，色彩越亮 ，越接近于白色。 HSL能为我们带来什么 ？ 　　我们来做一个基于HSL的调色实践。想想开篇提到的“海棠红” ，那应该是一个介于洋红和红色之 间的 ，性感娇艳的颜色。我们可以假定它在色相环H上的角度是33 °左右 ，饱和度较高 ，明度适中 ，看看那是什么颜色 ？ 　　我们想要的颜色应该再接近红色一点 ，让我们把色相H旋转到35 ° ，现在好多了。 　　通过改变色相值H ，我们实现了色相从洋红向海棠红的偏移。 大感觉接近了 ，但还是略微有点 灰暗 ，还谈不上性感…… 　　现在 ，我们可以通过增加饱和度S ，让这个颜色变得更鲜活。 　　增加了2 %的饱和度之后 ，颜色看起来亮丽了许多。 　　还是不对。海棠红是属于少女的颜色 ，应当再嫩一点、通透一点 ，不会这么热烈。我们需要通 过增加亮度L ，来找到那种微妙的感觉。 　　把刚才的颜色略微提亮1 % ，我们终于得到了想要的色彩 ： 　　同理 ，面对“加点橙色进去 ， 再亮那么一点点”这 粗鲁的要求 ，我们可以仅通过心算就大致确 定色相环的相位和明度值。在这里 ，我们需要让H增加25° ，L增加5% ： 　　就是这 ！现在让我们重温一下整个调色过程。 　　在使用HSL调色的过程中 ，我们并不需要打开拾色器 ，也不需要了解复杂的色光混合原理 ，这 是一个