网站建设资讯

NEWS

网站建设资讯

JavaScript实现HSL拾色器的方法-创新互联

小编这次要给大家分享的是JavaScript实现HSL拾色器的方法,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

成都创新互联是一家企业级云计算解决方案提供商,超15年IDC数据中心运营经验。主营GPU显卡服务器,站群服务器,四川绵阳服务器托管,海外高防服务器,成都机柜租用,动态拨号VPS,海外云手机,海外云服务器,海外服务器租用托管等。

HSL 和 HSV 在数学上定义为在 RGB 空间中的颜色的 R, G 和 B 的坐标的变换。

从 RGB 到 HSL 或 HSV 的转换

设 (r, g, b) 分别是一个颜色的红、绿和蓝坐标,它们的值是在 0 到 1 之间的实数。设 max 等价于 r, g 和 b 中的大者。设 min 等于这些值中的最小者。要找到在 HSL 空间中的 (h, s, l) 值,这里的 h ∈ [0, 360)是角度的色相角,而 s, l ∈ [0,1] 是饱和度和亮度,计算为:

JavaScript实现HSL拾色器的方法

h 的值通常规范化到位于 0 到 360°之间。而 h = 0 用于 max = min 的(就是灰色)时候而不是留下 h 未定义。
HSL 和 HSV 有同样的色相定义,但是其他分量不同。HSV 颜色的 s 和 v 的值定义如下:

JavaScript实现HSL拾色器的方法

从 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 的时候,可以使用下列过程:

JavaScript实现HSL拾色器的方法

对于每个颜色向量 Color = (ColorR, ColorG, ColorB) = (r, g, b),

JavaScript实现HSL拾色器的方法

从 HSV 到 RGB 的转换

类似的,给定在 HSV 中 (h, s, v) 值定义的一个颜色,带有如上的 h,和分别表示饱和度和明度的 s 和 v 变化于 0 到 1 之间,在 RGB 空间中对应的 (r, g, b) 三原色可以计算为:

JavaScript实现HSL拾色器的方法

对于每个颜色向量 (r, g, b),

JavaScript实现HSL拾色器的方法


  
  
    
Hue:0
Your browser does not support canvas
Saturation:0%
Luminance:0%
Hexadecimal:
RGB:
HSL:

网页题目:JavaScript实现HSL拾色器的方法-创新互联
本文路径:http://cdweb.net/article/gihjd.html