blear.utils.color

1Introduction

2Example

var color = require('blear.utils.color');

// 三种颜色表示方式之间可以互相转换
var hex = color.hex;
var rgba = color.rgba;
var hsla = color.hsla;

// hex 转换为 rgba
hex.toRgba('#123');
// {r: 17, g: 34, b: 51, a: 1}
hex.toRgba('#1234');
// {r: 17, g: 34, b: 51, a: 0.26666666666666666}
hex.toRgba('#123456');
// {r: 18, g: 52, b: 86, a: 1}
hex.toRgba('#12345678');
// {r: 18, g: 52, b: 86, a: 0.47058823529411764}

// hex 转换为 hsla
hex.toHsla('#123456');
// {h: 210, s: 0.653846153846154, l: 0.20392156862745098, a: 1}

// hex 颜色加深 0.3
hex.darken('#123456', 0.3);
// #0d243c

// 混合两种颜色
hex.mix('#123456', '#654321');
// #3c3c3c

// 反色
hex.invert('#123456');
// #edcba9

// rgba、hsla 类似

3颜色表示方式

3.1hex

十六进制表示方式。百度百科。使用3字节共6个十六进制数字表示一种颜色,每字节从00到FF, 相当十进位数字从0到255,按顺序前两位是红色的值,中间两位是绿色的值,最后两位是蓝色的值。 hex 表示方式相比其他两种,其不能表示透明度。

3.2rgba

三原色表示方式。百度百科

  • r(red):红色,0-255
  • g(green):绿色,0-255
  • b(blue):蓝色,0-255
  • a(alpha):透明度,0-1

3.3hsla

色彩空间表示方式。百度百科

  • h(hue):色相范围,0-359 表示色相所在角度(如下图)
  • s(saturation):饱和度,0-1
  • l(lightness):亮度,0-1,0 时为黑色,1 时为白色
  • a(alpha):透明度,0-1

4color.hex

4.1.toRgba(hex): rgba

hex 表示转换为 rgba 表示

4.1.1hex

  • 类型:String
  • 说明:hex 颜色表示

4.1.2rgba

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:rgba 颜色表示

4.2.toHsla(hex): hsla

hex 表示转换为 hsla 表示

4.2.1hex

  • 类型:String
  • 说明:hex 颜色表示

4.2.2hsla

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:rgba 颜色表示

4.3.whiten(hex1, amount): hex2

白度。

4.3.1hex1

  • 类型:String
  • 说明:原始颜色

4.3.2amount

  • 类型:Number
  • 说明:白度比

4.3.3hex2

  • 类型:String
  • 说明:转换后的颜色

4.4.blacken(hex1, amount): hex2

黑度。

4.4.1hex1

  • 类型:String
  • 说明:原始颜色

4.4.2amount

  • 类型:Number
  • 说明:黑度比

4.4.3hex2

  • 类型:String
  • 说明:转换后的颜色

4.5.lighten(hex1, ratio): hex2

加浅。

4.5.1hex1

  • 类型:String
  • 说明:原始颜色

4.5.2ratio

  • 类型:Number
  • 说明:加浅比

4.5.3hex2

  • 类型:String
  • 说明:转换后的颜色

4.6.darken(hex1, amount): hex2

加暗。

4.6.1hex1

  • 类型:String
  • 说明:原始颜色

4.6.2ratio

  • 类型:Number
  • 说明:加暗比

4.6.3hex2

  • 类型:String
  • 说明:转换后的颜色

4.7.bright(hex): bool

判断当前颜色是否为亮色。

4.7.1hex

  • 类型:String
  • 说明:原始颜色

4.7.2bool

  • 类型:Boolean
  • 说明:是否为亮色

4.8.invert(hex1): hex2

反色。

4.8.1hex1

  • 类型:String
  • 说明:原始颜色

4.8.2hex2

  • 类型:String
  • 说明:转换后的颜色

4.9.mix(hex1, hex2, [weight]): hex3

混色。

4.9.1hex1

  • 类型:String
  • 说明:原始颜色1

4.9.2hex1

  • 类型:String
  • 说明:原始颜色2

4.9.3weight

  • 类型:Number
  • 说明:混合比重
  • 默认:0.5

4.9.4hex3

  • 类型:String
  • 说明:转换后的颜色

5color.rgba

5.1.toHex(rgba): hex

rgba 表示转换为 hex 表示

5.1.1rgba

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:rgba 颜色表示

5.1.2hex

  • 类型:String
  • 说明:hex 颜色表示

5.2.toHsla(rgba): hsla

rgba 表示转换为 hsla 表示

5.2.1rgba

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:rgba 颜色表示

5.2.2hsla

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:rgba 颜色表示

5.3.whiten(rgba1, amount): rgba2

白度。

5.3.1rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色

5.3.2amount

  • 类型:Number
  • 说明:白度比

5.3.3rgba2

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:转换后的颜色

5.4.blacken(rgba1, amount): rgba2

黑度。

5.4.1rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色

5.4.2amount

  • 类型:Number
  • 说明:黑度比

5.4.3rgba2

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:转换后的颜色

5.5.lighten(rgba1, ratio): rgba2

加浅。

5.5.1rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色

5.5.2ratio

  • 类型:Number
  • 说明:加浅比

5.5.3rgba2

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:转换后的颜色

5.6.darken(rgba1, amount): rgba2

加暗。

5.6.1rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色

5.6.2ratio

  • 类型:Number
  • 说明:加暗比

5.6.3rgba2

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:转换后的颜色

5.7.bright(hex): bool

判断当前颜色是否为亮色。

5.7.1hex

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色

5.7.2bool

  • 类型:Boolean
  • 说明:是否为亮色

5.8.invert(rgba1): rgba2

反色。

5.8.1rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色

5.8.2rgba2

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:转换后的颜色

5.9.mix(rgba1, rgba2, [weight]): rgba3

混色。

5.9.1rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色1

5.9.2rgba1

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:原始颜色2

5.9.3weight

  • 类型:Number
  • 说明:混合比重
  • 默认:0.5

5.9.4rgba3

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:转换后的颜色

6color.hsla

6.1.toHex(hsla): hex

hsla 表示转换为 hex 表示

6.1.1hsla

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:rgba 颜色表示

6.1.2hex

  • 类型:String
  • 说明:hex 颜色表示

6.2.toRgba(hsla): rgba

hsla 表示转换为 rgba 表示

6.2.1hsla

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:rgba 颜色表示

6.2.2rgba

  • 类型:{{r: number, g: number, b: number, a: number}}
  • 说明:rgba 颜色表示

6.3.redHueRange = range

  • 类型:Array
  • 说明:红色色相角度范围[270, 389]

6.4.greenHueRange = range

  • 类型:Array
  • 说明:绿色色相角度范围[30, 149]

6.5.blueHueRange = range

  • 类型:Array
  • 说明:蓝色色相角度范围[150, 269]

6.6.whiten(hsla1, amount): hsla2

白度。

6.6.1hsla1

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色

6.6.2amount

  • 类型:Number
  • 说明:白度比

6.6.3hsla2

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:转换后的颜色

6.7.blacken(hsla1, amount): hsla2

黑度。

6.7.1hsla1

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色

6.7.2amount

  • 类型:Number
  • 说明:黑度比

6.7.3hsla2

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:转换后的颜色

6.8.lighten(hsla1, ratio): hsla2

加浅。

6.8.1hsla1

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色

6.8.2ratio

  • 类型:Number
  • 说明:加浅比

6.8.3hsla2

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:转换后的颜色

6.9.darken(hsla1, amount): hsla2

加暗。

6.9.1hsla1

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色

6.9.2ratio

  • 类型:Number
  • 说明:加暗比

6.9.3hsla2

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:转换后的颜色

6.10.bright(hex): bool

判断当前颜色是否为亮色。

6.10.1hex

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色

6.10.2bool

  • 类型:Boolean
  • 说明:是否为亮色

6.11.invert(hsla1): hsla2

反色。

6.11.1hsla1

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色

6.11.2hsla2

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:转换后的颜色

6.12.mix(hsla1, hsla2, [weight]): hex3

混色。

6.12.1hsla1

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色1

6.12.2hsla2

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:原始颜色2

6.12.3weight

  • 类型:Number
  • 说明:混合比重
  • 默认:0.5

6.12.4hsla3

  • 类型:{{h: number, s: number, l: number, a: number}}
  • 说明:转换后的颜色

7Dependencies

8Reference