Skip to content

lyft/coloralgorithm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

coloralgorithm

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

Background

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)

About

Javacript function to produce color sets

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published