# Random Color Array Generator

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

[![](https://data.jsdelivr.com/v1/package/npm/random-color-array-generator/badge)](https://www.jsdelivr.com/package/npm/random-color-array-generator)

# Additional Components

This package also provides CSS classes for creating button

# Usage

```console
npm i random-color-array-generator
```

# CDN

## JSDELIVR

```js
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

```js
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

```html
<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

```js
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](https://youtu.be/FLf1aG4MnmY)

# 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

```HTML
<!-- 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>
```