Random-colors-palette NPM

Javascript: random-colors-palette

It allows you to generate random colors from a set of palettes defined by material io.

💻 Usage

import { uniqColor, randomColor, colorsList, huesList, shadesList, formatList } from 'random-colors-palette';

uniqColor()

/*
text = new Date()
*/

uniqColor({ format: "hex" });

/*
text = new Date()
*/

uniqColor({ text: "", format: "hsl" });

/*
text = new Date()
*/

uniqColor({ text: "Hello world!", format: "rgb" });

/*
[
    {
        "hue": "cyan",
        "shade": "100",
        "value": "rgb(178, 235, 242)"
    }
]
*/

uniqColor({ text: ["Hello", "wold", "!"], format: "hex" });

/*
[
    {
        "hue": "orange",
        "shade": "600",
        "value": "#fb8c00"
    },
    {
        "hue": "lightBlue",
        "shade": "A400",
        "value": "#00b0ff"
    },
    {
        "hue": "deepOrange",
        "shade": "700",
        "value": "#e64a19"
    }
]
 */

randomColor({
 number: 3,
 hues: ['red', 'blue', 'lightBlue', 'cyan'],
 shades: ['100', '300', '400', '500', '700'],
 excludeHues: ['red'],
 excludeShades: ['400'],
 repeat: false,
 numberColorGroup: 1,
 format: 'hex',
 typeObj: true
});

/*
{
    "combination": 12,
    "color": [
        {
            "hue": "cyan",
            "shade": "300",
            "value": "#4dd0e1"
        },
        {
            "hue": "blue",
            "shade": "100",
            "value": "#bbdefb"
        },
        {
            "hue": "lightBlue",
            "shade": "300",
            "value": "#4fc3f7"
        }
    ],
    "numberGroup": 1
}
*/

randomColor({
 number: 3,
 hues: ['red', 'blue', 'lightBlue', 'cyan'],
 shades: ['100', '300', '400', '500', '700'],
 excludeHues: ['red'],
 excludeShades: ['400'],
 repeat: false,
 numberColorGroup: 2,
 format: 'hls',
 typeObj: true
});

/*
{
    "combination": 12,
    "color": [
        [
            {
                "hue": "cyan",
                "shade": "100",
                "value": "hsl(187, 71.1%, 82.4%)"
            },
            {
                "hue": "lightBlue",
                "shade": "700",
                "value": "hsl(201, 98.1%, 41.4%)"
            }
        ],
        [
            {
                "hue": "lightBlue",
                "shade": "300",
                "value": "hsl(199, 91.3%, 63.9%)"
            }
        ]
    ],
    "numberGroup": 2
}
*/

randomColor({
 number: 3,
 hues: ['red', 'blue', 'lightBlue', 'cyan'],
 shades: ['100', '300', '400', '500', '700'],
 excludeHues: ['red'],
 excludeShades: ['400'],
 repeat: false,
 numberColorGroup: 1,
 format: 'rgb',
 typeObj: false
});

/*
{
    "combination": 12,
    "color": [
        "rgb(77, 208, 225)",
        "rgb(179, 229, 252)",
        "rgb(187, 222, 251)"
    ],
    "numberGroup": 1
}
*/


/* huesList 
[
    'red',
    'pink',
    'purple',
    'deepPurple',
    'indigo',
    'blue',
    'lightBlue',
    'cyan',
    'teal',
    'green',
    'lightGreen',
    'lime',
    'yellow',
    'amber',
    'orange',
    'deepOrange',
    'brown',
    'grey',
    'blueGrey'
]
*/

/* shadesList
[
    '50',
    '100',
    '200',
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '900',
    'A100',
    'A200',
    'A400',
    'A700'
]
*/

/* formatList 
['hex', 'rgb', 'hsl']
*/

💡 Props

uniqColor

Prop	Type	Default	Note
`text`	`string/array`	`new Date()`	The text you want to pass to generate the color.
`format`	`string`	`hex`	`hex, rgb, hsl`
`textContrast`	`bool`	`true`	If true, it returns the contrast color to use for the texts.
`typeObj`	`bool`	`true`	If you want the returned value is only an object or the color value.

randomColor

Prop	Type	Default	Note
`number`	`number`	`1`	Numbers of colors to generate.
`hues`	`array`	`huesList`	The hues you want to use to generate the colors.
`shades`	`array`	`shadesList`	The shades that you want to use to generate the colors.
`excludeHues`	`array`	`[]`	The hues you don't want to use to generate colors.
`excludeShades`	`array`	`[]`	The shades that you don't want to use to generate the colors.
`repeat`	`bool`	`false`	If you want the colors repeated.
`numberColorGroup`	`number`	`1`	If you want the colors to be grouped by n.
`format`	`string`	`hex`	`hex, rgb, hsl`
`textContrast`	`bool`	`true`	If true, it returns the contrast color to use for the texts.
`typeObj`	`bool`	`true`	If you want the returned value is only an object or the color value.