知识库



按索引浏览词汇表

特殊 | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | 全部

H

HSB颜色模式

HSB又称HSV,表示一种颜色模式:在HSB模式中,H(hues)表示色相,S(saturation)表示饱和度,B(brightness)表示亮度。

HSB是色相、饱和度、明度的相应英文首字母缩写。

平常表述颜色时,一般用的就是HSB模式,因为人眼看到的就是色相、饱和度、明度,HSB模式对应的媒介是人眼。

1、色相(H,hue)在0~360°的标准色轮上,色相是按位置度量的。在通常的使用中,色相是由颜色名称标识的,比如红、绿或橙色。黑色和白色无色相。

红:0度或者360度
黄:300度
绿:240度
青:180度
蓝:120度
洋红:60度




2、饱和度(S,saturation):表示色彩的纯度,饱和度为0时为灰色。白、黑和其他灰色色彩都没有饱和度的。饱和度高,色彩鲜艳,在最大饱和度时,每一色相具有最纯的色光。取值范围在0-100之间。



3、亮度(B,brightness或V,value):是色彩的明亮度,表示色彩的明暗程度。为0时即为黑色。最大亮度是色彩最鲜明的状态。取值范围在0-100之间。





HTML Colors


颜色名列表

本页提供了被大多数浏览器支持的颜色名。

提示:W3C 的 HTML 4.0 标准仅支持 16 种颜色名,它们是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

如果使用其它颜色的话,就应该使用十六进制的颜色值


颜色名 十六进制颜色值 颜色
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  
Black #000000  
BlanchedAlmond #FFEBCD  
Blue #0000FF  
BlueViolet #8A2BE2  
Brown #A52A2A  
BurlyWood #DEB887  
CadetBlue #5F9EA0  
Chartreuse #7FFF00  
Chocolate #D2691E  
Coral #FF7F50  
CornflowerBlue #6495ED  
Cornsilk #FFF8DC  
Crimson #DC143C  
Cyan #00FFFF  
DarkBlue #00008B  
DarkCyan #008B8B  
DarkGoldenRod #B8860B  
DarkGray #A9A9A9  
DarkGreen #006400  
DarkKhaki #BDB76B  
DarkMagenta #8B008B  
DarkOliveGreen #556B2F  
Darkorange #FF8C00  
DarkOrchid #9932CC  
DarkRed #8B0000  
DarkSalmon #E9967A  
DarkSeaGreen #8FBC8F  
DarkSlateBlue #483D8B  
DarkSlateGray #2F4F4F  
DarkTurquoise #00CED1  
DarkViolet #9400D3  
DeepPink #FF1493  
DeepSkyBlue #00BFFF  
DimGray #696969  
DodgerBlue #1E90FF  
Feldspar #D19275  
FireBrick #B22222  
FloralWhite #FFFAF0  
ForestGreen #228B22  
Fuchsia #FF00FF  
Gainsboro #DCDCDC  
GhostWhite #F8F8FF  
Gold #FFD700  
GoldenRod #DAA520  
Gray #808080  
Green #008000  
GreenYellow #ADFF2F  
HoneyDew #F0FFF0  
HotPink #FF69B4  
IndianRed #CD5C5C  
Indigo #4B0082  
Ivory #FFFFF0  
Khaki #F0E68C  
Lavender #E6E6FA  
LavenderBlush #FFF0F5  
LawnGreen #7CFC00  
LemonChiffon #FFFACD  
LightBlue #ADD8E6  
LightCoral #F08080  
LightCyan #E0FFFF  
LightGoldenRodYellow #FAFAD2  
LightGrey #D3D3D3  
LightGreen #90EE90  
LightPink #FFB6C1  
LightSalmon #FFA07A  
LightSeaGreen #20B2AA  
LightSkyBlue #87CEFA  
LightSlateBlue #8470FF  
LightSlateGray #778899  
LightSteelBlue #B0C4DE  
LightYellow #FFFFE0  
Lime #00FF00  
LimeGreen #32CD32  
Linen #FAF0E6  
Magenta #FF00FF  
Maroon #800000  
MediumAquaMarine #66CDAA  
MediumBlue #0000CD  
MediumOrchid #BA55D3  
MediumPurple #9370D8  
MediumSeaGreen #3CB371  
MediumSlateBlue #7B68EE  
MediumSpringGreen #00FA9A  
MediumTurquoise #48D1CC  
MediumVioletRed #C71585  
MidnightBlue #191970  
MintCream #F5FFFA  
MistyRose #FFE4E1  
Moccasin #FFE4B5  
NavajoWhite #FFDEAD  
Navy #000080  
OldLace #FDF5E6  
Olive #808000  
OliveDrab #6B8E23  
Orange #FFA500  
OrangeRed #FF4500  
Orchid #DA70D6  
PaleGoldenRod #EEE8AA  
PaleGreen #98FB98  
PaleTurquoise #AFEEEE  
PaleVioletRed #D87093  
PapayaWhip #FFEFD5  
PeachPuff #FFDAB9  
Peru #CD853F  
Pink #FFC0CB  
Plum #DDA0DD  
PowderBlue #B0E0E6  
Purple #800080  
Red #FF0000  
RosyBrown #BC8F8F  
RoyalBlue #4169E1  
SaddleBrown #8B4513  
Salmon #FA8072  
SandyBrown #F4A460  
SeaGreen #2E8B57  
SeaShell #FFF5EE  
Sienna #A0522D  
Silver #C0C0C0  
SkyBlue #87CEEB  
SlateBlue #6A5ACD  
SlateGray #708090  
Snow #FFFAFA  
SpringGreen #00FF7F  
SteelBlue #4682B4  
Tan #D2B48C  
Teal #008080  
Thistle #D8BFD8  
Tomato #FF6347  
Turquoise #40E0D0  
Violet #EE82EE  
VioletRed #D02090  
Wheat #F5DEB3  
White #FFFFFF  
WhiteSmoke #F5F5F5  
Yellow #FFFF00  
YellowGreen #9ACD32  

P

PleaseJS Color Library

#PleaseJS

www.checkman.io/please

Please.js is a polite companion that wants to help you make your projects beautiful. It uses HSV color space to create random pleasing colors as well as color schemes based on a given color. It has two core functions and a bunch of little helpers for you to use.

Please.make_color();
//or
Please.make_scheme(
{
	h: 145,
	s: .7,
	v: .6
},
{
	scheme_type: 'triadic',
	format: 'rgb-string'
});

##Core

make_color

Please.make_color({options})

The make_color function by default will generate and return a random hex string using the golden ratio to ensure that the color will look nice on your screen.

You can also pass an options object to make_color and have it do a whole bunch of different things.

make_color options:

  • hue(0-360) By setting the hue, you determine the color.
  • saturation(0.0-1.0) By setting the saturation, you determine the distance from gray.
  • value(0.0-1.0) By setting the value, you determine the balance between black and white.
  • base_color('the name of an HTML color') Setting a base_color (e.g. 'pink') will create a random color within the HSV range of the chosen color. Please will recognize any of the 146 standard HTML colors, it has a very good memory. (参看143个颜色值
  • greyscale | grayscale(true/false) Setting either greyscale or grayscale (but we all know which one is correct) to true will cause all of the colors you generate to be within the grey or gray range. This is effectively the same as setting your saturation to 0.
  • golden(true/false) Setting golden to true randomizes your hue (overrides hue setting) and makes you a spectacular color based on the golden ratio. It's so good, it's the default. Make sure to turn it off if you want to have more control over your generated colors.
  • full_random(true/false) Setting full_random to true will make Please lose its mind. It will completely randomize the hue, saturation, and value of the colors it makes.
  • colors_returned(1-infinity) Setting colors_returned to higher than 1 will return an array full of the colors Please has made for you. If you set it to 1, you'll just get the one color! It makes a sort of sense if you think about it.
  • format('format string') Setting format string, will change the format of what make_color will return for you. The options are as follows (example is the color black):
    • 'hex' = '#000000'
    • 'rgb' = {r: 0, g: 0,b: 0}
    • 'rgb-string' = 'rgb(0,0,0)'
    • 'hsv' = {h: 0, s: 0, v: 0}

Here are the defaults for each option:

{
	hue: null,
	saturation: null,
	value: null,
	base_color: '',
	greyscale: false,
	grayscale: false,
	golden: true,
	full_random: false,
	colors_returned: 1,
	format: 'hex',
}

Here is an example of a fully random color call:

Please.make_color({
	golden: false,
	full_random: true
});

Here is an example that will produce 100 reds as RGB strings:

Please.make_color({
	golden: false,
	base_color: 'red',
	colors_returned: 100,
	format: 'rgb-string'
});

make_scheme

The second core function allows Please to make a color scheme for you.

Please.make_scheme(base_color,{options})

The make scheme function will return a series of colors based upon the color and options you feed it. The base_color must be in HSV color space and is an object in the format of

{
	h: ___,
	s: ___,
	v: ___
}

make_scheme options:

  • scheme_type (参看Adobe色轮
    • 'monochromatic' | 'mono' - Makes a 5 color scheme using your provided color, all the colors will be fairly similar to each other.
    • 'complementary' | 'complement' - Makes a two color scheme using your provided color, the 2nd color will be the complement of the 1st, such that mixing them will create a neutral grey.
    • 'split-complementary' | 'split-complement' | 'split' - Makes a three color scheme where the 2nd and 3rd colors are at a 30 degree split from the complement of the 1st color.
    • 'double-complementary' | 'double-complement' | 'double' - Makes a four color scheme where the 2nd color is the complement of the 1st, and the 3rd and 4th colors are complements of each other at a 30 degree ofset from the first pair
    • 'analogous' | 'ana' - Makes a six color scheme where each additional color is offset from the 1st by 20 degrees.
    • 'triadic' | 'triad' | 'tri' - Makes a 3 color scheme where the 2nd and 3rd color are equally spaced from the 1st.
  • format('format string') Setting format string, will change the format of what make scheme will return for you. The options are as follows (example is the color white):
    • 'hex' = '#ffffff'
    • 'rgb' = {r: 255, g: 255,b: 255}
    • 'rgb-string' = 'rgb(255,255,255)'
    • 'hsv' = {h: 0, s: 0, v: 1}

Here is an example of a complementary scheme in hex:

Please.make_scheme(
{
	h: 130,
	s: .7.
	v: .75
},
{
	scheme_type: 'complement',
	format: 'hex'
});

Here is an example that will produce a triadic scheme in rgb-strings:

Please.make_scheme(
{
	h: 130,
	s: .7.
	v: .75
},
{
	scheme_type: 'triadic',
	format: 'rgb-string'
});

Here are the defaults for each option:

{
	scheme_type: 'analogous',
	format: 'hex'
}

Other Methods

Please also has some bonus features. It allows you to convert freely between the color formats of RGB, HSV, and HEX.

RGB_to_HEX() HEX_to_RGB() RGB_to_HSV() HSV_to_RGB() HEX_to_HSV() HSV_to_HEX()

conversion from HSV or RGB expect an object with the properties

{
	r: 0-255,
	g: 0-255,
	b: 0-255
}

and

{
	h: 0-360,
	s: 0.0-1.0,
	v: 0,0-1.0
}

respectively, while converstions from HEX expect a string. Return formats are modeled the same way as the arguments.

In addition Please, can convert from an HTML color name into HEX, RGB, or HSV.

NAME_to_HEX()
NAME_to_RGB()
NAME_to_HSV()

These functions take a string and return a HEX string or an RGB/HSV object.

I hope you enjoy using Please. Have fun, and remember to say the magic word.



R

rgba颜色值

一、RGB

在CSS中能够使用颜色名来使用颜色,如果不使用颜色名,我们使用RGB值来描述颜色,R代表红色red,G代表绿色green,B代表蓝色blue。

每一种颜色的范围在0~255之间,或者也可以用0%~100%这种表示范围,因此 RGB 能够表示 255*255*255 种颜色

二、RGBA: 

RGBA的意思是(Red-Green-Blue-Alpha)它是在RGB上扩展包括了“alpha”通道,运行对颜色值设置透明度。

rgba(0,0,0,0)四个值,前三个值的范围是0~255之间的整数或0-100的百分数

前三个值,描述的是三原色,分别代表红绿蓝三原色在预期色彩中的量。最后一个则代表透明度,

范围在0-1之间。1表示不透明,0表示全透明,0.5为半透明。


示例:

rgba(255,255,255,0)则表示完全透明的白色;

rgba(0,0,0,1)则表示完全不透明的黑色;

rgba(0,0,0,0)则表示完全不透明的白色,也即是无色;

三、十六进制的 RGB

1.颜色有 0~f 十六个分档,分别代表0~255。且颜色是aabbcc形式的,可以简写

2.颜色用 # 开头



取整函数

取整函数主要有三种:round()、ceil()、floor()



round:在英文中是有大约,环绕,在某某四周,附近的意思,所以,可以取其大约的意思,在函数中是四舍五入。

四舍五入的时候,正数,小数位大于5,则整数位加一,小数位小于5,则整数位不变,抹除小数位;负数,小数位小于5,则整数位不变,抹除小数位,小数位大于5,则整数位加一;整数,则不变。


ceil:在英文中,是天花板的意思,有向上的意思,所以,此函数是向上取整,它返回的是大于或等于函数参数,并且与之最接近的整数。

向上取整的时候,正数,则直接将当前整数加一;负数,则将整数后面的数据抹除;整数,则不变。



floor:在英文中,是地面,地板的意思,有下面的意思,所以,此函数是向下取整,它返回的是小于或等于函数参数,并且与之最接近的整数。

向下取整的时候,正数,则取其整数部位,抹除小数部位;负数,则取其整数加一;整数,则不变。




插值

颜色模型中的插值就是利用已知邻近像素点的灰度值(或RBG图像中的三色值)来产生未知像素点的灰度值,以便由原始图像再生出具有更高分辨率的图像。

插值的作用是对原图像的像素重新分布,从而来改变像素数量的一种方法。在图像放大过程中,像素也相应地增加,增加的过程就是“插值”发生作用的过程,“插值”程序自动选择信息较好的像素作为增加、弥补空白像素的空间,而并非只使用临近的像素,所以在放大图像时,图像看上去会比较平滑、干净。不过需要说明的是插值并不能增加图像信息,尽管图像尺寸变大,但效果也相对要模糊些,过程可以理解为白酒掺水。

插值几乎应用于所有需要进行图像缩放功能的领域内,如数码相机、图像处理软件(如Photoshop)。


运算符

运算符按其功能可分为以下几类:
1、算术运算符(+,-,×,/,%),加,减,乘,除,取余
2、逻辑运算符(&&,||,!),and,or,not,与,或,非
3、关系运算符(>,<,>=,<=),大于,小于,大于等于,小于等于
4、条件运算符(?微笑
表达式为:表达式1?表达式2:表达式3
先求解表达式1,
若其值为真(非0)则将表达式2的值作为整个表达式的取值,
否则(表达式1的值为0)将表达式3的值作为整个表达式的取值。
例如:
(1)max=(a>b)?a:b
就是将a和b二者中较大的一个赋给max。
(2)min=(a<b)?a:b
就是将a和b二者中较小的一个赋给min。

优先级高于赋值、逗号运算符,低于其他运算符。例如:

⑴ m<n ? x : a+3
等价于:(m<n) ?(x) 伤心a+3)
⑵ a++>=10 && b-->20 ? a : b
等价于:(a++>=10 && b-->20) ? a : b
⑶ x=3+a>5 ? 100 : 200
等价于:x= (( 3+a>5 ) ? 100 : 200 )
5、位运算符(~,|,^,&,^~)
6、移位运算符(<<,>>)
7、拼接运算符({ })
8、赋值运算符(=,<=),
9、复合的赋值运算符,又称为带有运算的赋值运算符,也叫赋值缩写。
例如:i=i+j;可表示为 i+=j;这里+=是复合赋值运算符
同样的共有10种这样的运算符,它们是:
+= 加赋值
-= 减赋值
*= 乘赋值
/= 除赋值
%= 求余赋值
&= 按位与赋值
| = 按位或赋值
^= 按位异或赋值
<<= 左移位赋值
>>= 右移位赋值
<> 当右操作数又是一个赋值表达式时,形成多重赋值表达式。例如:
i=j=0; //结果i、j的值都为0
构成复合赋值表达式的一般形式
变量 双目运算符=表达式
它等效于
变量=变量 运算符 表达式
例如:
a+=5 等价于a=a+5
x*=y+7 等价于x=x*(y+7)
r%=p 等价于r=r%p

标签:

颜色

以下教程来自于由 Daniel Shiffman 篇写的《 Learning Processing 》(原文英文),并由 Morgan Kaufmann 出版,© 2008 Elsevier Inc。版权所有。此教程由 Kelly Chang 移植成 P5 代码。如果您发现任何错误或有任何评论,请联络我们。

颜色

在数码世界中,当我们要介绍一个颜色时,我们需要有一定的精确度。单纯说 “嘿,你能把那圆形变成蓝绿色吗?” 并不足够。在这,颜色可以被定义为在一个范围内的数字。让我们从最简单的范例开始:黑白色或灰渐色。0 为纯黑色,255 为纯白色。在两者之间任何数字 – 50、87、162、209 等等 – 都是介于黑与白之间的灰色。

grayscale.svg

只要在任何东西被画在画布上之前使用 stroke() 及 fill() 函数,我们能设置任何图形的颜色。我们也能使用 background() 函数来设定窗口的背景颜色。如下范例。

background(255);    // 设置背景颜色为白色
stroke(0);          // 设置外线颜色为黑色
fill(150);          // 设置填充色为灰色
rect(50,50,75,100); // 绘制四方形

使用 noStroke() 及 noFill() 函数将会分别去除外线色灰填充色。我们直觉上可能会以为 “stroke(0) ” 表示没有外线,可是我们必须记得 0 在这并不代表“无”,然而是代表黑色。此外,我们必须记得不要同时去除 noStroke() 及 noFill() 不然不会有任何图形出现在画布上!

以此同时,如果我们绘制两个图形,p5.js 将会使用最近(代码内从上至下)所定义的外线色及填充色值。

RGB 颜色值

您还记得手指绘画吗?选择混合三原色,我们能混合出任何颜色。同时混合所有颜色的结果是个浑浊的褐色。添加越多颜料,给颜色将会变得更暗。数码颜色也是使用三原色的混合来构造新的颜色的,但是它和颜料的混合原理不一样。首先,其原色为:红、绿、蓝(也为 RGB 颜色,Red、Green、Blue)。而当您在混合荧幕上的颜色时,您将混合的是光而不是颜料,因此它的混合原理并不一样。

rgb.jpg

  • 红 + 绿 = 黄
  • 红 + 蓝 = 紫
  • 绿 + 蓝 = 青(蓝绿色)
  • 红 + 绿 + 蓝 = 白
  • 无色 = 黑

这假设所有色颜色都为最亮的亮度,但是您也能同时使用一系列的颜色值,因此一些红加上一些绿再加上一些蓝将等于灰,而一点红加上一点蓝将等于深紫色。虽然这可能需要一点时间来习惯,随着您编程及使用 RGB 颜色值来试验的经验越多,您会对它越熟悉,就如使用您的手指来混合颜色一样。当然您不能单纯说 “混合一些红与一点蓝”,您必须提供确切的数值。就如灰渐值,个别颜色的值也是由介于 0(不使用任何该颜色)与 255(完全使用该颜色)之间,而他们的顺序为红(R)、绿(G)及蓝(B)。通过更多的试验您将会对 RGB 颜色更加熟悉,不过接下来我们将介绍一些使用常用颜色的代码。

颜色透明度

除了个别颜色的红、绿、蓝值之外,我们也能提供多一个可选性的值,此值被称为该颜色的 “alpha” 值。Alpha 代表透明度,当您要绘制多个重叠部分透视的图形时,透明度在这就特别有用。一个图像的 alpha 值有时也会被称为该图像的 “alpha channel”。

我们必须记得像素并不是真的透明的,这单纯是个使用混合颜色所达成的便利错觉。p5.js 在幕后将会使用该颜色的数值再加上一定百分率的另外一个颜色,创作出混合颜色的视觉错觉。(如果您有兴趣编程一个 “粉色镜片”,您可以从这开始。)

Alpha 值也是介于 0 与 255 之间,0 代表完全透明而 255 代表完全不透明。

自定义颜色值范围

介于 0 与 255 之间的 RGB 颜色值并不是 p5.js 唯一定义颜色的方法,事实上,我们能使用多种方法来定义颜色。比如说,您可能比较偏向于使用 0 至 100(如百分比)来定义颜色。为此您可以使用 colorMode().


      colorMode(RGB,100);
      

以上函数表示:“OK,我们要使用红、绿、蓝值来定义颜色。而他们的值将介于 0 至 100 之间。

虽然一般上这么做不会提供任何便利,您可以为个别颜色值提供不同的数值范围:


      colorMode(RGB,100,500,10,255);
      

这时此函数表示:“红色值将会是介于 0 至 100 之间,绿色值将会是介于 0 至 500 之间,蓝色值将会是介于 0 至 10 之间,而 alpha 至将会是介于 0 至 255 之间。

最后,虽然您通常在编程时只需要用到 RGB 色值,您也能使用 HSB(色调、饱和度及亮度)模式来定义颜色。简单来说,HSB 色值使用方法如下:

hsb.png
  • 色调—色调值,默认上介于 0 至 360 之间。
  • 饱和度—该颜色的饱和度,默认上介于 0 至 100 之间。
  • 亮度—该颜色的亮度,默认上介于 0 至 100 之间。

使用函数 colorMode() 您就能设定您自选的数字范围。有些人会比较偏好使用介于 0 至 360 之间的数值来定义色调(就如色轮的 360 度一样)及 0 至 100 之间的数值来定义饱和度及亮度(介于 0% 至 100%)。



颜色模式RGB+HSL+HSB

▶️运行示例代码

RGB原理

RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。

RGB是从颜色发光的原理来设定的,当它们的光相互叠合的时候,色彩相混,而亮度却等于两者亮度之总和,越混合亮度越高,即加法混合。

红、绿、蓝三个颜色通道每种色各分为256阶亮度,当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。


HSL原理

HSL色彩模式是工业界的另一种颜色标准,是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色相,饱和度,明度三个通道的颜色。


HSL的H(hue)分量,代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。色相值的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列。




HSL的S(saturation)分量,指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从灰度到纯色的变化。


HSL的L(lightness)分量,指的是色彩的明度,作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小,色彩越暗,越接近于黑色;数值越大,色彩越亮,越接近于白色。



HSB(HSV)原理

HSB又称HSV,表示一种颜色模式:在HSB模式中,H(hues)表示色相,S(saturation)表示饱和度,B(brightness)表示亮度HSB模式对应的媒介是人眼。

色相(H,hue):在0~360°的标准色轮上,色相是按位置度量的。在通常的使用中,色相是由颜色名称标识的,比如红、绿或橙色。黑色和白色无色相。

饱和度(S,saturation):表示色彩的纯度,为0时为灰色。白、黑和其他灰色色彩都没有饱和度的。在最大饱和度时,每一色相具有最纯的色光。取值范围0~100%。

亮度(B,brightness或V,value):是色彩的明亮度。为0时即为黑色。最大亮度是色彩最鲜明的状态。取值范围0~100%。



HSB(HSV)和HSL区别

HSB 和 HSL 在字面意思上是一样的:

H指的是色相(Hue),就是颜色的名称,例如‘红色’、‘蓝色’等。

S指的是饱和度(Saturation),即颜色的纯度。

L(Lightness)和B(Brightness)是明度,颜色的明亮程度。

在原理和表现上,HSL和HSB中的H(色相)完全一致,但二者的S(饱和度)不一样,L和B(明度)也不一样。

HSB中的S控制纯色中混入白色的量,值越大,白色越少,颜色越纯;

HSB中的B控制纯色中混入黑色的量,值越大,黑色越少,明度越高。

HSL中的S和黑白没有关系,饱和度不控制颜色中混入黑白的多寡;

HSL中的L控制纯色中的混入的黑白两种颜色。

实际应用场景中,Photoshop和Affinity Designer的拾色器。两者分别使用了HSB和HSL颜色模型,两个拾色器都是X轴表示饱和度,越往右,饱和度越高;Y轴表示明度,越往上明度越高。



Photoshop的HSB颜色模型拾色器,如下图所示,HSB的B(明度)控制纯色中混入黑色的量,越往上,值越大,黑色越少,颜色明度越高。


如下图所示,HSB的S(饱和度)控制纯色中混入白色的量,越往右,值越大,白色越少,颜色纯度越高。


Affinity Designer的HSL颜色模型拾色器,如下图所示,Y轴明度轴,从下至上,混入的黑色逐渐减少,直到50%位置处完全没有黑色,也没有白色,纯度达到最高。继续往上走,纯色混入的白色逐渐增加,到达最高点为纯白色,明度最高。


HSL和HSB(HSV)最大的差别是对于白色的理解,HSL当L达到最大时是白色,与饱和度S无关,所以可以理解此处的亮度L其实指的是白的量,白的量越多就越白,越亮越白比较像大自然的光。HSB(HSV)饱和度最低的时候是白色。明度B(V)改变只会改变颜色与颜色对比时的明暗关系。所以这里的饱和度S,可以理解为是彩色的量,彩色的量为0了,就自然是白色的。饱和度越高颜色越鲜明。



RGB空间和HSL空间


左为 RGB 空间,右为 HSL 空间


RGB到HSL或HSV的转换



HSL到RGB的转换




HSB(HSV)到RGB转换



HSL/V/B在各种环境下的取值范围