random-color-array-generator v1.0.3

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

Tutorial

Link To Tutorial

Available CSS Classes

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>