1Introduction
- description:color utils
- author:ydr.me
- create:2016年06月04日14:09:36
- update:2018年04月27日10:21:01
- github:https://github.com/blearjs/blear.utils.color
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-255g(green)
:绿色,0-255b(blue)
:蓝色,0-255a(alpha)
:透明度,0-1
3.3hsla
色彩空间表示方式。百度百科。
h(hue)
:色相范围,0-359 表示色相所在角度(如下图)s(saturation)
:饱和度,0-1l(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}}
- 说明:转换后的颜色