Easycolor是一个用于处理CSS颜色的库。它允许多种形式的输入，可以对颜色进行修改和转换，同时提供了颜色相关的方法。
支持IE9+。
下载easycolor.js或easycolor.min.js
使用script标签引入
<script src="easycolor.js"></script>开始使用
// 输入
easycolor('rgb(100,200,133)');
easycolor('#64c885');
easycolor({ r: 100, g: 100, b: 100, a: .5 });
new easycolor('rgb(100,200,133)');
// 转换为字符串
easycolor({ r: 100, g: 100, b: 100, a: .5 }).toString(); // 'rgba(100,100,100,.5)'
// 修改
var color = easycolor('rgb(100,200,133)');
color.r = 120;
color.toRgbString(); // 'rgb(120,200,133)'
color.red += 20;
color.toRgbString(); // 'rgb(140,200,133)'
color.hue = 0;
color.toRgbString(); // 'rgb(200,133,133)'支持rgb、hex、hsl、hsv和keyword颜色。
输入格式在CSS color规范的基础上，有一定宽松。
// 字符串
easycolor('rgb(100,200,133)');
// 对象
easycolor({ r: 100, g: 100, b: 100, a: .5 });
// 数组
easycolor([100, 100, 100]); // '#646464'
easycolor([100, 100, 100, .2]); // 'rgba(100,100,100,0.2)'
// easycolor实例
var a = easycolor({ r: 100, g: 100, b: 100, a: .5 });
var b = easycolor(a);
a === b; // false指定color的输出类型。
合法值
'rgb', 'hex', 'hsl', 'hsv', 'keyword', 'transparent'
缺省值
缺省为识别出的输入类型。特别地，识别为rgb类型的color，输出类型会置为hex。
说明
如果输入类型为字符串和对象，type不影响输入值的解析 如果输入类型为数组，输入将按type指定的类型解析 如果输入类型为easycolor实例，type会被忽略
easycolor('rgb(100,200,133)'); // '#646464' 识别为rgb类型的color，输出类型会置为hex
easycolor('rgb(100,200,133)', { type: 'rgb' }); // 'rgb(100, 200, 133)'
easycolor('rgb(100,200,133)', { type: 'hsl' }); // 'hsl(139.8, 47.619%, 58.824%)'
easycolor([100, 50, 50]); // '#643232'
easycolor([100, 50, 50], { type: 'hsl'}) // 'hsl(100,50%,50%)' 指定了输入的解析类型
easycolor({ r: 100, g: 100, b: 100 }); // 'rgb(100,100,100)'
easycolor({ r: 100, g: 100, b: 100 }, { type: 'hsl' }); // 'hsl(0,0%,39.216%)'指定rgb类型的color，是否按百分比格式输出。
缺省值
false
easycolor('rgb(51,51,51)'); // '#333333'
easycolor('rgb(51,51,51)', { percentage: true }); // '#333333'
easycolor('rgb(51,51,51)', { type: 'rgb', percentage: true }); // 'rgb(20%,20%,20%)'
easycolor('rgb(50%,100%,80%)', { type: 'rgb' }); // 'rgb(50%,100%,80%)'
easycolor('rgb(50%,100%,80%)', { type: 'rgb', percentage: false }); // 'rgb(128,255,204)'接收整型、浮点数、科学计数法、带符号的数字及百分比。
easycolor({ r: '100', g: '200', b: '133' });
easycolor({ r: '1e1', g: '100e-1', b: '1e+1' });
easycolor({ h: '-100', s: 50, l: 50 });
easycolor({ h: '+100', s: 50, l: 50 });
easycolor({ r: '50.5%', g: '.6%', b: '0.6%' });
easycolor({ r: '50.5%', g: '-.6%', b: '+.6%' });
easycolor({ h: 100, s: '-50%', l: 50 });接收CSS数字，及带角度单位的数字。
easycolor({ h: '100', s: 50, l: 50 });
easycolor({ h: '100.5', s: 50, l: 50 });
easycolor({ h: '100deg', s: 50, l: 50 });
easycolor({ h: '100grad', s: 50, l: 50 });
easycolor({ h: '2rad', s: 50, l: 50 });
easycolor({ h: '0.5turn', s: 50, l: 50 });接收CSS数字及百分比。范围为0 ~ 1。
easycolor({ r: 100, g: 100, b: 100, a: '0.5' });
easycolor({ r: 100, g: 100, b: 100, a: '50%' });r, g, b的数字范围为0 ~ 255，百分比范围为0 ~ 100。
/* 字符串 */
easycolor('rgb(100,200,133)');
easycolor('rgb( 100 200 133 )');
// 百分比
easycolor('rgb(50%,200%,80.5%)');
// RGBA
easycolor('rgba(100,200,133,.5)');
easycolor('rgba(100 200 133 .5)');
easycolor('rgba(100 200 133 / .5)');
easycolor('rgba(50%,200%,80.5%,50%)');
/* 对象 */
easycolor({ r: 100, g: 100, b: 100, a: .5 });
/* 数组 */
easycolor([100, 100, 100], { type: 'rgb' }); // '#646464'
easycolor([100, 100, 100, .2]); // rgba(100,100,100,0.2)easycolor('hsl(100,50%,50%)');
easycolor('hsl( 100 50% 50% )');
easycolor('hsla(100,50%,50%,.5)');
easycolor('hsla(100 50% 50% .5)');
easycolor('hsla(100 50% 50% / .5)');
easycolor({ h: 100, s: 50, l: 50 });
easycolor({ h: '100', s: '50%', l: '50%' });
easycolor({ h: 100, s: 50, l: 50, a: .5 });
easycolor([100, 50, 50], { type: 'hsl'});
easycolor([100, 50, 50, .5], { type: 'hsl'});easycolor('hsv(100,50%,50%)');
easycolor('hsv( 100 50% 50% )');
easycolor('hsva(100,50%,50%,.5)');
easycolor('hsva(100 50% 50% .5)');
easycolor('hsva(100 50% 50% / .5)');
easycolor({ h: 100, s: 50, v: 50 });
easycolor({ h: '100', s: '50%', v: '50%' });
easycolor({ h: 100, s: 50, v: 50, a: .5 });
easycolor([100, 50, 50], { type: 'hsv'});
easycolor([100, 50, 50, .5], { type: 'hsv'});easycolor('#abc');
easycolor('#abcc');
easycolor('#aabbcc');
easycolor('#aabbcccc');easycolor('black');
easycolor('orange');easycolor('transparent');想对颜色进行修改，可以直接修改color实例的属性。颜色的每种属性对应color实例的两个属性值，分别为该颜色属性的简写和全称。
支持的属性：
r/red
g/green
b/blue
h/hue（色相）
sl/sataratel（hsl模式饱和度）
l/light（亮度）
sv/sataratev（hsv模式饱和度）
v/bright（明度）
a/alpha（不透明度）
若接收类型为数字，范围为0 ~ 255。小于0置为0，大于255置为255。 若接收类型为百分比，范围为0 ~ 100。小于0置为0，大于100置为100。
var color = easycolor('#000');
color.r = 100;
color.r = -100;
color.r === 0; // true
color.r = 300;
color.r === 255; // truevar color = easycolor('red');
color.h = 100;接收数字及百分比，范围为0 ~ 100。小于0置为0，大于100置为100。
var color = easycolor('red');
color.sl = 50;
color.sl = -50;
color.sl === 0; // true
color.sl = 150;
color.sl === 100; // true接收数字及百分比，范围为0 ~ 1。小于0置为0，大于1置为1。
var color = easycolor('red');
color.a === 1; // true
color.a = 0.5;
color.a = '50%';
color.a = -1;
color.a === 0; // true
color.a = 50;
color.a === 1; // true若输出类型为keyword，但该颜色值不为任意css keyword颜色，则按hex类型输出
若输出类型为transparent，但alpha不为0，则按hex类型输出
若输出类型为hex，但alpha不为1，则按rgb类型输出
var transparent = easycolor('transparent');
transparent.toString(); // 'transparent'
transparent.a = .5;
transparent.toString(); // 'rgba(0,0,0,0.5)'
var keyword1 = easycolor('silver');
var keyword2 = easycolor('silver');
keyword1.toString(); // 'silver'
keyword1.r = 100;
keyword1.toString(); // '#64c0c0'
keyword2.a = .2;
keyword2.toString(); // 'rgba(192,192,192,0.2)'
var rgb = easycolor('rgb(100,100,100)');
rgb.toString(); // '#646464'
var hsl = easycolor('hsl(100,50%,50%)');
hsl.toString(); // 'hsl(100,50%,50%)'
var hsv = easycolor('hsv(100,50%,50%)');
hsv.toString(); // 'hsv(100,50%,50%)'
var hex = easycolor('#abc');
hex.toString(); // '#aabbcc'
hex.a = .2;
hex.toString(); // 'rgba(170,187,204,0.2)'
easycolor('#0003'); // 'rgba(0, 0, 0, .2)'输出时小数部分四舍五入。
var rgb = easycolor('rgb(100,100,100)');
rgb.toRgbString(); // 'rgb(100,100,100)'
rgb.a = .2;
rgb.toRgbString(); // 'rgba(100,100,100,0.2)'
easycolor('rgb(100.1,200.5,133.6)').toRgbString() // 'rgb(100,201,134)'
easycolor('#abc').toRgbString() // 'rgb(170,187,204)'输出时小数部分保留3位。
var rgbp = easycolor('rgb(20%,20%,20%)');
rgbp.toRgbPercentString(); // 'rgb(20%,20%,20%)'
rgbp.a = .2;
rgbp.toRgbPercentString(); // 'rgba(20%,20%,20%,0.2)'
easycolor('rgb(20.0001%,20.001%,20.50000%)').toRgbPercentString(); // 'rgb(20%,20.001%,20.5%)'输出时s, l小数部分保留3位。
var hsl = easycolor('hsl(100,50%,50%)');
hsl.toHslString(); // 'hsl(100,50%,50%)'
hsl.a = .2;
hsl.toHslString(); // 'hsla(100,50%,50%,0.2)'
easycolor('hsl(100.0001,20.001%,20.50000%)').toHslString(); // 'hsl(100,20.001%,20.5%)'var hsv = easycolor('hsv(100,50%,50%)');
hsv.toHsvString(); // 'hsv(100,50%,50%)'
hsv.a = .2;
hsv.toHsvString(); // 'hsva(100,50%,50%,0.2)'
easycolor('hsv(100.0001,20.001%,20.50000%)').toHsvString(); // 'hsv(100,20.001%,20.5%)'输出时小数部分四舍五入。
var hex = easycolor('#abc');
hex.toHexString(); // '#aabbcc'
hex.a = .2;
hex.toHexString(); // '#aabbcc33'
hex.r = 170.5;
hex.toHexString(); // '#abbbcc33'
hex.r = 170.4;
hex.toHexString(); // '#aabbcc33'var color = easycolor('silver');
color.toKeyword(); // 'silver'
color.r = 0;
color.toKeyword(); // ''
color.g = 0; color.b = 0;
color.toKeyword(); // 'black'返回一个随机颜色的实例。
var color = easycolor.random();
color.a === 1; // always true返回一个新的颜色，新颜色为原颜色对应的黑白色。
var color = easycolor('orange');
color.grayed().toString(); // '#acacac'返回一个新的颜色，新颜色为原颜色相反的颜色。
var color = easycolor('rgba(20%,20%,20%,.2)');
color.inverting().toString() // 'rgba(80%,80%,80%,0.2)'输入开始颜色和结束颜色，及数字n，返回长度为n的插值后的颜色数组。
var start = easycolor('#0000');
var end = easycolor('#fff');
easycolor.interpolation(start, end, 4).join(','); // 'rgba(0,0,0,0),rgba(85,85,85,0.333),rgba(170,170,170,0.667),#ffffff'
start.interpolation(end, 4).join(','); // 'rgba(0,0,0,0),rgba(85,85,85,0.333),rgba(170,170,170,0.667),#ffffff'
easycolor.interpolation(start, end).join(','); // ''
easycolor.interpolation(start, end, 1).join(',') // 'rgba(0,0,0,0)'输入4个颜色（分别为左上，右上，左下，右下），及宽度和高度，返回插值后的二维颜色数组。
var tl = easycolor('#000');
var tr = easycolor('#0f0');
var bl = easycolor('#f00');
var br = easycolor('#ff0');
var parseToString = function(arr) {
return arr.map(function(item) { return item.join(','); }).join('|');
}
parseToString(easycolor.interpolation2d(tl, tr, bl, br, 4, 4)); // '#000000,#005500,#00aa00,#00ff00|#550000,#555500,#55aa00,#55ff00|#aa0000,#aa5500,#aaaa00,#aaff00|#ff0000,#ff5500,#ffaa00,#ffff00'
parseToString(tl.interpolation2d(tr, bl, br, 4, 4)); // '#000000,#005500,#00aa00,#00ff00|#550000,#555500,#55aa00,#55ff00|#aa0000,#aa5500,#aaaa00,#aaff00|#ff0000,#ff5500,#ffaa00,#ffff00'
parseToString(easycolor.interpolation2d(tl, tr, bl, br, 4, 1)); // '#000000,#555500,#aaaa00,#ffff00'
parseToString(easycolor.interpolation2d(tl, tr, bl, br, 1, 4)); // '#000000|#555500|#aaaa00|#ffff00'
var oneHAndOneW = easycolor.interpolation2d(tl, tr, bl, br, 1, 1);
parseToString(oneHAndOneW); // '#000000'
parseToString(easycolor.interpolation2d(tl, tr, bl, br)); // ''
parseToString(easycolor.interpolation2d(tl, tr, bl, br, 0, 4)); // ''
parseToString(easycolor.interpolation2d(tl, tr, bl, br, 4, 0)); // ''输入前景色和背景色，返回两个颜色的透明度混合结果。
easycolor.mixAlpha(easycolor('#000'), easycolor('#fff')).toString(); // '#000000'
easycolor.mixAlpha(easycolor('#f003'), easycolor('#0f0')).toString(); // '#33cc00'
easycolor.mixAlpha(easycolor('#f003'), easycolor('#0f0c')).toString(); // 'rgba(61,194,0,0.84)'返回一个新的颜色，与原颜色有相同的值。
var color1 = easycolor('red');
var color2 = color1.clone();
color2.r = 100;
color1.toString() // 'red'
color2.toString() // '#640000'|-- coverage
|-- lcov-report // 覆盖率报告
|-- test
|-- test.js // 测试用例
|-- easycolor.js // 源代码
npm install
npm run test
npm run cover
- 更多的function支持
- 模块拆分，使用rollup打包
- 翻译成英文
- 发布npm包
- 写文档
- 写测试用例
- 写代码