顏色和插值 電腦中的顏色，常用的標準有RGB和HSL。 RGB：色彩模式是通過對紅(Red)、綠(Green)、藍(Blue)三個顏色通道相互疊加來得到額各式各樣的顏色。三個通道的值得範圍都是0~255，因此總共能表示16777216(255*255*255)種，即一千六百多萬種顏色。幾乎包括了人 ...
顏色和插值 電腦中的顏色，常用的標準有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，則返回紅色。
