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)