1，介绍

色彩具备三个个性，即色相，明度和饱和度。色彩的这三个个性及其互相关系能够用三度空间的颜色立体来阐明。

Color.js是一个能增强前端开发中对色彩解决的第三方库。

假如你曾经根本理解色调通道、色调空间、色相、饱和度、亮度、不透明度等概念。当然了，置信这些概念难不到你。

2，轻松治理色彩---color.js库

Color.js为前端开发者提供了一个简略的色彩治理的API。应用Color.js，你能够创立一个Color对象来不便的进行一系列的色彩操作，如格局转换、获取繁多通道值等，而不必管具体的色彩模型以及相应的转换关系。

color.js库反对RGB、HSV和HSL色彩模型，以及它们各自的alpha通道。它反对CSS中示意色彩的字符串，因而十分不便。如果你的次要关注点是和人眼感知无关的色调空间的治理(比方你波及到了Lab模式），而不是色彩解决与转换方面的话，或者colorspace.js会是一个更好的抉择。当然，其实平时开发Color.js就曾经够用了，至多我还没听过哪个网站应用到了Lab之类的色调模式。

Color对象是不可变对象(immutable objects，指在被发明之后，它的状态就不能够被扭转的对象），API中提供的所有操作都会返回它自身，因而你能够采纳链式调用。

3.应用color.js

文档地址：https://www.npmjs.com/package...

当你在你的我的项目中应用了这个库的时候，你能够从公共命名空间net.brehaut中获取Color。兴许你想把它导入到你本人的命名空间里，比方：

Color会依据你导入的参数（对象、字符串或是数组）创立一个新对象。须要留神的是，这是一个工厂函数而不是一个构造函数，当然如果你用了new关键字一样会返回新对象。 上面是几种可行的形式：

对上述的一个色彩应用API提供的库时，它会返回一个色彩（或者一组色彩），或是一个值。你能够把很多个操纵办法chain起来一起应用。比方：

一个常见的场景是为页面中的元素进行一系列的计算，而后，你就能用toCSS办法来把值变成一个正当的CSS色彩格局，像上面的代码一样：

API提供的办法大抵可分为三类：

  1. Accessor Methods 读取和设置值（例如getHue/setHue)；
  2. Color Methods 解决色彩并返回一个新的color对象（比方shiftHue)，或者是返回一个数组（比方splitComplementaryScheme）
  3. Conversion and Construction 起到转换或构造作用的办法（比方toCSS）

所有的值都是0-1的浮点数，除了Hue是一个0-360的值（你应该曾经理解了根底的色相轮）。

4，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的值，示意这个色彩在传统的显示器上显示时，人眼会感觉它有多亮。
5.Color Methods
  • 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)返回的是红色。
6.转换和结构
  • toHSV()转换为HSV色调模式
  • toRGB()转换为RGB色调模式
  • toHSL()转换为HSL色调模式
  • toCSS()css中示意色彩的16进制值。能够有参数，示意返回的色彩每个通道的位数，默认值为2。比方：

  • toString() 返回this.toCSS()。次要是为了给color对象部署一个toString办法，这样会在一些操作，比方进行字符串加法时默认调用。

GitHub地址：https://github.com/brehaut/co...

Copyright ©2017 往逝之因