random-colors-palette

Javascript: random-colors-palette

• Usage
• License

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.

📜 License

This library is provided under the Apache License.