arielsalminen / coloralgorithm

Javacript function to produce color sets

coloralgorithm

A JavaScript function for producing color sets. Used to build Lyft's color system (Spectrum) and power ColorBox.

Background

• Re-Approaching Color by Lyft Design
• Designing a Comprehensive Color System by Linda Dong

Usage

The function takes in a JavaScript object with a specs key that describes the properties of the desired color palette:

import generate from "./src/generate";

const input = {
  specs: {
    // Number of colors
    steps: 11,
    // Hue Start Value (0 - 359)
    hue_start: 315,
    // Hue End Value (0 - 359)
    hue_end: 293,
    // Hue Curve (See Curves Section)
    hue_curve: "easeInQuad",
    // Saturation Start Value (0 - 100)
    sat_start: 4,
    // Saturation End Value (0 - 100)
    sat_end: 90,
    // Saturation Curve (See Curves Section)
    sat_curve: "easeOutQuad",
    // Saturation Rate (0 - 200)
    sat_rate: 130,
    // Luminosity Start Value (0 - 100)
    lum_start: 100,
    // Luminosity End Value (0 - 100)
    lum_end: 53,
    // Luminosity Curve (See Curves Section)
    lum_curve: "easeOutQuad",
    // Modifier Scale
    // Every generated color gets a modifier (label) that
    // indicates its lightness. A value of 10 results in
    // two-digit modifiers. The lightest color will be 0 (e.g. Red 0)
    // and the darkest color will be 100 (e.g. Red 100), given
    // that you generate 11 colors
    modifier: 10
  }
};

const palette = generate(input);

Contrary to ColorBox, this version of the algorithm does not support a lock color.

Example Output

The function returns the generated palette as an array of color objects:

[
  {
    contrastBlack: "19.32",
    contrastWhite: "1.09",
    displayColor: "black",
    hex: "#fff2fc",
    hsl: [315, 1, 0.974],
    hsv: [314.99999999999994, 0.052000000000000074, 1],
    hue: 314.99999999999994,
    hueRange: [315, 293],
    label: 0,
    lum: 1,
    rgb: [255, 242, 252],
    sat: 0.052000000000000074,
    steps: 11
  },
  ...
];

Curves

Hue, Saturation, and Luminosity all allow you to specify a curve. The following curves are supported:

• easeInQuad (Quad - EaseIn)
• easeOutQuad (Quad - EaseOut)
• easeInOutQuad (Quad - EaseInOut)
• easeInQuart (Quart - EaseIn)
• easeOutQuart (Quart - EaseOut)
• easeInOutQuart (Quart - EaseInOut)
• easeInSine (Sine - EaseIn)
• easeOutSine (Sine - EaseOut)
• easeInOutSine (Sine - EaseInOut)
• easeInCubic (Cubic - EaseIn)
• easeOutCubic (Cubic - EaseOut)
• easeInOutCubic (Cubic - EaseInOut)
• easeInExpo (Expo - EaseIn)
• easeOutExpo (Expo - EaseOut)
• easeInOutExpo (Expo - EaseInOut)
• easeInQuint (Quint - EaseIn)
• easeOutQuint (Quint - EaseOut)
• easeInOutQuint (Quint - EaseInOut)
• easeInCirc (Circ - EaseIn)
• easeOutCirc (Circ - EaseOut)
• easeInOutCirc (Circ - EaseInOut)
• easeInBack (Back - EaseIn)
• easeOutBack (Back - EaseOut)
• easeInOutBack (Back - EaseInOut)
• linear (linear)