Pastel color generation

by Kieran Dang

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.js" crossorigin="anonymous"></script>

<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>
<div class="color" style="height: 100px; width: calc(10% - 5px); display: inline-block;"></div>

CSS

.color {
  cursor: pointer;
}

JavaScript

/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function randomNumber(min, max) {
  const r = Math.random() * (max - min + 1) + min;
  if (r > 100) {
    return 100;
  }

  return r;
}

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;

const pastelize = () => {
  // HSV if S = 25% and V = 100% -> HSL S = 100% and L = 87.5%
  const items = $('div');
  const copy = new ClipboardJS('.color');

  items.each((index, item) => {
    const hue = Math.floor(Math.random() * 360);
    const saturation = randomNumber(95, 100);
    const lightness = randomNumber(85, 90);

    const pastel = 'hsl(' + hue + ', ' + saturation.toFixed(2) + '%, ' + lightness.toFixed(2) + '%)';
    $(item).css('background-color', pastel);   
    $(item).click(function() {
			$(this).attr("data-clipboard-text", rgb2hex($(this).css('background-color')));
    });
  })
};

pastelize();