JavaScript中颜色模型的基础知识与应用详解.docxVIP

第

JavaScript中颜色模型的基础知识与应用详解

目录介绍RGB模型RGB颜色值rgb转hexhex转rgbHSL模型HSV(B)模型RGB与HSL的转换rgb转hslhsl转rgb

介绍

颜色模型，是用来表示颜色的数学模型。比如最常见的RGB模型，使用红绿蓝三色来表示颜色。

一般的颜色模型，可以按照如下分类：

面向硬件设备的颜色模型：RGB，CMYK，YCrCb。面向视觉感知的颜色模型：HSL，HSV(B)，HSI，Lab。

不同的颜色模型有不同的应用场景，而RGB模型适合于显示器这样的的设备。

其中，前端支持的是RGB、HSL，即在前端页面中只有这两种模型的颜色值可以有效展示出来。

而对于HSV，则是我们在创建颜色选择器插件时所需要了解的一种模型。

目前，chrome浏览器，实现H5的颜色色盘，就是基于HSV模型：

注意：fixfore浏览器支持的仍然是电脑系统色盘（如win系统下，与画图软件中编辑颜色的色盘一样）。

本文将主要介绍RGB、HSL、HSV这三种模型。

RGB模型

RGB即常说的红(R)、绿(G)、蓝(B)三原色模型，是运用最广泛的颜色模型。

特别是在前端开发中，几乎都使用该模型处理颜色。如：rgb(0,0,255)，#d3d3d3。

该模型通过红绿蓝三个颜色通道的变化和相互之间的混合叠加，使用不同的强度，表现出不同的颜色。

它是一种加色混色模型，在叠加混合的过程中，亮度等于色彩亮度的综合，混合的越多亮度就越高。

根据三色的取值不同，一般有以下几种类型：

R5G5B5(A1)：16位，各色都用5位表示，取值范围0-31(2^5-1)，剩余1位作Alpha通道或者不用。R5G6B5：16位，R和B占用5位，取值范围0-31(2^5)；G占用6位，取值范围0-63(2^6-1)。R8G8B8：24位，各色都用8位表示，取值范围为0-255(2^8-1)。

最多能有2^24种颜色，从24位开始的颜色就是真彩色，基本达到人眼极限。R8G8B8(A8)：32位，各色都用8位表示，取值范围为0-255(2^8-1)，剩余8位作Alpha通道或者不用。

这其中，最常见的当然就是24位和32位的类型。

三色通道中每个颜色有256阶的亮度，为0时最暗，255时最亮。

如果三色的数值都相同时，就会产生不同灰度值的灰度色调，都为0时最暗黑色，都为255时最亮白色。

RGB颜色值

先看下RGB颜色值在前端的展现，如红色：

rgb(255,0,0)

rgba(255,0,0,1)//带透明度

#ff0000

#f00//缩写

red//颜色名称

描述RGB模型，使用的颜色值，有rgb和hex16进制两种方式。

rgb(0,0,0)表示法，一般情况下，红绿蓝三色分别取值范围0-255，如果加上alpha透明通道，则为rgba(0,0,0,1)。

hex16进制表示法，采用十六进制对24比特的一种展示方式，如#000000，共6位，每两位分别对应红绿蓝，相同时可缩写为#000。

hex也可以使用后面加上透明度的十六进制数值。

此外，在前端开发中，还可以使用颜色名称如red、green、gray等标识颜色。

实际上，这里的颜色名称仍然是对应的一个RGB颜色值，有一个规定的颜色名称与值的关系表。大部分的颜色单词基本都能使用。

上面两种表示法的简单转换关系，如下所示。

rgb转hex

functiongetHex(num){

letval=num.toString(16)

val=(val.length===1)(0+val):val

returnval

functionrgbaToHexa(red,green,blue,alpha){

red=getHex(red)

green=getHex(green)

blue=getHex(blue)

alpha=Math.round(alpha*255)

alpha=getHex(alpha)

return#+red+green+blue+alpha

}

hex转rgb

functionhexaToRgba(color){

co