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.

hexToObj(value)

Hex to JS object.

objToHex(value, hexOptions?)

JS object to hex.

hexToHsl(value)

Hex to HSL.

hexToRgb(value)

Hex to RGB.

rgbToObj(value)

RGB/RGBA to JS object.

objToRgb(value)

JS object to RGB/RGBA. RGBA if *a* property present.

rgbToHsl(value)

RGB/RGBA to HSL/HSLA.

rgbToHex(value, hexOptions?)

RGB/RGBA to hex.

hslToObj(value)

HSL/HSLA to JS object.

objToHsl(value)

JS object to HSL/HSLA. HSLA if *a* property present.

hslToRgb(value)

HSL/HSLA to RGB/RGBA.

hslToHex(value, hexOptions?)

HSL/HSLA to hex.

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.

constructor(colors)

Creates a colormap from the colormap object.

getColorsAndFraction(fraction)

Returns a fraction relative to the subinterval and the endpoint colors.

ColorInterpolator

Produces values from colormap.

constructor(...args)

Given either two colors, or object representing colormap.

getColor(fraction, format?)

Produces the color from the colormap at the provided point, value range 0.0-1.0

static interpolateColor(fraction, ..args)

Produces interpolated color at point fraction from the two color range or colormap provided as rest arguments without creating new interpolator.

generateColors(count, format?)

Produces a list of length *count* of colors from the interpolator.

static generateColors(fraction, ..args)

Same as above but without creating object.

Changelog

1.2

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

1.1

• Support interpolating alpha values

TODO

• Hardcoded Matplotlib colormaps