https://github.com/bustle/coloring-palette
🎨 🖌 A library to generate color palettes based on Material UI's approach to colors
https://github.com/bustle/coloring-palette
Last synced: over 1 year ago
JSON representation
🎨 🖌 A library to generate color palettes based on Material UI's approach to colors
- Host: GitHub
- URL: https://github.com/bustle/coloring-palette
- Owner: bustle
- License: apache-2.0
- Created: 2019-03-13T20:44:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-10T16:01:27.000Z (over 7 years ago)
- Last Synced: 2025-04-21T19:06:26.764Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 42 KB
- Stars: 20
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
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](https://github.com/lyft/coloralgorithm)
# Usage
```sh
npm install coloring-palette
```
```ts
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
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.
```ts
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;
## 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.
```ts
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
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.
```ts
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
Compared to Material UIs colors
