Package Exports

random-color-array-generator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (random-color-array-generator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Random Color Array Generator

This package enables you to generate random colors array of desired length in different forms (RGB,RGBA,HEX,HSL,HSLA).

Additional Components

This package also provides CSS classes for creating button

Usage

npm i random-color-array-generator

CDN

JSDELIVR

https://cdn.jsdelivr.net/npm/random-color-array-generator@1.0.3/ColorGeneratorCDN.min.js
https://cdn.jsdelivr.net/npm/random-color-array-generator@1.0.3/Button.min.css

UNPKG

https://unpkg.com/random-color-array-generator@1.0.3/ColorGeneratorCDN.min.js
https://unpkg.com/random-color-array-generator@1.0.3/Button.min.js

CDN Usage

<script src="https://cdn.jsdelivr.net/npm/random-color-array-generator@1.0.3/ColorGeneratorCDN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/random-color-array-generator@1.0.3/Button.min.css"></script>

Structure

•
└── randomArrayColorGenerator
    ├── ColorGenerator.min.js
    ├── ColorGenerator.js
    ├── Conversions.min.js
    ├── Conversions.js
    ├── ColorGeneratorCDN.js
    ├── ColorGeneratorCDN.min.js
    ├── Button.css
    ├── Button.min.css
    └── README.md

Usage

import ColorGenerator from "random-color-array-generator/ColorGenerator.min.js";
const colorGenerator = new ColorGenerator(sizeOfArray);
// Here in place of sizeOfArray provide length of array you want like 5
console.log(colorGenerator.generateRGB());
// ['rgb(67,154,213)','rgb(177,96,168)','rgb(230,115,4)','rgb(159,93,46)','rgb(113,177,166)']
console.log(colorGenerator.generateHEX());
// [ '#8f0e63', '#5caf51', '#46e331', '#e6d0d3', '#13b8ab' ]
console.log(colorGenerator.generateHSL());
// ['hsl(295,62.5%,52.9%)','hsl(40,53.9%,29.8%)','hsl(88,67%,34.5%)','hsl(322,79.5%,49.8%)','hsl(90,37.6%,66.7%)']
console.log(colorGenerator.generateHSV());
// ['176, 96, 77','63, 71, 61','74, 62, 86','60, 37, 95','232, 81, 98']
console.log(colorGenerator.generateRGBA());
// ['rgba(21,74,146,0.73)','rgba(107,250,202,0.30)','rgba(241,34,163,0.55)','rgba(114,95,192,0.52)','rgba(213,96,0,0.56)']
console.log(colorGenerator.generateHSLA());
// ['hsla(7, 41.7%, 70.4%, 0.89)','hsla(314, 97.1%, 41%, 0.73)','hsla(115, 75.2%, 42.7%, 0.79)','hsla(145, 47.4%, 41%, 0.36)','hsla(75, 65.4%, 40.8%, 0.46)']

Available Functions

Function Name	Description	Example Outputs
getCurrentSizeOfArray	Return current value which is set for array length	5
setSizeOfArray	Setter for changing value of array length
generateRGB	Return array of random rgb values	['rgb(67,154,213)','rgb(177,96,168)','rgb(230,115,4)','rgb(159,93,46)','rgb(113,177,166)']
generateHEX	Return array of random hex values	[ '#8f0e63', '#5caf51', '#46e331', '#e6d0d3', '#13b8ab' ]
generateHSL	Return array of random hsl values	['hsl(295,62.5%,52.9%)','hsl(40,53.9%,29.8%)','hsl(88,67%,34.5%)','hsl(322,79.5%,49.8%)','hsl(90,37.6%,66.7%)']
generateHSV	Return array of random hsv values	['176, 96, 77','63, 71, 61','74, 62, 86','60, 37, 95','232, 81, 98']
generateRGBA	Return array of random rgba values	['rgba(21,74,146,0.73)','rgba(107,250,202,0.30)','rgba(241,34,163,0.55)','rgba(114,95,192,0.52)','rgba(213,96,0,0.56)']
generateHSLA	Return array of random hsla values	['hsla(7, 41.7%, 70.4%, 0.89)','hsla(314, 97.1%, 41%, 0.73)','hsla(115, 75.2%, 42.7%, 0.79)','hsla(145, 47.4%, 41%, 0.36)','hsla(75, 65.4%, 40.8%, 0.46)']

Tutorial

Link To Tutorial

Available CSS Classes

Class Name	Functioning
custom-generate-button	Generate Base For Button
button-purple	Provides purple background to button
button-teal	Provides teal background to button
button-blue	Provides blue background to button
button-red	Provides red background to button
button-yellow	Provides yellow background to button
button-pink	Provides pink background to button

Button Example

<!-- Import StyleSheet -->
<script src="https://cdn.jsdelivr.net/npm/random-color-array-generator@1.0.2/ColorGeneratorCDN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/random-color-array-generator@1.0.2/Button.min.css"></script>
<script>
    const colorGenerator  = new ColorGenerator(5)
    console.log(colorGenerator.generateHEX()) //["#762775", "#f7f7c5", "#9f4cfa", "#94726d", "#2db4af"]
</script>
<button class="custom-generate-button button-pink" id="generate-color">This is custom generate button</button>