手机
当前位置:查字典教程网 >平面设计 >平面设计理论 >菜鸟玩HSL转RGB
菜鸟玩HSL转RGB
摘要: 为什么要做HSL转RGB的原因,设计不想多谈,仁者见仁智者见智。本文的价值,是希望能帮助需要的朋友少走弯路,仅此而已。MicrosoftO...

 为什么要做HSL转RGB的原因,设计不想多谈,仁者见仁智者见智。本文的价值,是希望能帮助需要的朋友少走弯路,仅此而已。

Microsoft Office支持的色彩模式有两种:RGB和HSL。HSL由于其直观性,是设计最为常用的色彩模式。在单一形状的颜色调整中,HSL可以直接在Office中操作,虽然比RGB多了一步切换,但也不是什么大事,习惯就无所谓。不过如果要进行批量改色,那么选择形状→填充→其他填充→自定义→修改RGB或HSL值,就显得繁琐无比。而目前支持批量修改颜色的插件几乎没有或者功能不全,无法达到设计的目的,于是设计萌生了自己做一个伪插件的念头。

菜鸟玩HSL转RGB1

图1 PPT中每次操作,让批量改色无比繁琐

首先,RGB和HSL都是计算机成熟的色彩模式,那么网上肯定有相关的实现方式。于是在维基百科上,看到了这条百科:http://zh.wikipedia.org/wiki/HSL和HSV色彩空间

【从HSL到RGB的转换】(转换公式来自维基百科)

给定HSL空间中的(h,s,l)值定义的一个颜色,带有h在指示色相角度的值域[0,360)中,分别表示饱和度和亮度的s和l在值域[0,1]中,相应在RGB空间中的(r,g,b)三原色,带有分别对应于红色、绿色和蓝色的r,g和b也在值域[0,1]中,它们可计算为:

首先,如果s=0,则结果的颜色是非彩色的、或灰色的。在这个特殊情况,r,g和b都等于l。注意h的值在这种情况下是未定义的。

当s≠0的时候,可以使用下列过程:

菜鸟玩HSL转RGB2

刚开始看这段,设计这个编程和EXCEL菜鸟也着实头疼,但既然都是计算,EXCEL肯定是能做的,于是设计硬着头皮在EXCEL中开始弄数据。

菜鸟玩HSL转RGB3

图2 单元格填入文字和初始数字

开始分析公式,“给定HSL空间中的(h,s,l)值定义的一个颜色,带有h在指示色相角度的值域[0,360)中,分别表示饱和度和亮度的s和l在值域[0,1]中,相应在RGB空间中的(r,g,b)三原色,带有分别对应于红色、绿色和蓝色的r,g和b也在值域[0,1]中”。要注意的是,公式里的h/s/l都是转换后的,h值域是[0,360],s和l的值域是[0,1]。这句话很重要,设计刚开始也是犯了不少错误,就是没搞清这里的值域。那怎么转换值域呢,H要除以360(这里有坑,最后谈),S和L要分别除以255。如图2中,HSL(0,255,128)转换值域后是(0,1,0.5)。这也是为什么维基上的公式,要判断L跟1/2的关系的问题所在。

继续分析:“首先,如果s=0,则结果的颜色是非彩色的、或灰色的。在这个特殊情况,r,g和b都等于l”。用EXCEL理解的话来说是这样的:如果代表饱和度S的单元格C3=0,那么F3(R)、G3(G)、H3(B)都等于D3,否则继续判断。由于最后还要给G3、H3复制公式,所以锁定D3。因此F3(R)单元格的第一步公式是:if($C$3=0,$D$3,)。这个条件判断先留着。

然后继续分析饱和度s≠0的情况。

菜鸟玩HSL转RGB4

注意,这里的l是转换过值域的亮度,所以我们需要先把D3除以255,再来跟0.5相比较。在K3输入q的公式:=IF(D3/255

【菜鸟玩HSL转RGB】相关文章:

视觉设计师怎样让前端100%实现设计效果?

电商海报调整设计教程

字体设计的基本原则

手绘POP基础知识:构成篇

世界著名啤酒品牌包装精品

设计师如何准确找到自己的职业角色?

手绘POP基础知识:版式篇

如何才能设计出用户真正愿意买单的产品

设计师必须掌握的贝塞尔曲线的秘密

矩形造字十步法

精品推荐
分类导航