dcolor/Color

The dcolor/Color module provides a unified way to store color components and convert back and forth between color string representations and the Color object. It holds the components in rgba form. dcolor/Color objects can often be used directly as a value to the various color properties of the consuming projects.

Before proceeding checkout setup page on how to setup a project using dcolor. This will be required to leverage the samples from this page.

Table of Contents

Instantiation
Conversion

Instantiation

You can create a Color object from a variety of inputs, including CSS string representations of the color as well as [r, b, g] or [r, g, b, a] arrays.

require(["dcolor/Color"], function (Color) {
  // from a CSS string
  var color1 = new Color("rgb(100, 0, 0)");
  var color2 = new Color("#99EE00");
  var color3 = new Color("red");
  var color4 = new Color("hsla(100, 0, 0, 0.5)");
  // from an RGBA Array
  var color5 = new Color([100, 0, 0, 0.5]);
  // from another color or a r,g, b hash
  var color6 = new Color(color3);
  var color7 = new Color({ r: 100, g: 0, b: 0});
});

The recognized "named" colors (like "red") is the 16 colors list from CSS3 Basic color keywords list plus the "transparent" keyword. For more keyword support see dcolor/ExtendedColor for details.

Instead of using the function constructor you can specifically build or update an existing Color object using "from" functions:

 require(["dcolor/Color"], function (Color) {
   // create a new object
   var color = Color.fromHex("#99EE00");
   // update an existing color with new components
   Color.fromRgbaString("rgba(100, 0, 0)", color);
 });

Conversion

Once you have a Color object you can converted it back to a particular string representation as follows:

require(["dcolor/Color"], function (Color) {
  var color = new Color("green");
  var hex = color.toHex();
  var rgb = color.toRgbString();
  var hsla = color.toHslaString(true);
});

Or to an array of components:

require(["dcolor/Color"], function (Color) {
  var color = new Color("green");
  var rbga = color.toRgbaArray(); // [r, g, b, a]
  var hsla = color.toHslaArray(); // [h, s, l, a]
});