@jhonpangit/color-full
v1.0.1
Published
Stateful implementation of color
Downloads
6
Readme
colorful
A stateful implementation of harthur/color.
- Immutable.
- Additional color spaces.
- Standalone manipulations.
- Standalone metrics.
- Enhanced parsing.
- Optimized performance.
- Normalized API.
Installation
$ npm install @jhonpangit/color-full
var Color = require('@jhonpangit/color-full');
var color = new Color("#7743CE");
color.alpha(0.5).lighten(0.5);
color.hslString(); // "hsla(262, 59%, 81%, 0.5)"
API
Setters
//Initial
var color = Color([10, 20, 30, .6]);
var color = Color('hwb(380deg, 40.1%, -12.5%, .5)');
var color = Color({r:20, g:30, b:40});
//Per-space get/set
var color = Color().rgb([10, 20, 30]);
var color = Color().hwb(360, 50, 30);
var color = Color().cmyk({c: 10, m: 20, y: 30, k: 70});
var color = Color().rgb(0xAAFFDD);
var color = Color().hsl('hsla(120, 20, 30, .5)');
//Per-channel get/set
color.alpha(0.5);
color.red(12);
color.lightness(15);
//Typed setter
color.fromString('rgb(10, 20, 30)');
color.fromArray([10, 20, 30], 'rgb');
color.fromJSON({red: 10, green: 20, blue: 30});
color.fromNumber(0xAABBCC, 'rgb');
//Universal
color.from(0xAABBCC);
Getters
//Per-space
color.rgb(); // {r: 10, g:20, b:30}
color.rgbArray(); // [10, 20, 30]
color.rgbString(); // rgba(10, 20, 30, .6)
//Per-channel
color.alpha(); // 0.5
color.red(); // 10
//Special formats
color.hexString(); //#AABBCC
color.percentString(); //rgb(10%, 20%, 100%);
color.keyword(); //red
//Typed
color.toString('hwb'); //hwb(10, 20%, 30%, 0.6)
color.toArray('rgb'); //[10, 20, 30]
color.toJSON('hsl'); //{h:10, s:20, l:30}
color.toNumber('rgb'); //0xAABBCC
Manipulations
color.negate(); // rgb(0, 100, 255) → rgb(255, 155, 0)
color.lighten(0.5); // hsl(100, 50%, 50%) → hsl(100, 50%, 75%)
color.darken(0.5); // hsl(100, 50%, 50%) → hsl(100, 50%, 25%)
color.saturate(0.5); // hsl(100, 50%, 50%) → hsl(100, 75%, 50%)
color.desaturate(0.5); // hsl(100, 50%, 50%) → hsl(100, 25%, 50%)
color.greyscale(); // #5CBF54 → #969696
color.whiten(0.5); // hwb(100, 50%, 50%) → hwb(100, 75%, 50%)
color.blacken(0.5); // hwb(100, 50%, 50%) → hwb(100, 50%, 75%)
color.clearer(0.5); // rgba(10, 10, 10, 0.8) → rgba(10, 10, 10, 0.4)
color.opaquer(0.5); // rgba(10, 10, 10, 0.8) → rgba(10, 10, 10, 1.0)
color.rotate(180); // hsl(60, 20%, 20%) → hsl(240, 20%, 20%)
color.rotate(-90); // hsl(60, 20%, 20%) → hsl(330, 20%, 20%)
color.mix(Color("yellow")); // cyan → rgb(128, 255, 128)
color.mix(Color("yellow"), 0.3); // cyan → rgb(77, 255, 179)
// chaining
color.green(100).greyscale().lighten(0.6)
Metrics
color.luminance();
color.contrast(otherColor);
color.level(otherColor); //AAA
color.isDark(); //false
color.isLignt(); //true
Utils
//JSON-like API
Color.parse('rgb(10, 20, 30)');
Color.stringify(color); //rgba(10, 20, 30, 0.8)
//Array-like API
Color.from({r: 20, g: 40, b: 50});
//Get current space
color.getSpace(); //rgb
color.setSpace('rgb');
//Set current space values
color.setValues([10, 20, 30]);
color.getValues('hsl'); //[10, 20, 30]
//Get/set separate channel
color.getChannel('red', 1); //20
color.setChannel('lab', 1, 25);
//Clone
color.clone();