颜色是作图不可少的概念，常用的标准有 RGB 和 HSL，D3 提供了创建颜色对象的方法，能够相互转换和插值。
RGB色彩模式是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255，因此总共能表示16777216(256 * 256 * 256)种，即一千六百多万种。几乎包括了人类所能识别的所有颜色，是最广泛也是最容易理解的颜色系统之一。
HSL色彩模式是通过对色相（Hue）、饱和度（Saturation）、明度（Lightness）三个通道的相互叠加来得到各种颜色的。其中，色相的范围为0°~360°，饱和度的范围为0~1，明度的范围为0~1。色相的取值是一个角度，每个角度可以代表之中颜色，需要记住的是0°或360°代表红色，120°代表绿色，240°代表蓝色。饱和度的数值越大，颜色越鲜艳，灰色越少。明度值用于控制色彩的明暗变化，值越大，越明亮，越接近于白色；值越小，越暗，越接近黑色。
RGB颜色和HSL颜色是可以互相转换的。
1. RGB
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()并不会改变当前颜色本身，而是返回一个新的颜色，新的颜色的值发生了相应的变化。请看以下代码。
var color1 = d3.rgb(40,80,0);
var color2 = d3.rgb("red");
var color3 = d3.rgb("rgb(0,255,255)");
//将color1的颜色变亮，返回值的颜色为 r: 81, g: 163, b:0
console.log( color1.brighter(2) );
//原颜色值不变，依然是 r: 40, g: 80, b:0
console.log( color1 );
//将color2的颜色变亮，返回值的颜色为 r: 124, g: 0, b:0
console.log( color2.darker(2) );
//原颜色值不变，依然是 r: 255, g: 0, b:0
console.log( color2 );
//输出color3颜色的HSL值，h: 180, s: 1, l: 0.5
console.log( color3.hsl() );
//输出#00ffff
console.log( color3.toString() );函数brighter()、darker()、hsl()返回的都是对象，不是字符串，前两个函数返回的是 RGB 对象，最后一个函数返回的是 HSL 对象。
2. HSL
HSL颜色的创建和使用方法与RGB颜色几乎是一样的，只是颜色各通道的值不同而已。
- d3.hsl(h, s, l)：根据h、s、l的值来创建HSL颜色
- d3.hsl(color)：根据字符串来创建HSL颜色
- hsl.brighter([k])：变得更亮
- hsl.darker([k])：变得更暗
- hsl.rgb()：返回对应的RGB颜色
- hsl.toString()：以RGB字符串形式输出该颜色
对于HSL颜色来说，brighter()和darker()很好理解，即更改该颜色的明度值。请看以下代码。
var hsl = d3.hsl(120,1.0,0.5); //返回的对象中，h:120, s:1.0, l:0.714 console.log( hsl.brighter() ); //返回的对象中，h:120, s:1.0, l:0.35 console.log( hsl.darker() ); //返回的对象中，r:0, g:255, b:0 console.log( hsl.rgb() ); //输出#00ff00 console.log( hsl.toString() );
一般来说，编程人员喜欢使用RGB颜色，比较好理解。美术人员更喜欢使用HSL颜色，方便调整饱和度和亮度。
3. 插值
常常会有这种需求，要得到两个颜色值之间的值，这种时候就要用到插值（Interpolation）。D3提供了d3.interpolateRgb()来处理RGB颜色之间的插值运算，d3.interpolateHsl()来处理HSL颜色之间的运算。更方便的是使用d3.interpolate()，它会自动判断调用哪一个函数。d3.interpolate()也可以处理数值、字符串等之间的插值。请看下面的例子。
var a = d3.rgb(255,0,0); //红色 var b = d3.rgb(0,255,0); //绿色 var compute = d3.interpolate(a,b); console.log( compute(0) ); //输出#ff0000 console.log( compute(0.2) ); //输出#cc3300 console.log( compute(0.5) ); //输出#808000 console.log( compute(1) ); //输出#00ff00 console.log( compute(2) ); //输出#00ff00 console.log( compute(-1) ); //输出#ff0000
这段代码里，先定义了两个颜色：红和绿。然后调用d3.interpolate(a, b)，会返回一个函数，函数保存在compute里。这时候，compute就是一个函数，它接收一个数值，数值为0时，返回红色，数值为1时，返回绿色。数值为0到1之间的值时，返回位于红色和绿色之间的颜色。如果输入值超出1，则返回的是绿色，数值小于0，则返回红色，这是根据调用d3.interpolate(a, b)的时候，传入参数的顺序决定的。
文档信息
- 版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）
- 发表日期：2015 年 4 月 19 日
- 更多内容：OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
- 备注：本文发表于 OUR D3.JS ，转载请注明出处，谢谢