Color.js 方便修改顏色值

這並非npm上比較活躍的clolr包的中文文檔，不過它在最後提到了：

The API was inspired by color-js. Manipulation functions by CSS tools like Sass, LESS, and Stylus.

嗯，就是那個color-js。雖然大致功能一致，新的color庫使用更簡潔。

---

---

Color.js是一個能增強前端開發中對顏色處理的第三方庫。

假設你已經基本瞭解色彩通道、色彩空間、色相、飽和度、亮度、不透明度等概念。固然了，畢竟前端算是半隻腳踏進設計領域了，相信這些概念難不到你。

輕鬆管理顏色——color.js庫

Color.js爲前端開發者提供了一個簡單的顏色管理的API。使用Color.js，你能夠建立一個Color對象來方便的進行一系列的顏色操做，如格式轉換、獲取單一通道值等，而不用管具體的顏色模型以及相應的轉換關係。
使用方式：

<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>

先來看看Color.js與以前介紹的tween.js結合會有多大的威力。
輸入一個16進制的顏色值，小方塊的顏色會以緩間動畫的方式從當前顏色過渡到輸入的顏色值。

See the Pen Transition State //vues.org by benymor (@benymor) on CodePen.

color.js庫支持RGB、HSV和HSL顏色模型，以及它們各自的alpha通道。它支持CSS中表示顏色的字符串，所以很是方便。若是你的主要關注點是和人眼感知有關的色彩空間的管理(好比你涉及到了Lab模式），而不是顏色處理與轉換方面的話，或許colorspace.js會是一個更好的選擇。固然，其實平時開發Color.js就已經夠用了，至少我還沒聽過哪一個網站使用到了Lab之類的色彩模式。
Color對象是不可變對象(immutable objects，指在被創造以後，它的狀態就不能夠被改變的對象），API中提供的全部操做都會返回它自己，所以你能夠採用鏈式調用。

使用color.js

當你在你的項目中使用了這個庫的時候，你能夠從公共命名空間net.brehaut中獲取Color。也許你想把它導入到你本身的命名空間裏，好比：

var Color = net.brehaut.Color;

Color會根據你導入的參數（對象、字符串或是數組）建立一個新對象。須要注意的是，這是一個工廠函數而不是一個構造函數，固然若是你用了new關鍵字同樣會返回新對象。
下面是幾種可行的方式：

//測試顏色
var Green = Color("#00FF00");
var Red = Color({hue: 0, saturation: 1, value: 1});
var Blue = Color("rgb(0,0,255)");
var Cyan = Color({hue: 180, saturation: 1, lightness: 0.5});
var Magenta = Color("hsl(300, 100%, 50%)");
var Yellow = Color([255,255,0]);

對上述的一個顏色使用API提供的庫時，它會返回一個顏色（或者一組顏色），或是一個值。你能夠把不少個操縱方法chain起來一塊兒使用。好比：

var C1 = Red.shiftHue(45).darkenByRatio(0.5).desaturateByAmount(0.1);

一個常見的場景是爲頁面中的元素進行一系列的計算，而後，你就能用toCSS方法來把值變成一個合理的CSS顏色格式，像下面的代碼同樣：

document.getElementById('myElement').style.backgroundColor = C1.toCSS();

API提供的方法大體可分爲三類：

1. Accessor Methods 讀取和設置值（例如getHue/setHue)；
2. Color Methods 處理顏色並返回一個新的color對象（好比shiftHue)，或者是返回一個數組（好比splitComplementaryScheme）
3. Conversion and Construction 起到轉換或構造做用的方法（好比toCSS）

全部的值都是0~1的浮點數，除了Hue是一個0~360的值（你應該已經瞭解了基礎的色相輪）。

Accessor Methods

這類方法是由API自動生成，用於讀取或者設置對象的值。

• getRed() 返回紅色通道的值，0~1的浮點數。
• getBlue()返回藍色通道的值，0~1的浮點數。
• getGreen()返回綠色通道的值，0~1的浮點數。
• setRed(newRed) 設置紅色通道的值，返回一個新的color。
• setGreen(newGreen) 設置藍色通道的值，返回一個新的color。

• setBlue(newBlue)設置綠色通道的值，返回一個新的綠色的color。

• getHue() 返回色相值。
• setHue(newHue) 設置色相值。
• getSaturation() 返回飽和值。
• setSaturation(newSaturation) 設置飽和值。
• getValue() 返回明度值。
• setValue(newValue)設置明度值。
• getLightness()返回亮度值。
• setLightness(newLightness) 設置亮度值。
• getAlpha() 返回Alpha值。
• setAlpha(newAlpha)設置Alpha值。

• getLuminance() 返回一個0~1的值，表示這個顏色在傳統的顯示器上顯示時，人眼會以爲它有多亮。

你該知道的設計學知識

設計大拿能夠略過了......
上述的幾種方法涉及到了RGB色彩模式、HSV（HSB）色彩模式和HSL色彩模式。
先解釋下getLuminance()這個方法。它表明的是人眼對一個顏色有多亮的主觀感受。那麼人如何感知一個顏色有多亮？
人眼的視網膜有兩種感光細胞，分別爲視錐細胞和視肝細胞。視杆細胞對暗光敏感，主要負責在昏暗環境下產生暗視覺，但無色覺，不能分辨物體的細節和顏色，所以暗環境下人只能看到物體的大概輪廓；視錐細胞有色覺，可是光敏感度差,因此視錐細胞感覺強光和顏色，產生明視覺。因此這裏咱們主要考慮的是視錐細胞，畢竟是它來分辨顏色的。

人眼能夠分辨出不少種顏色，僅光譜可區分的色澤就有150多種，事實上人能分辨的顏色高達百萬之多，顯然每種顏色對應一種感光細胞是不大合理的，因此早在19世紀初，就有學者提出了視覺的三原色說，設想在視網膜中存在着分別對紅、綠、藍光線特別敏感的三種視錐細胞，而且當受到其它顏色的光的刺激時，這三類細胞會受到不一樣程度的刺激做用，因而在中樞會基於這三種顏色而產生對其餘顏色的感受。這一學說也能解釋紅色盲、綠色盲、藍色盲的來源，就是由於缺乏對應的感光細胞。好比綠色盲，患者不只不能區分綠色，還不能區分出紅與綠之間、綠與藍之間的顏色。
而後，人眼的視錐細胞對綠光最敏感、紅光其次、藍光最不敏感。
若是對前面測試顏色中的Red、Green、Yellow分別使用getLuminance()方法，能分別獲得0.212六、0.715二、0.0722，說明這個方法正是基於人的主觀感受的。

RGB色彩模式

RGB不是個很人性化的顏色，但對於計算卻很方便。它的原理是基於色光的疊加（而CMYK是基於顏料顏色的吸取）。RGB彩色模式把顏色分爲紅、綠、藍三個色彩通道，顏色的加減則是各通道的加減。
三原色的概念有兩種：美術三原色和色光三原色。
美術三原色是CMY，分別是青（Cyan）、洋紅（Magenta）和黃（Yellow）。ps中的CMYK就是基於美術三原色的（之全部多個的K，是由於僅用CMY沒法調出純黑），主要用於印刷。色光三原色是RGB，也就是紅、綠、藍。
採用這三種顏色做爲原色的緣由就是前面提過的，人眼有這三種顏色的感光細胞，而不是由於它們沒法被調和。事實上，任何三個顏色均可以做爲三原色（只要是三個不一樣的向量），可是若是以紅、黃、藍做爲三原色的話，調出綠色時，就要紅*1+黃*(-1)了，而選取RGB爲三原色的話，計算值就會全是正數，比較方面。

HSV和HSL色彩模式

雖然RGB模式計算時很好使，但對人來講很很差理解啊。沒受過訓練的人，給他兩個顏色，他怎麼能分辨哪一個顏色的R通道多些、哪一個顏色的G通道多些？
考慮到RGB模式真的很不人道，因而有了這兩個色彩模式，
HSV和HSB是一個東西，表示色相（Hue）、飽和度（Saturation）和明度（Brightness）。這是一個對人友好的色彩模式。
先科普下，色相、明度和純度（飽和度）是色彩三要素。色相即顏色的名稱，好比紅橙黃等；明度指色彩的明暗變化，給一個顏色加入白色會變亮，其實就是明度的提升；純度指色彩的鮮豔程度，原色是純度最高的色彩，不一樣顏色混合的越多，純度越低。HSV彩色模式便是基於色彩三要素的。進行色彩設計時會發現，這個顏色比起非人的RGB，是多麼「順眼」！只要轉動色相環就能夠隨意的改變顏色，還能輕易地改變顏色的明度。
而後是HSL色彩模式。和HSB相比，H是同樣的，就是一個360°的色相環，S飽和度定義不同，而L亮度和B明度的區別最大。雖然二者的色彩空間呈現的差距很是大，但使用方式卻相同，都是靠人的主觀感受來調色，所以能夠主用一個模式，肯定結果後再用另外一個顏色。不過HSB模式的顏色轉化爲HSL後，會發現L值通常爲B值的一半。

HSB中，B指顏色的明度，認爲是「光的量」，能夠是任意顏色。
HSL中，L指亮度，做爲「白的量」來理解。
不過相比起來，HSL的亮度條能有更多的顏色，但顏色卻很差區分，而HSB的明度條上顏色分佈比較均勻。另外，CSS支持HSL而不是HSB模式，使用方式爲HSL(100, 50%, 30%)，且百分比不能用小數代替。
想要了解HSV和HSL色彩空間，能夠閱讀HSL和HSV色彩空間——維基百科

Color Methods

下列是會返回一個新的color對象的方法

• shiftHue(degrees) 參數是一個數值，表示顏色在色相輪上轉過的角度，能夠是一個負數。好比

Magenta.toHSV()
//{hue: 300, value: 1, saturation: 1, alpha: 1}
Magenta.shiftHue(33)
{hue: 333, saturation: 1, value: 1, alpha: 1}

• darkenByAmount(amount) 下降顏色的亮度值，即減小HSL色彩模式的顏色的lightness值。

Color({hue: 180, saturation: 1, lightness: 0.3}).darkenByAmount(0.12)
//{hue: 180, saturation: 1, lightness: 0.18, alpha: 1}

• darkenByRadio(radio) 按照必定的比例減小HSL色彩模式的顏色的lightness值。

Color({hue: 180, saturation: 1, lightness: 0.3}).darkenByRatio(0.3)
//{hue: 180, saturation: 1, lightness: 0.21, alpha: 1}
//發現亮度值是原來的70%，也就是減去了30%

• lightenByAmount(amount) 與darkenByAmount()相反。
• lightenByRatio(amount) 與darkenByRatio()相反
• devalueByAmount(amount) 減小HSV色彩模式的顏色的明度值。
• devalueByRatio(ratio) 按必定比例減小HSV色彩模式的顏色的明度值。
• valueByAmount(amount) 與devalueByAmount()相反。
• valueByRatio(ratio) 與devalueByRatio()相反。
• desaturateByAmount(amount)
• desaturateByRatio(ratio)
• saturateByAmount(amount)
• saturateByRatio(ratio)
• blend(color,alpha) 返回一個混合了的顏色。好比black.blend(white,0)返回的是黑色，black.blend(white,0.5)返回的是灰色，black.blend(white,1)返回的是白色。

下列是會返回一個系列color對象的方法，主要用於配色，你能夠看看配色網。這些返回的顏色涉及的一些配色理論，基本不會用到。

• schemeFromDegrees(listOfdegrees)參數是一個數組，裏面是要改變的度數值，也就是至關於分別以每一個數組成員爲參數對顏色使用shiftHue()方法。

Magenta
//{hue: 300, saturation: 1, lightness: 0.5, alpha: 1}
JSON.stringify(Magenta.schemeFromDegrees([10,20]))
//"[{"hue":310,"saturation":1,"value":1,"alpha":1},{"hue":320,"saturation":1,"value":1,"alpha":1}]"

• complementaryScheme()返回有兩個成員的數組，第一個成員顏色和調用方法的顏色相同，第二個顏色爲其補色。
• splitComplementaryScheme() 分散互補色。
• splitComplementaryCWScheme()
• triadicScheme() 三色形搭配色
• clashScheme()
• tetradicScheme()
• fourToneCWScheme()
• fourToneCCWScheme()
• fiveToneAScheme()
• fiveToneBScheme()
• fiveToneCScheme()
• fiveToneDScheme()
• fiveToneEScheme()
• sixToneCWScheme()
• sixToneCCWScheme()
• neutralScheme()
• analogousScheme()
  順便推薦一個在線配色網站。

Conversion and Construction

• toHSV()轉換爲HSV色彩模式
• toRGB()轉換爲RGB色彩模式
• toHSL()轉換爲HSL色彩模式
• toCSS()css中表示顏色的16進制值。能夠有參數，表示返回的顏色每一個通道的位數，默認值爲2。好比：

Green.toCSS()
//"#00FF00"
Green.toCSS(1)
//"#0F0"

• toString() 返回this.toCSS()。主要是爲了給color對象部署一個toString方法，這樣會在一些操做，好比進行字符串加法時默認調用。