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
// { '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
Compared to Material UIs
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.
declare ; // given the reds hsv(350, 8, 100) and hsv(10, 85, 72)// [ '#ffebee', '#ffbfc9', '#fc97a5', '#fa7585', '#f25764', '#ed424b', '#e33434', '#d63129', '#c73320', '#b8361c' ]
Or better visualized as;
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.
declare ; // given the reds hsv(351, 8, 100) and hsv(0, 85, 72)// { '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
Compared to MaterialUIs
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.
declare ;// Given a Teal input// { '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
Compared to Material UIs colors