Kolour

Kolour is a fluent color conversion and manipulation library.

Installation

Using bower:

$ bower install kolour

Using npm:

$ npm install kolour

Supported Color Spaces

Kolour supports the following color spaces.

Example

Here is an example using the Kolour.

const rgb = kolour('black');
rgb.r(40).g(60).b(80);
rgb.hex(); // #283C50
rgb.css(); // rgb(40, 60, 80)
const hsl = color.hsl();
hsl.h(120).s(40).l(80);
hsl.css(); // hsl(120, 40%, 80%)
hsl.alpha(0.5);
hsl.css(); // hsl(120, 40%, 80%, 0.5)

API

Creation

Kolour provides a simple way to create a color and you only have to call the method.

const white   = kolour('#FFFFFF');                // Create a color from a hex string
const green   = kolour('green');                  // Create a color from a color name
const hsl     = kolour('hsl(0, 100%, 50%)')       // Create a color from a css color
const cmy     = kolour({c: 1, m: 0, y: 0, a: 1}); // Create a color from an object
const cyan    = kolour(0xFF00FFFF);               // Create a color from a 32-bit ARGB number
const cloned  = kolour(black);                    // Create a color with another instance
const invalid = kolour(null);                     // Create an invalid color
const random  = kolour.random();                  // Create a random RGB color

If you need to create an instance of a specific color space, you can use a method that has the same name as a color space.

const cmy  = kolour.cmy(0.2, 0.4, 0.6);
const cmyk = kolour.cmyk(0.2, 0.4, 0.6, 0.8);
const hsl  = kolour.hsl(120, 0.4, 0.6);
const hsv  = kolour.hsv(120, 0.4, 0.6);
const hwb  = kolour.hwb(120, 0.4, 0.6);
const rgb  = kolour.rgb(80, 120, 160);

Accessor

Kolour provides two types of accessor for each component.

const rgb = kolour('rgb(60, 120, 180)');
rgb.r();      // Get red value (shorthand method)
rgb.red();    // Get red value
rgb.r(80);    // Set red value (shorthand method)
rgb.red(80);  // Set red value

In addition, ‘setter’ returns self so you can set values fluently as below.

const rgb = kolour('rgb(60, 120, 180)');
rgb.r(40).g(80).b(120).a(0.5);              // {r: 40, g: 80, b: 120, a: 0.5}
rgb.red(40).green(80).blue(120).alpha(0.5); // {r: 40, g: 80, b: 120, a: 0.5}

Conversion

Kolour provides the following color conversion methods.

color.cmy();  // Convert to a CMY color
color.cmyk(); // Convert to a CMYK color
color.hsl();  // Convert to a HSL color
color.hsv();  // Convert to a HSV color
color.hwb();  // Convert to a HWB color
color.rgb();  // Convert to a RGB color
color.hex();  // Convert to a hex string

Manipulation

kolour provides the following manipulation methods and they are related to less and sass.

color.lighten(0.1);     // Increase the lightness
color.darken(0.1);      // Decrease the lightness
color.grayscale();      // Convert to a grayscale color
color.whiten(0.1);      // Increase the whiteness
color.blacken(0.1);     // Increase the blackness
color.invert();         // Convert to a negative color
color.negate();         // Convert to a negative color
color.rotate(120);      // Rotate he hue
color.spin(120);        // Rotate he hue
color.complement();     // Convert to a complementary color
color.fadein(0.1);      // Increase the alpha
color.fadeout(0.1);     // Decrease the alpha
color.mix(other, 0.5);  // Mix with a color
color.tint(0.5);        // Mix with a white color
color.shade(0.5);       // Mix with a black color

Others

Kolour provides other methods as below.

color.css();          // Return a css color styled string
color.isValid();      // Return true when the color is valid
color.equals(other);  // Return true when the specified color is same color

License

MIT