颜色和插值
计算机中的颜色,常用的标准有RGB和HSL。
RGB:色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色。三个通道的值得范围都是0~255,因此总共能表示16777216(255*255*255)种,即一千六百多万种颜色。几乎包括了人类所能识别的所有颜色,是应用最广泛的色彩模式。
HSL:色彩模式是通过色相(Hue)、饱和度(Saturation)、明度(Lightness)三个通道的相互叠加来得到各种颜色的。其中,色相的范围为0°~360°,饱和度的范围为0~1,明度的范围为0~1.色相的取值是一个角度,每个角度可以代表之中的一种颜色,需要记住的是0°或360°代表红色,120°代表绿色,240°代表蓝色。饱和度的数值越大,颜色越鲜艳,灰色越少。明度值用于控制色彩的明暗变化,值越大,越明亮,越接近于白色。值越小,越暗,越接近黑色。
RGB颜色和HSL颜色可以相互转换。
一 、D3中提供了RGB颜色的创建、调整明暗、转换为HSL模式的方法,方法如下:
d3.rgb(r,g,b)
//分别输出r、g、b值来创建颜色,范围都为[0,255]。
d3.rgb(color)
//输入相应的字符串来创建颜色,例如:
(1)RGB的十进制值;"rgb(255,255,255)"。
(2)HSL的十进制值: "hsl(120,0.5,0.5)"。
(3)RGB的十六进制值: "#ffeeaa"。
(4)RGB的十六进制值得缩写形式:"#fea"。
(5)颜色的名称: "red","white"。
rgb.brighter([k])
//颜色变得更明亮。RGB各通道的值乘以0.7^-k。如果k省略,k的值为1.只有当某通道的值得范围在30~255之间时,才会进行相应的计算。
rgb.darker([k])
//颜色变得更暗。RGB各通道的值乘以0.7^k。
rgb.hsl()
//返回该颜色对应的HSL值。
rgb.toString()
//以字符串形式返回该颜色的值,如"#ffeeaa"。
brighter()和darker()返回一个新的颜色对象,不会改变当前颜色对象。hsl()返回当前颜色对应的HSL值,也是一个新的对象。举个例子:
1 //RGB 2 var color1 = d3.rgb(40,80,0) 3 var color2 = d3.rgb("red") 4 var color3 = d3.rgb("rgb(0,255,255)") 5 6 //将color1的颜色变亮 7 console.log(color1.brighter(2)) //返回值的颜色为{r: 81, g: 163, b: 0} 8 console.log(color1) //原颜色值不变依然返回{r: 40, g: 80, b: 0} 9 10 //将color2的颜色变亮 11 console.log(color2.darker(2)) //返回值的颜色为{r: 124, g: 0, b: 0} 12 console.log(color2) //原颜色值不变依然返回{r: 255, g: 0, b: 0} 13 14 //输出color3颜色的HSL值 15 console.log(color3.hsl()) //返回值{h: 180, s: 1, l: 0.5} 16 17 console.log(color3.toString()) //返回#00ffff
二 、HSL颜色的创建和使用与d3.rgb几乎一样,只是各颜色通道的意义不同。
d3.hsl(h,s,l)
//根据h、s、l的值来创建HSL颜色。
d3.hsl(color)
//根据字符串来创建HSL颜色。
hsl.beighter([k])
//变得更亮
hsl.darker([k])
//变得更暗
hsl.rgb()
//返回对应的RGB颜色。
hsl.toString()
//以RGB字符串形式输出该颜色。
对于HSL颜色来说,brighter()和darker()更好理解,因为HSL的"L"就是明亮度。也就是说,应用brighter()或darker()后,只有h、s、l中的第三个颜色通道"l"发生变化。举个例子:
1 //HSL 2 var hsl = d3.hsl(120,1.0,0.5); 3 4 //变得更亮 5 console.log(hsl.brighter()) //输出{h: 120, s: 1, l: 0.7142857142857143} 6 7 //变得更暗 8 console.log(hsl.darker()) //输出 {h: 120, s: 1, l: 0.35} 9 10 //返回对应的rgb值 11 console.log(hsl.rgb()) //输出{r: 0, g: 255, b: 0} 12 13 console.log(hsl.toString()) //输出#00ff00
一般来说,编程人员喜欢使用RGB颜色,比较好理解。美术人员更喜欢使用HSL颜色,方便调整饱和度和亮度。
三 、插值
如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation)。D3提供了d3.intrerpolateRgb()来处理RGB颜色之间的插值运算,d3.interpolateHsl()来处理HSL颜色之间的插值运算。更方便的是使用d3.interpolate(),它会自动判断颜色的类型。d3.interpolate()也可以处理数值、字符串等之间的插值。举个例子:
1 //插值 2 var a = d3.rgb(255,0,0) //红色 3 var b = d3.rgb(0,255,0) //绿色 4 var compute = d3.interpolate(a,b) 5 6 console.log(compute(0)) //输出#ff0000 7 console.log(compute(0.2)) //输出#cc3300 8 console.log(compute(0.5)) //输出#808000 9 console.log(compute(1)) //输出#00ff00 10 11 console.log(compute(2)) //输出#00ff00 12 console.log(compute(-1)) //输出#ff0000
这段代码里,定义了两个RGB颜色:红(255,0,0)和绿(0,255,0)。然后,以这两个颜色对象作为d3.interpolate(a,b)的参数。d3.interpolate返回一个函数,保存在变量compute里。于是,compute可当做函数使用,参数是一个数值。
当数值为0时,返回红色。
当数值为1时,返回绿色。
当数值为0~1之间的值时,返回介于红色和绿色之间的颜色。
如果数值超过1,则返回绿色:数值小于0,则返回红色。
原文地址:https://www.cnblogs.com/littleSpill/p/10847057.html