顏色是作圖不可少的概念，常用的標準有 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)的時候，傳入引數的順序決定的。

文件資訊

• 發表日期：2015 年 4 月 19 日
• 備註：本文發表於 OUR D3.JS ，轉載請註明出處，謝謝