Color extensions

Parse and convert colors. Interpolate between colors or create colormaps as lists.

Features

• Automatically infer color type and parse from string.
• Convert between types.
• Create colormaps of two or more colors.
• Interpolate colors in colormaps.
• Create lists of colors from colormaps.

Currently supported types

• Hex
  • Short or long form, with or without hash
  • #000, #FF00FF, ae141c
• RGB
  • Whitespace between values allowed but not encouraged
  • rgb(255, 0, 123) rgb(0,0,255)
• RGBA
  • rgba(0, 0, 0, 0.5)
• HSL
  • hsl(120, 100%, 50%)
• HSLA
  • hsla(120, 100%, 50%, 0.5)
• Javascript object
  • Properties r, g, b, a

Examples

const {
    hexToRgb,
    objToRgb,
    convertTo,
    getColorType
} = require("color-extensions");

// Convert between types
hexToRgb("#fff"); // Produces 'rgb(255,255,255)'
objToRgb({ r: 255, g: 128, b: 0, a: 0.1 }); // Produces 'rgba(255,128,0,0.1)'

// Automatic inference of source type.
convertTo("#00ff00", "rgb"); // Produces 'rgb(0,255,0)'
convertTo("#00ff00", "object"); // Produces { r: 0, g: 255, b: 0 }
convertTo("hsla(240, 100%, 50%, 0.5)", "rgb"); // Produces 'rgba(0, 0, 255, 0.5)'

// Infer the types.
getColorType("#FFF"); // Produces 'hex_short'
getColorType("#FFF000"); // Produces 'hex_long'

const { ColorInterpolator } = require("color-extensions");

// Create colormap from interval points (range 0-1) and endpoint colors.
const colorMap = {
    0: "#fff", // Start white
    0.3: "#f00", // Red
    0.5: "#000", // Black
    1.0: "#0000ff" // End with blue
};

const interpolator = new ColorInterpolator(colorMap);

// Get single value.
interpolator.getColor(0.23); // Produces '#ff3c3c', the type is inferred from colormap.
interpolator.getColor(0.23, "rgb"); // Produces 'rgb(255,60,60)'

// Get range of color values.
interpolator.generateColors(10);
/*
Produces:
[
    '#ffffff',
    '#ffa1a1',
    '#ff4242',
    '#d50000',
    '#470000',
    '#00001c',
    '#000055',
    '#00008e',
    '#0000c6',
    '#0000ff'
]
*/

// Same thing, explicit format.
interpolator.generateColors(10, "rgb");

// Static version without creating object, also using alpha values.
ColorInterpolator.generateColors(10, "rgba(0,0,0,0.5)", "rgba(255,255,255,1)");

Installation

npm install color-extensions

Node:

const colorExtensions = require("color-extensions")

Webpack:

import * as colorExtensions from "color-extensions";

Browser script:

Include file colorextensions.min.js in page and access through global object ColorExtensions

Conversions

Root level functions.

Functions converting to hex take optional object which has properties prefix and shortForm. Hex colors with shortForm=true use short (3 character) hex color if possible and fall back into 6 character form if not applicable.

Classes

Root level classes.

ColorMap

Represents a color map used by interpolator and produces interval colors. Not really necessary for user.

ColorInterpolator

Produces values from colormap.

Changelog

1.2

• Support for HSL and HSLA types
• Various minor fixes and improvements

1.1

• Support interpolating alpha values

TODO

• Hardcoded Matplotlib colormaps