@chriscodesthings/color-object

color-object ·

Simple, lightweight class to manipulate a color and convert between formats

Install

npm install --save @chriscodesthings/color-object

Description

The color object stores a color and provides methods for expressing the color in different formats and manipulating the color in different ways.

• Coercible - use as a string to return a CSS hex color code.
• JSON Compatible - use JSON.stringify to export color as a CSS hex color code.

Sections

• Constructor
• Examples
• Methods

---

Constructor · Sections

Syntax

import Color from '@chriscodesthings/color-object';

new Color(color);

Parameters

• color (optional):

If omitted, a random color is generated. If true, a random dark color is generated, if false, a random light color. A specific color can be specified as a CSS hex color code or as an array.

Note, if an invalid color is specified, the color defaults to black.

Examples · Sections

Random Colors

If the first parameter is omitted or boolean true/false then a random color is generated.

new Color(); // Random color
new Color(true); // Random dark color
new Color(false); // Random dark color

CSS Hex Color Code

A CSS hex color code can be passed, in short or long form, with or without an alpha value.

new Color("#639"); // rebeccapurple
new Color("#6495ed"); // cornflowerblue
new Color("#6495ed7f"); // cornflowerblue with 50% transparency

RGB or RGBA Values

An RGB or RGBA color can be passed in an array in the form [red, green, blue, alpha (optional)], with or without the alpha value.

new Color([100, 149, 237]); // cornflowerblue
new Color([100, 149, 237, 0.5]); // cornflowerblue with 50% transparency

Methods · Sections

• constructor() - create the Color object
• set() - set the color
• asHex() - output as CSS hex color code
• asRGBA() - output as RGBA array
• fade() - fade the color

---

set(color) · Methods

Description

Sets the color.

Use

const col = new Color();

console.log(col.set([100, 149, 237]));  // cornflowerblue
// => true

Parameters

• color: the color to set

The color can be provided using the same rules as Constructor.

Returns

Returns boolean true on success, false if the color provided isn't valid.

Note, if false is returned, the color is unmodified.

---

asHex() · Methods

Description

Outputs color as a CSS hex color code.

Use

const col = new Color([100, 149, 237]); // cornflowerblue

console.log(col.asHex());
// => #6495ed

Returns

Returns a string containing CSS hex color code.

---

asRGBA() · Methods

Description

Outputs color as red, green, blue and alpha values.

Use

const col = new Color([100, 149, 237]); // cornflowerblue

console.log(col.asRGBA());
// => [ 100, 149, 237, 1 ]

Returns

Returns array containing [red, green, blue, alpha] values.

Note, the alpha value is always provided. If the color has no transparency set the alpha value will return 1.

---

fade(by) · Methods

Description

Fades a color towards black or white by a given percentage.

Use

const col = new Color([100, 149, 237]); // cornflowerblue

console.log(col.fade(-50)); // fade 50% towards black
// => #324b77

Parameters

• by: a percentage from -100 to 100. Negative values fade towards black, positive towards white.

Returns

Returns a string containing the CSS hex color code of the faded color.