lua-colors

发表于 更新于 分类于 ，
本文字数： 4.6k 阅读时长 ≈ 4 分钟

lua-colors

用lua解释色彩原理.

颜色通常在软件中通过其在RGB（红-绿-蓝）颜色空间中的坐标进行编码。 不幸的是，RGB色彩空间非常不直观，另外某些颜色协调的原则在RGB中不容易表达出来。 HSL（色相-饱和度-亮度）色彩空间解决了这两个问题。这个库允许你在HSL色彩空间中处理颜色，计算协调的图案，然后转换为RGB。 (你可以在 worqx.com 看到更多关于色彩协调的相关内容)

HSL 色彩空间

颜色在HSL中由三个值编码：色相，饱和度和亮度。

亮度(Lightness) 正好与颜色的亮暗相反。 白色亮度为1，黑色亮度为0。 其他颜色介于它们之间。

饱和度(Saturation) 代表颜色的强度，它显示颜色与灰色的距离。 以下是不同饱和度和亮度的红色渐变：

 
Lightness
   0.0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0
Saturation 0.0                      
0.1                      
0.2                      
0.3                      
0.4                      
0.5                      
0.6                      
0.7                      
0.8                      
0.9                      
1.0                      

色相/色调(Hue) 是颜色的“color”：它让“绿色”与“红色”不同。色相 也可以表示为介于 0 和 1 之间的数字，但此库使用从 0 到 360 的值。
与亮度和饱和度不同，hue __loops__：色相360实际上与 0（红色）相同。

Saturation
   1.0 0.9 0.8 0.7 0.6 0.5 0.4 0.3 0.2 0.1 0.0
Hue 0                      
10                      
20                      
30                      
40                      
50                      
60                      
70                      
80                      
90                      
100                      
110                      
120                      
130                      
140                      
150                      
160                      
170                      
180                      
190                      
200                      
210                      
220                      
230                      
240                      
250                      
260                      
270                      
280                      
290                      
300                      
310                      
320                      
330                      
340                      
350                      
360                      

使用颜色进行 HSL 计算

在HSL空间中创建颜色并将其转换为RGB。

1
2
3
4
local colors = require("colors")
c = colors.new(130, .8, 0.3) -- 绿色，相当饱和，有点暗
-- =tostring(c)
-- #0f8923
 

你也可以通过它的RGB代码创建这些颜色：

1
2
3
4
local colors = require("colors")
c = colors.new("#0f8923")
-- =tostring(c)
-- #0f8923

当强制转换为字符串时，颜色将转换为其 RGB 形式：

1
2
=c
-- #0f8923
 

查看 HSL ：

1
2
print(c.H, c.S, c.L)
-- 130     0.8     0.3

改变饱和度：

1
2
=c:desaturate_by(.5) -- 将饱和度设置为饱和度*.5
-- #2d6b38
 
1
2
=c:desaturate_to(.5) -- 将饱和度设置为 .5
-- #267233
 

改变亮度：

1
2
=c:lighten_by(.5) -- 将亮度设置为亮度*.5
-- #14b72f
 
1
2
=c:lighten_to(.5) -- 将亮度设置为 .5
-- #19e53b
 

改变色相：

1
2
=c:hue_offset(180) -- 色调偏移 180
-- #890f75
 

构建配色方案

要构建配色方案，我们通常从颜色开始，选择一种或多种匹配的颜色，然后从中获取阴影和色调。你可以在[worqx.com](http://www.worqx.com/color/combinations.htm)找到有关颜色组合的一些东西。

对于 单色 配色方案，我们只使用一开始的颜色以及它的色相和阴影：

1
2
3
4
5
6
7
tints = c:tints(5) -- 生成色相
for i,t in ipairs(tints) do print(t) end
-- #16c934
-- #3ee95a
-- #7ef091
-- #bef7c8
-- #ffffff
          
1
2
3
4
5
6
7
shades = c:shades(5) -- 生成阴影
for i,s in ipairs(shades) do print(s) end
-- #0c6e1c
-- #095215
-- #06370e
-- #031b07
-- #000000
         

对于懒人方案，我们可以轻松得出懒人想要的颜色及其色调和阴影：

1
2
3
4
5
6
7
ctints = c:complementary():tints(5) -- 制作五种颜色的互补色
for i,t in ipairs(ctints) do print(t) end
-- #c916ac
-- #e93ecd
-- #f07edd
-- #f7beee
-- #fffff
         
         

但是，为了减少对比度，我们可以坚持使用相邻的颜色：例如，起始颜色的 +/- 60度：

1
2
3
4
5
6
7
8
9
10
11
12
13
n1, n2 = c:neighbors(60)  -- 获得上下60个相邻的颜色
for i,t in ipairs(n1:tints()) do print(t) end
-- #16c98e
-- #3ee9b0
-- #7ef0ca
-- #bef7e4
-- #ffffff
for i,t in ipairs(n2:tints()) do print(t) end
-- #52c916
-- #77e93e
-- #a4f07e
-- #d1f7be
-- #ffffff
         
         
         

或者，我们也可以生成一个拆分的互补配色方案：

1
2
3
4
5
6
7
8
9
10
11
12
for i,t in ipairs(c1:tints()) do print(t) end
-- #8e16c9
-- #b03ee9
-- #ca7ef0
-- #e4bef7
-- #ffffff
for i,t in ipairs(c2:tints()) do print(t) end
-- #c91652
-- #e93e77
-- #f07ea4
-- #f7bed1
-- #ffffff
         
         
         

或者三色混合：

1
2
3
4
5
6
7
8
9
10
11
12
13
t1, t2 = c:triadic()
for i,t in ipairs(t1:tints()) do print(t) end
-- #3416c9
-- #5a3ee9
-- #917ef0
-- #c8bef7
-- #ffffff
for i,t in ipairs(t2:tints()) do print(t) end
-- #c93416
-- #e95a3e
-- #f0917e
-- #f7c8be
-- #ffffff