Color.js增强你对颜色的控制


返回主页

往逝之因

不要低头，皇冠会掉... 
可你又没有皇冠


Color.js 增强你对颜色的控制

Color.js是一个能加强前端开发中对颜色处理的第三方库。

假设你已经基本了解色彩通道、色彩空间、色相、饱和度、亮度、不透明度等概念。当然了，毕竟前端算是半只脚踏进设计领域了，相信这些概念难不到你。

轻松管理颜色——color.js库

Color.js为前端开发者提供了一个简单的颜色管理的API。使用Color.js，你可以创建一个Color对象来方便的进行一系列的颜色操作，如格式转换、获取单一通道值等，而不用管具体的颜色模型以及相应的转换关系。
使用方式：


<<span class="hljs-name" style="margin: 0px; padding: 0px;">script src="https://unpkg.com/color-js@1.0.3/color.js"></<span class="hljs-name" style="margin: 0px; padding: 0px;">script>

先来看看Color.js与之前介绍的tween.js结合会有多大的威力。
输入一个16进制的颜色值，小方块的颜色会以缓间动画的方式从当前颜色过渡到输入的颜色值。


 

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()这个方法。它代表的是人眼对一个颜色有多亮的主观感觉。那么人如何感知一个颜色有多亮？
人眼的视网膜有两种感光细胞，分别为视锥细胞和视肝细胞。视杆细胞对暗光敏感，主要负责在昏暗环境下产生暗视觉，但无色觉，不能分辨物体的细节和颜色，因此暗环境下人只能看到物体的大概轮廓；视锥细胞有色觉，但是光敏感度差,所以视锥细胞感受强光和颜色，产生明视觉。所以这里我们主要考虑的是视锥细胞，毕竟是它来分辨颜色的。
body{margin:0;padding:0}Color.js增强你对颜色的控制
人眼可以分辨出很多种颜色，仅光谱可区分的色泽就有150多种，事实上人能分辨的颜色高达百万之多，显然每种颜色对应一种感光细胞是不大合理的，所以早在19世纪初，就有学者提出了视觉的三原色说，设想在视网膜中存在着分别对红、绿、蓝光线特别敏感的三种视锥细胞，并且当受到其它颜色的光的刺激时，这三类细胞会受到不同程度的刺激作用，于是在中枢会基于这三种颜色而产生对其他颜色的感觉。这一学说也能解释红色盲、绿色盲、蓝色盲的来源，就是因为缺少对应的感光细胞。比如绿色盲，患者不仅不能区分绿色，还不能区分出红与绿之间、绿与蓝之间的颜色。
然后，人眼的视锥细胞对绿光最敏感、红光其次、蓝光最不敏感。
如果对前面测试颜色中的Red、Green、Yellow分别使用getLuminance()方法，能分别得到0.2126、0.7152、0.0722，说明这个方法正是基于人的主观感觉的。

RGB色彩模式

RGB不是个很人性化的颜色，但对于计算却很方便。它的原理是基于色光的叠加（而CMYK是基于颜料颜色的吸收）。RGB彩色模式把颜色分为红、绿、蓝三个色彩通道，颜色的加减则是各通道的加减。
三原色的概念有两种：美术三原色和色光三原色。
美术三原色是CMY，分别是青（Cyan）、洋红（Magenta）和黄（Yellow）。ps中的CMYK就是基于美术三原色的（之所有多个的K，是因为仅用CMY无法调出纯黑），主要用于印刷。色光三原色是RGB，也就是红、绿、蓝。
采用这三种颜色作为原色的原因就是前面提过的，人眼有这三种颜色的感光细胞，而不是因为它们无法被调和。事实上，任何三个颜色都可以作为三原色（只要是三个不同的向量），但是如果以红、黄、蓝作为三原色的话，调出绿色时，就要红*1+黄*(-1)了，而选取RGB为三原色的话，计算值就会全是正数，比较方面。
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方法，这样会在一些操作，比如进行字符串加法时默认调用。

标签: 前端, colorjs, css颜色

posted @ 2017-02-19 13:56 往逝之因 阅读(338) 

Copyright ©2017 往逝之因
显示侧边栏

posted @ 2017-03-24 14:34  xosg  阅读(4586)  评论(0)  编辑  收藏  举报