chromator

Chromator

Chromator is a colour tool for websites. Currently it provides functions for converting between colour code formats.

Installation

If using NPM, run the following command:

npm install chromator

Demo

Se the colour picker demo for an example on how this package may be used.

Usage

Instantiation

Start by instantiating a new Chromator object:

import { Chromator } from 'chromator';
const blue = new Chromator('blue');

Any colour code that is valid in CSS (except from currentColour) can be used to instantiate a new Chromator object. Here are some examples:

const red = new Chromator('#ff0000');
const green = new Chromator('rgb(0, 255, 0)');
const yellow = new Chromator('hsl(60, 100%, 50%)');
const transparent = new Chromator('transparent');
const cyan = new Chromator('#0FF');
const transparentMagenta = new Chromator('rgba(255, 0, 255, 0.5)');

It also accepts objects in RGB(A), HSL(A), HSV(A), XYZ(A) and LAB(A) formats:

const red = new Chromator({red: 255, green: 0, blue: 0});
const green = new Chromator({hue: 120, saturation: 1, lightness: 0.5});
const blue = new Chromator({hue: 240, saturation: 1, value: 1, alpha: 1});
const yellow = new Chromator({ x: 0.77003, y: 0.92783, z: 0.13853 });
const cyan = new Chromator({ L: 91.1132, a: -48.0875, b: -14.1312 });

Conversion

The object may then be used to convert the colour to any other format:

const red = new Chromator('#ff0000');
console.log(red.getRgbCode()); // rgb(255, 0, 0)
console.log(red.getHexCode()); // #FF0000
console.log(red.getHslCode()); // hsl(0, 100%, 50%)
console.log(red.getRgb()); // {red: 255, green: 0, blue: 0}
console.log(red.getHsl()); // {hue: 0, saturation: 1, lightness: 0.5}
console.log(red.getHsv()); // {hue: 0, saturation: 1, value: 1}
console.log(red.getCieXyz()); // {x: 0.41246, y: 0.21267, z: 0.01933}
console.log(red.getRgba()); // {red: 255, green: 0, blue: 0, alpha: 1}
console.log(red.getHsla()); // {hue: 0, saturation: 1, lightness: 0.5, alpha: 1}
console.log(red.getHsva()); // {hue: 0, saturation: 1, value: 1, alpha: 1}
console.log(red.getCieXyza()); // {x: 0.41246, y: 0.21267, z: 0.01933, alpha: 1}
console.log(red.getLab()); // {L: 53.2408, a: 80.0925, b: 67.2032}
console.log(red.getLaba()); // {L: 53.2408, a: 80.0925, b: 67.2032, alpha: 1}

Lightness manipulation

The Chromator.lighten and Chromator.darken methods can be used to lighten or darken the colour respectively:

const red = new Chromator('#FF0000');
console.log(red.lighten(0.5).getHexCode()); // #FF8080
console.log(red.darken(0.5).getHexCode()); // #800000

There is also a method called Chromator.invertLightness that inverts the lightness of the colour:

const hsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
const colour = new Chromator(hsl);
colour.invertLightness();
const invertedHsl = colour.getHsl(); // { hue: 302, saturation: 0.59, lightness: 0.35 }

Hue manipulation

The hue is represented as an angle in degrees, representing the position of the colour on the colour wheel. The Chromator.addHue and Chromator.subtractHue methods can be used to rotate the hue of the colour:

const colour = new Chromator('#FF0000');
console.log(colour.addHue(120).getHexCode()); // #00FF00
console.log(colour.subtractHue(120).getHexCode()); // #FF0000

There is also an Chromator.complementarise method that transforms the colour to its complementary colour by adding 180 degrees to the hue:

const colour = new Chromator('#FF0000');
console.log(colour.complementarise().getHexCode()); // #00FFFF

Colour inversion

The Chromator.invert method is a combination of Chromator.invertLightness and Chromator.complementarise and can be used to invert the colour:

const colour = new Chromator('#FFCCCC');
console.log(colour.invert().getHexCode()); // #003333

Relative luminance

The Chromator.getRelativeLuminance method returns the relative luminance of the colour, which is a measure of the brightness of the colour. It differs from the lightness in that it takes into account the human perception of brightness, and is used in the calculation of contrast ratios. The value corresponds to the Y value in the CIE XYZ colour space.

const colour = new Chromator('#FF0000');
console.log(colour.getRelativeLuminance()); // 0.21267

It is also possible to set a desired relative luminance value using the Chromator.setRelativeLuminance method. This changes the lightness of the colour in order to obtain the desired luminance while keeping the hue and saturation constant.

const hsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
const colour = new Chromator(hsl);
colour.setRelativeLuminance(0.5);
const newHsl = colour.getHsl(); // { hue: 302, saturation: 0.59, lightness: 0.78 }