coloring-palette

A library that generates color palettes based on the Material UI algorithm

Usage no npm install needed!

<script type="module">
  import coloringPalette from 'https://cdn.skypack.dev/coloring-palette';
</script>

README

coloring-palette

A library that generates color palettes based on the Material UI color system, and the underlying algorithm to generate colors is forked from Lyft's coloralgorithm

Usage

npm install coloring-palette

import coloringPalette from 'coloring-palette'
const shades = coloringPalette('#009688', 'hex')
// { '50': { color: '#edddf0', contrastText: '#000000' },
//   '100': { color: '#e7b9f0', contrastText: '#000000' },
//   '200': { color: '#da8ee8', contrastText: '#000000' },
//   '300': { color: '#c95fde', contrastText: '#ffffff' },
//   '400': { color: '#b63dd1', contrastText: '#ffffff' },
//   '500': { color: '#9c27b0', contrastText: '#ffffff' },
//   '600': { color: '#9120b0', contrastText: '#ffffff' },
//   '700': { color: '#7d1a9c', contrastText: '#ffffff' },
//   '800': { color: '#6f168a', contrastText: '#ffffff' },
//   '900': { color: '#5d1375', contrastText: '#ffffff' },
//   A100: { color: '#ed89fc', contrastText: '#000000' },
//   A200: { color: '#e54afb', contrastText: '#ffffff' },
//   A400: { color: '#ca07ec', contrastText: '#ffffff' },
//   A700: { color: '#9f00c0', contrastText: '#ffffff' } }

Visualized below

#edddf0 #e7b9f0 #da8ee8 #c95fde #b63dd1 #9c27b0 #9120b0 #7d1a9c #6f168a #5d1375 #ed89fc #e54afb #ca07ec #9f00c0

Compared to Material UIs

#f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #aa00ff

API

generateShades

Generates an array of TinyColor shades between two HSV values using optional curve functions. Defaults to ease-in/ease-out curves and 10 shades. For inputs the hue is a number from 0 - 360, saturation and value are both numbers from 0 - 100. generateShades will assume the shortest distance between the given hues; therefore, as seen below, 350 to 10 will only include shades of red.

export declare function generateShades({ hueStart, hueEnd, hueCurve, satStart, satEnd, satCurve, satRate, valStart, valEnd, valCurve, steps, format }: GenerateShadesOptions): Color[];

export interface GenerateShadesOptions {
  readonly hueStart: number
  readonly hueEnd: number
  readonly hueCurve?: (input: number) => number
  readonly satStart: number
  readonly satEnd: number
  readonly satCurve?: (input: number) => number
  readonly satRate?: number
  readonly valStart: number
  readonly valEnd: number
  readonly valCurve?: (input: number) => number
  readonly steps?: number // the number returned shades
  readonly format = null, // the desired output of the array, null defaults to Tinycolor instances
}

// given the reds hsv(350, 8, 100) and hsv(10, 85, 72)
const shades = generateShades({
  hueStart: 350,
  satStart: 8,
  valStart: 100,
  hueEnd: 10,
  satEnd: 85,
  valEnd: 72,
  format: 'hex',
})
// [ '#ffebee', '#ffbfc9', '#fc97a5', '#fa7585', '#f25764', '#ed424b', '#e33434', '#d63129', '#c73320', '#b8361c' ]

Or better visualized as;

#ffebee #ffbfc9 #fc97a5 #fa7585 #f25764 #ed424b #e33434 #d63129 #c73320 #b8361c

generateMaterialUIPalette

Generates a color palette based on material ui from two HSV values. Shades returned are TinyColor objects or strings, based on the format option, which defaults to 'hex'. Optional curve functions default to muiHueCurve, muiSatCurve, and muiValCurve. For inputs the hue is a number from 0 - 360, saturation and value are both numbers from 0 - 100.

export declare function generateMaterialUIPalette({ hueStart, hueEnd, hueCurve, satStart, satEnd, satCurve, satRate, valStart, valEnd, valCurve, format }: GenerateShadesOptions): MaterialUIPalette[];

export interface GenerateMaterialUIPaletteOptions {
  readonly hueStart: number
  readonly hueEnd: number
  readonly hueCurve?: (input: number) => number
  readonly satStart: number
  readonly satEnd: number
  readonly satCurve?: (input: number) => number
  readonly satRate?: number
  readonly valStart: number
  readonly valEnd: number
  readonly valCurve?: (input: number) => number
  readonly format: colorFormat
}

interface MaterialUIPalette {
  readonly 50: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 100: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 200: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 300: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 400: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 500: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 600: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 700: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 800: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly 900: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly A100: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly A200: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly A400: { color: TinyColor | string; contrastText: TinyColor | string }
  readonly A700: { color: TinyColor | string; contrastText: TinyColor | string }
}

// given the reds hsv(351, 8, 100) and hsv(0, 85, 72)
const shades = generateMaterialUIPalette({
  hueStart: 351,
  satStart: 8,
  valStart: 100,
  hueEnd: 0,
  satEnd: 85,
  valEnd: 72,
  format: 'hex',
})
// { '50': { color: '#ffebee', contrastText: '#000000' },
//   '100': { color: '#ffc4cc', contrastText: '#000000' },
//   '200': { color: '#fc97a3', contrastText: '#000000' },
//   '300': { color: '#f56977', contrastText: '#ffffff' },
//   '400': { color: '#ed424e', contrastText: '#ffffff' },
//   '500': { color: '#e63039', contrastText: '#ffffff' },
//   '600': { color: '#db252b', contrastText: '#ffffff' },
//   '700': { color: '#cf2124', contrastText: '#ffffff' },
//   '800': { color: '#c41d1d', contrastText: '#ffffff' },
//   '900': { color: '#b81c1c', contrastText: '#ffffff' },
//   A100: { color: '#ff8995', contrastText: '#000000' },
//   A200: { color: '#ff4555', contrastText: '#ffffff' },
//   A400: { color: '#ff030c', contrastText: '#ffffff' },
//   A700: { color: '#ff0d00', contrastText: '#ffffff' } }

Which is visualized as

#ffebee #ffc4cc #fc97a3 #f56977 #ed424e #e63039 #db252b #cf2124 #c41d1d #b81c1c #ff8995 #ff4555 #ff030c #ff0d00

Compared to MaterialUIs

#ffebee #ffcdd2 #ef9a9a #e57373 #ef5350 #f44336 #e53935 #d32f2f #c62828 #b71c1c #ff8a80 #ff5252 #ff1744 #d50000

coloringPalette

Generates a color palette based on material ui from a color input. Shades returned are TinyColor objects or strings, based on the format option, which defaults to 'hex'. Note: the original color input may not be present in the resulting palette generated.

export declare function coloringPalette(color: ColorInput, format: ColorFormat = 'hex'): TinyColor[];
// Given a Teal input
const shades = coloringPalette('#009688', 'hex')
// { '50': { color: '#dcf5f2', contrastText: '#000000' },
//   '100': { color: '#b0f5ee', contrastText: '#000000' },
//   '200': { color: '#7eede2', contrastText: '#000000' },
//   '300': { color: '#4ae0cf', contrastText: '#000000' },
//   '400': { color: '#21d1ba', contrastText: '#000000' },
//   '500': { color: '#0dbda2', contrastText: '#000000' },
//   '600': { color: '#05a88d', contrastText: '#ffffff' },
//   '700': { color: '#019177', contrastText: '#ffffff' },
//   '800': { color: '#007a64', contrastText: '#ffffff' },
//   '900': { color: '#006350', contrastText: '#ffffff' },
//   A100: { color: '#6ffff5', contrastText: '#000000' },
//   A200: { color: '#26fff1', contrastText: '#000000' },
//   A400: { color: '#00ecd5', contrastText: '#000000' },
//   A700: { color: '#00b29e', contrastText: '#000000' } }

Visualized below

#dcf5f2 #b0f5ee #7eede2 #4ae0cf #21d1ba #0dbda2 #05a88d #019177 #007a64 #006350 #6ffff5 #26fff1 #00ecd5 #00b29e

Compared to Material UIs colors

#e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5