Color.js增强你对颜色的控制
往逝之因
不要低头,皇冠会掉...
可你又没有皇冠
Color.js 增强你对颜色的控制
阅读目录
- 轻松管理颜色——color.js库
- 使用color.js
- Accessor Methods
- 你该知道的设计学知识
- Color Methods
- Conversion and Construction
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提供的方法大致可分为三类:
- Accessor Methods 读取和设置值(例如getHue/setHue);
- Color Methods 处理颜色并返回一个新的color对象(比如shiftHue),或者是返回一个数组(比如splitComplementaryScheme)
- 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}
人眼可以分辨出很多种颜色,仅光谱可区分的色泽就有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色彩空间——维基百科
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方法,这样会在一些操作,比如进行字符串加法时默认调用。
转载于:https://www.cnblogs.com/jinhengyu/p/7516463.html
Color.js增强你对颜色的控制相关推荐
- vue 画布插件_一个Vue.js插件,用于使用EaselJS控制HTML5画布
vue 画布插件 vue-easeljs (vue-easeljs) A Vue.js plugin to control an HTML5 canvas using EaselJS. 一个Vue.j ...
- .NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色 基于YUV模式判断颜色明亮度...
.NET C#生成随机颜色,可以控制亮度,生成暗色或者亮色 基于YUV模式判断颜色明亮度 随机颜色在日常开发中很常用到,有时候要控制颜色明亮度,比如在白色背景网页上的随机颜色,一般要求颜色稍微暗一些, ...
- js 获取html文字颜色,js获得网页背景色和字体色的方法
获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 : var rgb = docum ...
- 如何对H.265视频播放器EasyPlayer.js实现音频开启与关闭控制?【附代码】
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等,具备较高的可用性.TSINGSEE ...
- php 获取 js json数据类型,JS基础-JS的数据类型和访问/流程控制/JSON格式字符串和js对象相互转换...
JS的数据类型和访问/流程控制/JSON格式字符串和js对象相互转换 1. JS的数据类型和访问 1.1. 原始类型JS中的原始数据类型有: number , string , boolean ; 声 ...
- html 流程控制,HTML5独家分享:原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句 常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
- ECharts 使用xAxis.axisLine.lineStyle.color设置x坐标轴轴线颜色
1 使用详解 xAxis.axisLine.lineStyle.color 说明:刻度标签文字的颜色,支持回调函数. 默认值:'#333'. 参数类型:Color. 可选值:请参考以下博客. ECha ...
- html指定区域的背景颜色,JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法..具体实现方法如下: 代码如下: JS实现点击颜色块切换指定区域的背景颜色 适时切换网页指定区域背景颜色 请选择背景: function g ...
- chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值 ,chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
最新文章
- flask使用SQLAlchemy操作mysql
- shell编程入门步步高(八、函数)
- 张孝祥Java培训视频及孙鑫java视频网址
- 快学Scala习题解答—第十章 特质
- php登录注册demo,PHP实现登录功能DEMO
- 基于Vmware player的Windows 10 IoT core + RaspberryPi2安装部署
- java编译命令 Linux,通过命令行在linux中编译Java类
- 天梯赛2016-L2
- TCP协议——流量控制和拥塞控制
- 为什么用python写爬虫_零基础,是怎么开始写Python爬虫的
- 2021十大金融科技趋势
- Sublime text 2按Ctrl+`无法调出console的可能问题
- vmware虚拟机磁盘挂载
- CKeditor4.7.3标准版图片上传及相关配置
- 从B站源码泄露事件入手,说一下团队协作中版本管理的安全意识
- mysql数据库中eof_数据库eof
- 关于python通过pyautocad操作cad的2021-06-10
- 中美知识产权博弈:保护力度标准成最大分歧
- 适用于嵌入式单片机的差分升级通用库+详细教程
- Java程序员面试时,应当注意HR面的十三个小套路,纯干货分享
热门文章
- clark变换_电力变换器PWM原理与实践,p43页,空间矢量理解
- os如何读取图片_CV:基于face库利用cv2调用摄像头根据人脸图片实现找人
- Linux下的截图工具:flameshot
- 08TensorFlow2.0基础--8.5张量运算
- python 基础简单猜数游戏
- 北京国际大数据交易所成立,采用区块链技术分离数据所有权
- Yam旗下Degenerative Finance已上线uSTONKS和uGAS奖励计划
- Basis Cash动态铸币税阈值和债券发行上限提案正式生效
- 分析师:BTC既是通胀对冲工具 也是有指数级增长潜力的资产
- SAP License:MIRO