这并不是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对象来方便的进行一系列的颜色操作,如格式转换、获取单一通道值等,而不用管具体的颜色模型以及相应的转换关系。
使用方式:
``` html

```
先来看看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。也许你想把它导入到你自己的命名空间里,比如:
``` javascript
var Color = net.brehaut.Color;
```
Color会根据你导入的参数(对象、字符串或是数组)创建一个新对象。需要注意的是,这是一个工厂函数而不是一个构造函数,当然如果你用了new关键字一样会返回新对象。
下面是几种可行的方式:
``` javascript
//测试颜色
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起来一起使用。比如:
```javascript
var C1 = Red.shiftHue(45).darkenByRatio(0.5).desaturateByAmount(0.1);
```
一个常见的场景是为页面中的元素进行一系列的计算,然后,你就能用`toCSS`方法来把值变成一个合理的CSS颜色格式,像下面的代码一样:
```javascript
document.getElementById('myElement').style.backgroundColor = C1.toCSS();
```

API提供的方法大致可分为三类:

  1. Accessor Methods 读取和设置值(例如getHue/setHue);
  2. Color Methods 处理颜色并返回一个新的color对象(比如shiftHue),或者是返回一个数组(比如splitComplementaryScheme)
  3. Conversion and Construction 起到转换或构造作用的方法(比如toCSS)

所有的值都是01的浮点数,除了Hue是一个0360的值(你应该已经了解了基础的色相轮)。

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.2126、0.7152、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色彩空间——维基百科][hsv&hsl]

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

Color.js 增强你对颜色的控制的更多相关文章

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

    往逝之因 不要低头,皇冠会掉...  可你又没有皇冠 Color.js 增强你对颜色的控制 阅读目录 轻松管理颜色--color.js库 使用color.js Accessor Methods 你该知 ...

  2. .NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色 基于YUV模式判断颜色明亮度

    .NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色 基于YUV模式判断颜色明亮度   随机颜色在日常开发中很常用到,有时候要控制颜色明亮度,比如在白色背景网页上的随机颜色,一般要求颜色稍微暗一 ...

  3. Color.js 方便修改颜色值

    这并不是npm上比较活跃的clolr包的中文文档,不过它在最后提到了: The API was inspired by color-js. Manipulation functions by CSS ...

  4. jQuery---jquery.color.js和jquery.lazyload.js的使用

    jquery.color.js的使用 了解即可 <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"> ...

  5. Type.js – 帮助你更好的控制网页字体排版

    Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...

  6. jquery.color.js的使用

    Jquery本身不支持变色,Jquery Color.js弥补了这缺陷并为animate动画赋予变色效果,如下红变蓝后执行回调再由蓝变红. <!DOCTYPE html> <html ...

  7. Chrome & console.log & color & js

    Chrome & console.log & color & js console.log & color // OK log(`%cchat_list =\n%c${ ...

  8. css,js,jquery的载入方式和属性控制

    本文章主要总结了css,js,jQuery在编写程序时的载入方式,与属性控制方式html和css共同组成了一个最基础的网页,js为标签样式提供动态效果 一,css的载入方式与属性控制 1.1,css引 ...

  9. 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制

    1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...

随机推荐

  1. 《算法导论》归并排序----merge-sort

    伪代码请见<算法导论>2.3节 merge-sort实现: public class MergeSort {        public static void sort(double [ ...

  2. MAC中使用Vim和GCC编译C程序

    1.打开终端 2.输入以下命令进入vim编辑器: vim a.c 3.进入编辑器后按i进入insert模式,然后键入以下代码: #include<stdio.h> int main(){ ...

  3. 【腾讯优测干货分享】微信小程序之自动化亲密接触

    本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/HcPakz5CV1SHnu-U8n85pw 导语 山雨欲来风满楼,最 ...

  4. javascript中的元素包含判断

    在实际开发中,很多时候需要知道某个节点是不是另一个节点的后代.很多浏览器提供了contains方法,如: console.log(document.documentElement.contains(d ...

  5. C++中vector 容器的基本操作

    vector是一种简单高效的容器,具有自动内存管理功能.对于大小为n的vector容器,它的元素下标是0~n-1. vector有二个重要方法:     begin(): 返回首元素位置的迭代器.   ...

  6. tomcat 安全文件夹(Java之负基础实战)

    tomcat 解析网站的时候,会寻找一个文件叫  WEB-INF 这些文件外部无法访问

  7. shell 命令合并文本

    之前想把代码打印出来看来着,后来合并完之后放在word里发现有2000多页,然后放弃了~anyway,这个命令还是挺有用的. 比如我有文本a001.dat, a002.dat, a003.dat .. ...

  8. ExtJS与后台Java交互

    参考博客:http://blog.csdn.net/wanghuan203/article/details/8125970 开发环境:Eclipse + Tomcat + ExtJS6.0 工程目录结 ...

  9. 微信扫码下载APP

    前段时间开发过程中,要实现一个扫描二维码下载APP的功能,但是苹果系统中,微信不可以直接跳转苹果商店,需要先下载应用宝,显然太麻烦... 这样我们可以做个中间页,用中间页面生成二维码链接,在中间页代码 ...

  10. linux系统下find删除目录下除一文件外的所有文件

    /data/目录下有a.txt b.txt c.txt d.txt删除/data/目录下所有文件,保留b.txt两种方法:1.[root@xuegod62 ~]# find /data/ -type ...