顏色是作圖不可少的概念，常用的標準有 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 ，轉載請註明出處，謝謝
