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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

一坨翔 2017-09-04 10:30:17 浏览738
展开阅读全文

返回主页

往逝之因

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


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

标签: 前端colorjscss颜色

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

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

网友评论

登录后评论
0/500
评论
一坨翔
+ 关注