config-colors v3.0.0

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