Color.js增強你對顔色的控制 往逝之因 Color.js 增強你對顔色的控制

<a></a>

<b>閱讀目錄</b>

<a href="http://www.cnblogs.com/benymor/p/6415653.html#_label0">輕松管理顔色——color.js庫</a>

<a href="http://www.cnblogs.com/benymor/p/6415653.html#_label1">使用color.js</a>

<a href="http://www.cnblogs.com/benymor/p/6415653.html#_label2">Accessor Methods</a>

<a href="http://www.cnblogs.com/benymor/p/6415653.html#_label3">你該知道的設計學知識</a>

<a href="http://www.cnblogs.com/benymor/p/6415653.html#_label4">Color Methods</a>

<a href="http://www.cnblogs.com/benymor/p/6415653.html#_label5">Conversion and Construction</a>

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

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

Color.js為前端開發者提供了一個簡單的顔色管理的API。使用Color.js，你可以建立一個Color對象來友善的進行一系列的顔色操作，如格式轉換、擷取單一通道值等，而不用管具體的顔色模型以及相應的轉換關系。

使用方式：

先來看看Color.js與之前介紹的tween.js結合會有多大的威力。

輸入一個16進制的顔色值，小方塊的顔色會以緩間動畫的方式從目前顔色過渡到輸入的顔色值。

color.js庫支援RGB、HSV和HSL顔色模型，以及它們各自的alpha通道。它支援CSS中表示顔色的字元串，是以非常友善。如果你的主要關注點是和人眼感覺有關的色彩空間的管理(比如你涉及到了Lab模式），而不是顔色處理與轉換方面的話，或許colorspace.js會是一個更好的選擇。當然，其實平時開發Color.js就已經夠用了，至少我還沒聽過哪個網站使用到了Lab之類的色彩模式。

Color對象是不可變對象(immutable

objects，指在被創造之後，它的狀态就不可以被改變的對象），API中提供的所有操作都會傳回它本身，是以你可以采用鍊式調用。

當你在你的項目中使用了這個庫的時候，你可以從公共命名空間net.brehaut中擷取Color。也許你想把它導入到你自己的命名空間裡，比如：

Color會根據你導入的參數（對象、字元串或是數組）建立一個新對象。需要注意的是，這是一個工廠函數而不是一個構造函數，當然如果你用了new關鍵字一樣會傳回新對象。

下面是幾種可行的方式：

對上述的一個顔色使用API提供的庫時，它會傳回一個顔色（或者一組顔色），或是一個值。你可以把很多個操縱方法chain起來一起使用。比如：

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

API提供的方法大緻可分為三類：

Accessor

Methods 讀取和設定值（例如getHue/setHue)；

Color

Methods

處理顔色并傳回一個新的color對象（比如shiftHue)，或者是傳回一個數組（比如splitComplementaryScheme）

Conversion and Construction 起到轉換或構造作用的方法（比如toCSS）

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

這類方法是由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()這個方法。它代表的是人眼對一個顔色有多亮的主觀感覺。那麼人如何感覺一個顔色有多亮？

人眼的視網膜有兩種感光細胞，分别為視錐細胞和視肝細胞。視杆細胞對暗光敏感，主要負責在昏暗環境下産生暗視覺，但無色覺，不能分辨物體的細節和顔色，是以暗環境下人隻能看到物體的大概輪廓；視錐細胞有色覺，但是光敏感度差,是以視錐細胞感受強光和顔色，産生明視覺。是以這裡我們主要考慮的是視錐細胞，畢竟是它來分辨顔色的。

body{margin:0;padding:0}

人眼可以分辨出很多種顔色，僅光譜可區分的色澤就有150多種，事實上人能分辨的顔色高達百萬之多，顯然每種顔色對應一種感光細胞是不大合理的，是以早在19世紀初，就有學者提出了視覺的三原色說，設想在視網膜中存在着分别對紅、綠、藍光線特别敏感的三種視錐細胞，并且當受到其它顔色的光的刺激時，這三類細胞會受到不同程度的刺激作用，于是在中樞會基于這三種顔色而産生對其他顔色的感覺。這一學說也能解釋紅色盲、綠色盲、藍色盲的來源，就是因為缺少對應的感光細胞。比如綠色盲，患者不僅不能區分綠色，還不能區分出紅與綠之間、綠與藍之間的顔色。

然後，人眼的視錐細胞對綠光最敏感、紅光其次、藍光最不敏感。

如果對前面測試顔色中的Red、Green、Yellow分别使用getLuminance()方法，能分别得到0.2126、0.7152、0.0722，說明這個方法正是基于人的主觀感覺的。

RGB不是個很人性化的顔色，但對于計算卻很友善。它的原理是基于色光的疊加（而CMYK是基于顔料顔色的吸收）。RGB彩色模式把顔色分為紅、綠、藍三個色彩通道，顔色的加減則是各通道的加減。

三原色的概念有兩種：美術三原色和色光三原色。

美術三原色是CMY，分别是青（Cyan）、洋紅（Magenta）和黃（Yellow）。ps中的CMYK就是基于美術三原色的（之所有多個的K，是因為僅用CMY無法調出純黑），主要用于印刷。色光三原色是RGB，也就是紅、綠、藍。

采用這三種顔色作為原色的原因就是前面提過的，人眼有這三種顔色的感光細胞，而不是因為它們無法被調和。事實上，任何三個顔色都可以作為三原色（隻要是三個不同的向量），但是如果以紅、黃、藍作為三原色的話，調出綠色時，就要紅*1+黃*(-1)了，而選取RGB為三原色的話，計算值就會全是正數，比較方面。

雖然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%)，且百分比不能用小數代替。

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

shiftHue(degrees)

參數是一個數值，表示顔色在色相輪上轉過的角度，可以是一個負數。比如

darkenByAmount(amount)

降低顔色的亮度值，即減少HSL色彩模式的顔色的lightness值。

darkenByRadio(radio)

按照一定的比例減少HSL色彩模式的顔色的lightness值。

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)傳回的是白色。

schemeFromDegrees(listOfdegrees)參數是一個數組，裡面是要改變的度數值，也就是相當于分别以每個數組成員為參數對顔色使用shiftHue()方法。

complementaryScheme()傳回有兩個成員的數組，第一個成員顔色和調用方法的顔色相同，第二個顔色為其補色。

splitComplementaryScheme() 分散互補色。

splitComplementaryCWScheme()

triadicScheme() 三色形搭配色

clashScheme()

tetradicScheme()

fourToneCWScheme()

fourToneCCWScheme()

fiveToneAScheme()

fiveToneBScheme()

fiveToneCScheme()

fiveToneDScheme()

fiveToneEScheme()

sixToneCWScheme()

sixToneCCWScheme()

neutralScheme()

analogousScheme()

toHSV()轉換為HSV色彩模式

toRGB()轉換為RGB色彩模式

toHSL()轉換為HSL色彩模式

toCSS()css中表示顔色的16進制值。可以有參數，表示傳回的顔色每個通道的位數，預設值為2。比如：

toString()

傳回this.toCSS()。主要是為了給color對象部署一個toString方法，這樣會在一些操作，比如進行字元串加法時預設調用。

posted @ 2017-02-19

Copyright ©2017

往逝之因

顯示側邊欄