Colors can be created by calling the Color
function with new
and either a
CSS color string or three integer values for the red, green and blue channels
and an optional float value for alpha:
var redColor = new Color(255, 0, 0);
var reddishColor = new Color(255, 0, 0, 0.9);
var greenColor = new Color('#0f0');
var blueColor = new Color('blue');
var yellowColor = new Color('rgb(255, 255, 0)');
var aquaColor = new Color('hlsa(190, 90%, 85%, 0.5)');
The fromString()
, fromRGB()
and fromHSL
methods are complimentary to the
constructor syntax:
var reddishColor = Color.fromString('rgba(255, 0, 0, 0.5)');
var greenColor = Color.fromRGB(0, 255, 0, 0.99);
var yellowColor = Color.fromHSL(60, 45, 100).alpha(0.5);
These methods set or get the RGB channel values, using values between 0 and 255.
c.red(128).green(255).blue(0); // => c
c.red(); // => 128
These methods set or get the HSL channel values, using values between 0 and 360 for the hue and between 0 and 100 for saturation and lightness.
c.hue(0).saturation(100).lightness(50); // => c
c.hue(); // => 0
This method sets or gets the alpha channel value, using values between 0 and 1.
c.alpha(0.25); // => c
c.alpha(); // => 0.25
All the shift
methods modify the value of the specified channel in place.
shiftHue(delta)
shiftSaturation(delta)
shiftLightness(delta)
shiftRed(delta)
shiftGreen(delta)
shiftBlue(delta)
shiftAlpha(delta)
Each accepts a value to update the current one.
The following methods combine a color with another. All accept a CSS string
Mix a color into the current one to get a new color.
Mix a color into the current one to get a new color. This method updates the saturation and lightness of the resulting color with the average of the operands.
Add the RGB values of another color to the current one to get another color.
Substract the RGB values of another color to the current one to get another color.
You can define functions that update color channels sequentially:
let c1 = new Color("#66997a"),
steps = 20;
c1.phase('lightness', function (value, phase) {
return 50 + 50 * Math.sin(phase * Math.PI / 180);
}).phase('hue', function (value, phase) {
return value + 10;
});
while (steps--) {
console.log(c1.hex())
c1 = c1.next();
}
This is similar to calling the shift
methods on the color, with the
advantage of accepting arbitrary transformations through a callback.
The phase()
method accepts one of the color attributes (red, green, blue,
hue, saturation, lightness or alpha) and a callback. You can attach multiple
phase functions to a color object.
The callback will be called when the next()
method is invoked in the color
object, passing the current value of the attribute and a phase that
indicates how many phase changes the color has gone through. The value of
this
inside the callback will correspond to the color object.
You can use the following methods to get CSS strings:
c.hex(); // => '#f0553a'
c.rgb(); // => 'rgba(100, 120, 250)'
c.rgba(); // => 'rgba(0, 0, 0, 0.5)'
c.rgba(0.15); // => 'rgba(0, 0, 0, 0.15)'
c.hsl(); // => 'hsla(201, 90%, 67%)'
c.hsla(); // => 'hsla(125, 50%, 90%, 0.2)'
c.hsla(0.9); // => 'hsla(125, 50%, 90%, 0.9)'