Gradient Generator

Generates Gradient Based num created

by rexonms

HTML

<div id="container">
  <div id="swatches-sample">  
   <!--  <h4>Swatch Sample</h4>
    <div id="swatches-start" class="swatch" style="background: rgb(17,17,21)">Start =><span id="start-color">{ r:17, g:17, b:21 }</span></div>
    <div id="swatches-end"  class="swatch" style="background: rgb(0,182,207)">End=> <span id="end-color">{ r:0, g:182, b:207 }</span></div> -->
  </div>
  <h4>Swatches</h4>
  <div id="swatches">
  </div>
</div>

CSS

body {
  font-family:Arial, Helvetica, sans-serif;
  color: #333;
}
h4 {
  margin-bottom: 5px;
}

#swatches {
 background: #fff;
 min-height:100px;
 min-width: 300px;
 display: flex;
 justify-content: flex-start;
}

.swatch {
  min-height: 50px;
  min-width: 50px;
  background: #ccc;
  margin-right: 1px;
  text-align:center;
  font-size: 12px;
  line-height: 12px;
  color: #fff;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

JavaScript

const steps = 10
const startColor = {r:10, g: 32, b: 80, a:1}//document.getElementById("start-color").innerHTML
const endColor = {r:6, g:74, b: 207, a:1}//document.getElementById("end-color").innerHTML
console.log('startColor', startColor)
console.log('endColor', endColor)

let gradinets = getGradients(startColor,endColor, steps )
console.log(gradinets)
displayGradients(gradinets)

/**
* Injects the gradinet watches to the UI 
*/
function displayGradients(gradinets) {
	let swatchesDiv = document.getElementById("swatches")
	gradinets.map(gradient => {
  	let swatch = document.createElement('div')
    swatch.className = 'swatch'
    swatch.style.background = `${gradient}`
    //console.log(gradient)
  	swatchesDiv.appendChild(swatch); 
  })
}

/**
 * Returns gradient based on the start and end rgba value
 * @param startColor { r:17, g:17, b:21, a: 1 }
 * @param endColor  { r:0, g:182, b:207, a: 1}
 * @param count    10
 * return ["rgba(17, 17, 21, 1)", ...."rgba(0, 182, 207, 1)"]
 */
function getGradients(startColor, endColor, count) {
    let increment = getColorIncrement(startColor, endColor, count)
    let gradients = calculateGradients(startColor, endColor, increment, count)
    return gradients
}

/**
 * Generates the gradient rgba value base on the change value
 */
function calculateGradients(startColor, endColor, increment, count) {
    let gradients = []
    for(var i = 0; i < count; i++) {
        let gradient = Object.keys(startColor).map((startKey) => {
            startColor[startKey] = startColor[startKey] + increment[startKey]
            let color = startColor[startKey]
            let cleanColor = getCleanColor(color)
            return cleanColor
        })
        gradients.push(`rgba(${gradient})`)
    }
    return gradients
}

/**
 * Cleans the color value so that it's valide
 * @param color
 * @returns {number}
 */
function getCleanColor(color) {
    color = color < 0 ? 0 : color
    color > 255 ? 255 : color
    return...