Colour

Module Colour

In overview:

• Colour.interpolator - returns a function to interpolate between colours.
• Colour.getCssVariable - get a value of a CSS variable or use a fallback value
• Colour.opacity - return a variation of a colour with set opacity

Parsing & converting

If you want to parse a colour into a structured object:

• Colour.toHsl yields { h, s, l, opacity } with relative values
• Colour.toRgb yields { r, g, b, opacity } with relative values
• Colour.toRgb8bit yields { r, g, b, opacity } with 0..255 ranged values

The input colour can be a colour string, name or structured object representing colour.

To convert a structured colour into a string suitable for CSS or canvas drawing, use Colour.toString . It can also take a CSS variable as input.

Colour.toString(`silver`);
Colour.toString({ h: 0.5, s: 1, l: 0.5 });
Colour.toString({ r: 0, g: 0.5, b: 0.5, opacity: 0.5 });
Colour.toString(`--my-css-variable`);

Stepped scale

Colour.scale produces a stepped scaled of colours

const steps = Colour.scale([ `red`, `green` ], 10);
for (const step of steps) {
  // Get a 'hsla(...)' string representation of colour
  // This can be used with the canvas, setting DOM properties etc.
  const css = Colour.toString(step);
}

Modifying

Colour.multiplyOpacity and Colour.multiplySaturation return a variation of a colour with either opacity or saturation multiplied by the given value.

Colour.multiplyOpacity(`blue`, 0.5);  // rgba(0,0,255,0.5)