Color Harmonies

by Arjan Haverkamp

CSS

.sample {
  height: 30px;
}
.sample > div {
  width: 30px;
  height: 30px;
  display: inline-block;
}

JavaScript

function parseHSL(str) {
  var hsl, h, s, l
  hsl = str.replace(/[^\d,]/g, '').split(',')   // strip non digits ('%')  
  h = Number(hsl[0])                            // convert to number
  s = Number(hsl[1])
  l = Number(hsl[2])
  return [h, s, l]                              // return parts
}


function harmonize(color, start, end, interval) {
    const colors = [color]
    const [h, s, l] = parseHSL(color)

    for(let i = start; i <= end; i += interval) {
        const h1 = (h + i) % 360
        const c1 = `hsl(${h1}, ${s}%, ${l}%)`
        colors.push(c1)
    }

    return colors
}

//const rp = 'hsl(270, 49%, 40%)'
const rp = 'hsl(240,100%,50%)' // blue

const schemes = {
	complement: harmonize(rp, 180, 180, 1),
	split: harmonize(rp, 150, 210, 60),
	triad: harmonize(rp, 120, 240, 120),
	tetrad: harmonize(rp, 90, 270, 90),
	analogous: harmonize(rp, 30, 90, 30)
}

for (let scheme in schemes) {
   const div = document.createElement('div')
   div.className = 'sample';
   document.body.append(div)
   
   for (let color of schemes[scheme]) {
      const box = document.createElement('div');
      div.append(box)
      box.style.backgroundColor = color
   }
}