lyft / 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)

coloralgorithm's Issues

Could you add some documentation?

Hi there!

Thanks for your work, the demo looks great!

I was wondering if you could add some basic documentation to the code and some words in your readme.

I would be interested in using this to generate color schemas for charts in Britecharts. It could make for a nice demo to apply your algorithm to a chart.

Thanks again!

Support for minor steps

as it seen here: https://www.colorbox.io/

Support HSLuv and perceptually uniform hue/staturation

Color box is super helpful but could be more helpful if you added the option to transform colors along HSLuv interface instead of only HSL. Maybe add a toggle somewhere.

Read more: Perceptually Uniform Color Spaces

Specifying your own cubic bezier would be nice too...

...also publishing this to npm would be nice 😄

Thanks!

Live-update the url when parameters are changed

When copying/pasting a shareable url into the browser, and then changing parameters, the url no longer reflects the current state of the screen. It would be a nice enhancement for the url to always reflect the currently selected parameters rather than having to click "Share" to get a new url.

Thanks for this tool; it's amazing!

Is this the algorithm I seek?

Is this what was rumoured about at:

https://design.lyft.com/re-approaching-color-9e604ba22c88

and which powers:

https://www.colorbox.io/

Is it?

Lock Color

Is there a chance to see the Lock Color feature part of Colorbox added here too, eventually? :)

Publishing to npm

Are there any plans to publish this to npm?

Also, thanks for open sourcing and sharing your approach. It's much appreciated!