HSL模型的人性化设计
更新时间:2013/2/1 点击:1867次
对于视觉设计师来说,RGB、CMYK什么的就像左右手一样熟悉。但如果仅用心算的方法,不借助于Photoshop拾色器或任何类似的工具,你可不可以快速说出“海棠红”所对应的RGB色值?如果再加一点橙色进去,把亮度提高一点,色值又是多少?
很难回答,是吧……面对这些坑爹的问题,视觉设计师/前端工程师们通常只能打开Photoshop,输入当前颜色对应的色值,在色板上调出新的颜色,再把色值复制下来,替换当前的色彩。
人生很短暂,这样白白浪费掉大块的时间,你甘心吗?
那么,让我们来探索一下有没有更好的解决方案。
让人又爱又恨的RGB
RGB是基于色光混合的原理设计的,是一种以硬件为导向的色彩模型,它描述了显示器的电子枪打在Red红、Green绿、Blue蓝三色发光极上的显色方式。当红绿蓝三色光的亮度均为最大值(255)的时候,屏幕上重现的颜色就是最亮的白色,都为0的时候,结果就是黑色。
如果想要得出刚才提到的“海棠红”,我们就要把红光调到最亮,把绿光的亮度调到1/5左右,再把蓝光的亮度调到1/3左右,如下图:
同样,要得到刚才说的“加点橙色进去, 再亮那么一点点”的颜色,我们要把绿光调亮1倍多,再把蓝光调暗少许,如下图:
虽然得到了需要的色彩,但我们所做的事情与“橙色”或“增加亮度”实在扯不上关系。这种调色方法,完全不符合我们对颜色的直观感受。连这种事都可以忍受吗?不要再假装视觉设计师了,舞台灯光师才是你的真实身份!