颜色处理之 color.js

[zoule]

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/color

当你在你的项目中使用了这个库的时候，你可以从公共命名空间 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/color-js

Copyright ©2017 往逝之因