Config-colors

A basic Color class that allows the generation of shades of a given base colour.

Usage

import Color from 'config-color';
const blue = new Color('#0000ff');

let darkBlue = blue.dark();
let darkerBlue = blue.darker();

let translucentBlue = blue.addOpacity(0.5);

API

Color.toString()

Returns the hex representation of this color in a string.

This isn't required when using the object as a CSS property in React directly, but is required with some CSS in JS libraries like Aphrodite.js.

In react:

<div style={{backgroundColor: green, color: blue.darker()}} />

With Aphrodite:

const styles = {
    div: {
        backgroundColor: green.toString(),
        color: blue.darker().toString(),
    }
};

Color.adjust(offset)

Prior to v2.0.0 this method was named shade()

Returns a lighter or darker shade of the base color.

A negative offset returns a darker color, a positive offset produces a lighter colour.

This function preserves the hue of the base colour, changing only the lightness and saturation unlike shade() and tint() which may result in a colour with a different hue.

blue.shade(-5);

Color.light(), Color.lighter(), Color.lightest()

Each of these functions return an increasingly lighter version of the base colour.

These functions preserve the hue of the base colour, changing only the lightness and saturation unlike shade() and tint() which may result in a colour with a different hue.

blue.light(); //Equivalent of blue.shade(5)
blue.lighter(); //Equivalent of blue.shade(10)
blue.lightest(); //Equivalent of blue.shade(15)

Color.dark(), Color.darker(), Color.darkest()

Each of these functions return an increasingly darker version of the base colour.

These functions preserve the hue of the base colour, changing only the lightness and saturation unlike shade() and tint() which may result in a colour with a different hue.

blue.dark(); //Equivalent of blue.shade(-5)
blue.darker(); //Equivalent of blue.shade(-10)
blue.darkest(); //Equivalent of blue.shade(-15)

Color.tint(amount)

Produces a colour lighter than the base colour by mixing with white.

The amount is the percentage of the base colour in the mix. A value of 0 <= x <= 1 is treated as a raw value (0.1 = 10%) whereas a value 1 < x <= 100 is treated as a percentage figure (10 = 10%).

An amount above 100 is treated as 100.

A negative value for amount is passed to Color.shade() as a positive value.

//These two are equivalent and will produce a color
//mix of 10% blue with 90% white
blue.tint(10);
blue.tint(0.1);

Color.shade(amount)

Produces a colour darker than the base colour by mixing with black.

The amount is the percentage of the base colour in the mix. A value of 0 <= x <= 1 is treated as a raw value (0.1 = 10%) whereas a value 1 < x <= 100 is treated as a percentage figure (10 = 10%).

An amount above 100 is treated as 100.

A negative value for amount is passed to Color.tint() as a positive value.

//These two are equivalent and will produce a color
//mix of 10% blue with 90% black
blue.shade(10);
blue.shade(0.1);

blue.shade(-50); //Equavalent of blue.tint(50)

Color.addOpacity(opacity)

Returns an rgba() function, adding an opacity to the base color.

If opacity is greater than 1, it is treated as a percentage (i.e. 1-100).

Otherwise, it is treated as a fractional value (0-1).

Color.getContrastText()

Added v1.1.0

Returns a suitable text color to display against this color as a background.

Chooses from:

• Off White (#f0f0f0)
• Off Black (#101010)
• Pure White (#ffffff)
• Pure Black (#000000)

The result will, where possible, meet the WCAG minimum requirements for contrast as per https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Where this isn't possible, the highest contrast option will be returned

const bgColor = new Color('#23fe45');

const styles = {
   div: {
       backgroundColor: bgColor,
       color: bgColor.getContrastText(),
   }
};

Changelog

v3.0.0

Color.adjust() removed in favour of Color.mix() due to strange results with some colours and generally poor logic.

Color.light(), Color.lighter(), Color.lightest(), Color.dark(), Color.darker() and Color.darkest() updated to use Color.tint() and Color.shade() methods. The output of these function will have changed but their use is the same.

BREAKING CHANGES

All direct calls to Color.adjust() should be updated to Color.shade() or Color.tint().

Calls to Color.light{,er,est}() and Color.dark{,er,est}() should be reviewed for suitability as the result will have changed.

v2.0.3

Remove compilation. This library will exist as an ES module.

v2.0.2

Compile library before publishing

v2.0.1

Fixed an issue with contrast calculations affecting getContrastText()

v2.0.0

Added tint and shade methods.

Existing shade method renamed to adjust.

To limit breaking changes, calls to shade with a negative value will be passed to adjust. However, calls to shade with a positive value will return a darker color, not lighter as previously expected.

BREAKING CHANGES

All direct calls to Color.shade() to be updated to Color.adjust(). Calls to Color.lighter(), Color.darker() et al are unaffected.

v1.2.0

Added test suite

v1.1.0

Added Color.getContrastText() function

v1.0.0

Initial release