Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ccc with all npm packages installed. Try it out:

var ccc = require("ccc")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ccc v0.5.1

Color conversions and transformations

ccc Build Status

Color conversions and transformations

Install

npm install --save ccc
component install andrepolischuk/ccc

API

ccc(str)

Create color via string

var color = ccc('black');
var color = ccc('#ffffff');
var color = ccc('rgb(255, 0, 0)');
var color = ccc('rgba(255, 0, 0, 0.5)');
var color = ccc('hsl(240, 100%, 50%)');
var color = ccc('hsla(240, 100%, 50%, 0.7)');

ccc(obj)

Create color via object

var color = ccc({r: 255, g: 0, b: 0});
var color = ccc({r: 255, g: 0, b: 0, a: 0.5});
var color = ccc({c: 100, m: 0, y: 100, k: 0});
var color = ccc({h: 240, s: 100, l: 50});
var color = ccc({h: 60, s: 100, v: 100});

ccc.rgb(...arguments)

Create color via arguments

var color = ccc.keyword('black');
var color = ccc.hex('ffffff');
var color = ccc.rgb(255, 0, 0);
var color = ccc.rgb(255, 0, 0, 0.5);
var color = ccc.cmyk(100, 0, 100, 0);
var color = ccc.hsl(240, 100, 50);
var color = ccc.hsl(240, 100, 50, 0.7);
var color = ccc.hsv(60, 100, 100);

ccc.rgb(arr)

Create color via array

var color = ccc.rgb([255, 0, 0]);
var color = ccc.rgb([255, 0, 0, 0.5]);
var color = ccc.cmyk([100, 0, 100, 0]);
var color = ccc.hsl([240, 100, 50]);
var color = ccc.hsl([240, 100, 50, 0.7]);
var color = ccc.hsv([60, 100, 100]);

.rgb()

Return converted color object

color.rgb(); // {r: 255, g: 0, b: 0}
color.cmyk(); // {c: 100, m: 0, y: 100, k: 0}
color.hsl(); // {h: 240, s: 100, l: 50}
color.hsv(); // {h: 60, s: 100, v: 100}

.rgbArray()

Return converted color array

color.rgbArray(); // [255, 0, 0]
color.cmykArray(); // [100, 0, 100, 0]
color.hslArray(); // [240, 100, 50]
color.hsvArray(); // [60, 100, 100]

.rgbString()

Return converted color string

color.keyword(); // 'black'
color.hex(); // '#ffffff'
color.rgbString(); // rgb(255, 0, 0)
color.hslString(); // hsl(240, 100%, 50%)

.invert()

Invert color

ccc('#ffffff').invert().hex(); // #000000

.grayscale()

Convert color to grayscale

ccc('#669900').grayscale().hex(); // #787878

.average(Color2)

Calculate average

ccc('#333333').average(ccc('#999999')).hex(); // #666666

.light()

Check if color is light

ccc('white').light(); // true

.dark()

Check if color is dark

ccc('black').dark(); // true

.lighten(val)

Lighten color by val

ccc('#000000').lighten(50).hex(); // #080808

.darken(val)

Darken color by val

ccc('#ffffff').darken(50).hex(); // #080808

.saturate(val)

Saturate color by val

ccc('gray').saturate(50).saturation(); // 50

.desaturate(val)

Desaturate color by val

ccc('red').desaturate(50).saturation(); // 50

.red([val])

Return or set red component of RGB

ccc('red').red(); // 255
ccc('black').red(255).keyword(); // red

.green([val])

Return or set green component of RGB

ccc('green').green(); // 255
ccc('black').green(255).keyword(); // lime

.blue([val])

Return or set blue component of RGB

ccc('blue').blue(); // 255
ccc('black').blue(255).keyword(); // blue

.alpha([val])

Return or set alpha component

ccc('rgba(0, 0, 0, 0.5)').alpha(); // 0.5
ccc('black').alpha(0.5).rgbString(); // rgba(0, 0, 0, 0.5)

.cyan([val])

Return or set cyan component of CMYK

ccc('aqua').cyan(); // 100
ccc('white').cyan(100).keyword(); // aqua

.magenta([val])

Return or set magenta component of CMYK

ccc('fuchsia').magenta(); // 100
ccc('white').magenta(100).keyword(); // fuchsia

.yellow([val])

Return or set yellow component of CMYK

ccc('yellow').cyan(); // 100
ccc('white').cyan(100).keyword(); // yellow

.key([val])

Return or set key component of CMYK

ccc('black').key(); // 100
ccc('white').key(100).keyword(); // black

.hue([val])

Return or set hue component of HSL

ccc('red').hue(); // 0
ccc('lime').hue(240).keyword(); // blue

.saturation([val])

Return or set saturation component of HSL

ccc('lime').saturation(); // 100
ccc('gray').saturation(100).keyword(); // red

.lightness([val])

Return or set lightness component of HSL

ccc('blue').lightness(); // 50
ccc('lime').lightness(25).keyword(); // green

.value([val])

Return or set value component of HSB

ccc('yellow').value(); // 100
ccc('lime').value(50).keyword(); // green

License

MIT

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free