网页设计了解 RGB、HEX、HSL

　　在Photoshop等绘图或修图软件中，经常会看到调色板下面的RGB选项，通常让你输入数值或者拉动调节杆。那么，什么是RGB、HEX、HSL呢?如何精确输入一定的数值来调和出我们想要的颜色?

　　其实无论是RGB、HEX，还是HSL，它们的作用只有一个：用数字表达出一种颜色。

　　RGB数值

　　调色方式

　　它是电脑中用得最多的调色方式。在电脑调色板下面，经常能看到RGB(Red, Green, Blue)。RGB通过输入的数值，将红色、绿色和蓝色的光源以一定的量混合在一起，形成颜色。

　　软件中通常让你输入Red、Green、Blue对应的三个整数的数值，且范围必须在0-255之间。稍加计算，我们会发现：通过调节RGB的数值，可以得到256×256×256=16777216种颜色，当然，这只是理论上的数量。实际上，你光凭肉眼根本无法分辨这么多种颜色，另外颜色的正确显示及准确过渡取决于显示器的色域和色彩深度。

　　调整RGB数值，得到不同的颜色

RGB的结构是：rgb(red, green, blue)。

　　以下列举了一些常用颜色的RGB数值。

　　红色：rgb(255, 0, 0)

　　橙色：rgb(255, 128, 0)

　　黄色：rgb(255, 255, 0)

　　绿色：rgb(0, 255, 0)

　　蓝色：rgb(0, 0, 255)

　　紫色：rgb(170, 0, 255)

　　黑色：rgb(0, 0, 0)

　　白色：rgb(255, 255, 255)

　　灰色：rgb(128, 128, 128)

　　(只要三色值相等即可，值越接近255，就越接近白色，反之亦然)

　　有些时候，除了Red, Green, Blue以外，还会有一个需要设置的数值，那就是Alpha(不透明度)。这时候我们把它们叫做RGBA，Alpha通常可有可无。Alpha值通常在0.0与1.0之间，1.0表示完全不透明，0.0表示完全透明。

　　HEX数值

　　调色方式

　　其实它和RGB的原理差不多，都是用Red, Green, Blue相混合所产生的颜色，只不过换成了十六进制。

HEX的格式：# rrggbb

　　10用a表示，11用b表示，12用c表示，13用d表示，14用e表示，15用f表示。

　　十六进制数列：1，2，3，4，5，6，7，8，9，a，b，c，d，e，f，10，11，…，aa，ab，ac，…，fc，fd，fe，ff。

　　对应的十进制数列：1，2，3，4，5，6，7，8，9，10，11，12，13，14，15，16，17，…，170，171，172，…，252，253，254，255。

　　在有些软件中，直接输入这串数字就能直接找到对应的颜色，调色板就会出现相对应的颜色。

　　HSL数值

　　调色方式

　　HSL表示色相(Hue)、饱和度(Saturation)、亮度(Lightness)。结构是：hsl(hue, saturation%, lightness%)。其中饱和度和亮度是百分比，不是数值。

　　色相(Hue)的数值表示这种颜色在色相环中的度数。0表示色相环中0°的位置，即红色。同理，120表示绿色，240表示蓝色。

　　饱和度(Saturation)由0%到100%，其中0%其实就是灰色，100%是最鲜艳、最充分的颜色。

　　亮度(Lightness)也是由0%到100%，其中0%其实就是黑色，100%也就是白色。注意：亮度可以粗略地认为它就是明度，但它们之间也是有区别的。

　　基于以上关于RGB、HEX、HSL的了解，更加使设计师运用photoshop，通过计算来取得出自己所需要的颜色。

网页设计了解 RGB、HEX、HSL

延伸阅读

小程序名字修改的技巧规则

小程序商城怎么运营？

自建商城运营秘籍，吸引顾客有妙招！

小程序商城推广完全指南

推广引流方法有哪些，裂变营销什么意思

网页设计了解 RGB、HEX、HSL

延伸阅读

小程序名字修改的技巧规则

小程序商城怎么运营？

自建商城运营秘籍，吸引顾客有妙招！

小程序商城推广完全指南

推广引流方法有哪些，裂变营销什么意思

相关推荐