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方法，这样会在一些操做，好比进行字符串加法时默认调用。