olivernn/colors.html

## colors.html
<body>
<script>

  var randInRange = function (min, max) {
      var range = max - min
      return min + (Math.random() * range)
  }

  var HSL = function (h, s, l) {
    this.h = h, this.s = s, this.l = l
  }

  HSL.prototype.toString = function () {
    return 'hsl(' + this.h + ',' + this.s + '%,' + this.l + '%)'
  }

  var GrayChord = function () {
  }

  GrayChord.prototype.generate = function () {
    var l = randInRange(10, 90)

    return new HSL (0, 0, l)
  }


  var MonoChord = function (primaryHue) {
    this.primaryHue = primaryHue
    this.hueVariation = 8
    this.hueRange = [
      this.primaryHue - this.hueVariation / 2,
      this.primaryHue + this.hueVariation / 2,
    ]
  }

  MonoChord.prototype.generate = function () {
    var h = randInRange.apply(null, this.hueRange),
        s = randInRange(10, 90),
        l = randInRange(10, 90)

    return new HSL (h, s, l)
  }

  var SplitComplementaryChord = function (primaryHue, splitAmount) {
    this.primaryHue = primaryHue
    this.hueVariation = 8

    var opposite = this.primaryHue + 180
    this.compliments = [opposite + splitAmount, opposite - splitAmount]

    this.hueRange = [
      this.primaryHue - this.hueVariation / 2,
      this.primaryHue + this.hueVariation / 2,
    ]
  }

  SplitComplementaryChord.prototype.generate = function () {

    if (Math.random() > 0.5) {
      var hueRange = this.hueRange
    } else {
      var hueRange = this.compliments
    }

    var h = randInRange.apply(null, hueRange),
        s = randInRange(20, 80),
        l = randInRange(20, 80)

    return new HSL (h, s, l)
  }

var categories = [
  {
    name: 'Holiday',
    numProjects: 2,
    colorFactory: new GrayChord
  },
  {
    name: 'Sick',
    numProjects: 2,
    colorFactory: new GrayChord
  },
  {
    name: 'Billed',
    numProjects: 10,
    colorFactory: new SplitComplementaryChord (200, 20)
  },
  {
    name: 'Unbilled',
    numProjects: 5,
    colorFactory: new SplitComplementaryChord (50, 20)
  },
  {
    name: 'Paused',
    numProjects: 5,
    colorFactory: new MonoChord (0)
  },
  {
    name: 'Misc',
    numProjects: 5,
    colorFactory: new MonoChord (100)
  },
  {
    name: 'No Project',
    numProjects: 2,
    colorFactory: new MonoChord (80)
  }
]


categories.forEach(function (category, idx) {
    var ul = document.createElement('ul'),
        h1 = document.createElement('h1')

    h1.textContent = category.name

    for (var i = 0; i < category.numProjects; i++) {
        li = document.createElement('li')
        li.style.backgroundColor = category.colorFactory.generate()
        ul.appendChild(li)
    }

    document.body.appendChild(h1)
    document.body.appendChild(ul)
})


var ul = document.createElement('ul'),
    h1 = document.createElement('h1')

for (var i = 0; i < 40; i++) {
  var categoryIdx = Math.floor(Math.random() * 7),
      category = categories[categoryIdx],
      li = document.createElement('li')

  li.style.backgroundColor = category.colorFactory.generate()
  li.classList.add(category.name.replace(' ', '-').toLowerCase())
  ul.appendChild(li)
}

h1.textContent = 'qwertyuio'
document.body.appendChild(h1)
document.body.appendChild(ul)

</script>
</body>
	<body>
	<script>

	var randInRange = function (min, max) {
	var range = max - min
	return min + (Math.random() * range)
	}

	var HSL = function (h, s, l) {
	this.h = h, this.s = s, this.l = l
	}

	HSL.prototype.toString = function () {
	return 'hsl(' + this.h + ',' + this.s + '%,' + this.l + '%)'
	}

	var GrayChord = function () {
	}

	GrayChord.prototype.generate = function () {
	var l = randInRange(10, 90)

	return new HSL (0, 0, l)
	}


	var MonoChord = function (primaryHue) {
	this.primaryHue = primaryHue
	this.hueVariation = 8
	this.hueRange = [
	this.primaryHue - this.hueVariation / 2,
	this.primaryHue + this.hueVariation / 2,
	]
	}

	MonoChord.prototype.generate = function () {
	var h = randInRange.apply(null, this.hueRange),
	s = randInRange(10, 90),
	l = randInRange(10, 90)

	return new HSL (h, s, l)
	}

	var SplitComplementaryChord = function (primaryHue, splitAmount) {
	this.primaryHue = primaryHue
	this.hueVariation = 8

	var opposite = this.primaryHue + 180
	this.compliments = [opposite + splitAmount, opposite - splitAmount]

	this.hueRange = [
	this.primaryHue - this.hueVariation / 2,
	this.primaryHue + this.hueVariation / 2,
	]
	}

	SplitComplementaryChord.prototype.generate = function () {

	if (Math.random() > 0.5) {
	var hueRange = this.hueRange
	} else {
	var hueRange = this.compliments
	}

	var h = randInRange.apply(null, hueRange),
	s = randInRange(20, 80),
	l = randInRange(20, 80)

	return new HSL (h, s, l)
	}

	var categories = [
	{
	name: 'Holiday',
	numProjects: 2,
	colorFactory: new GrayChord
	},
	{
	name: 'Sick',
	numProjects: 2,
	colorFactory: new GrayChord
	},
	{
	name: 'Billed',
	numProjects: 10,
	colorFactory: new SplitComplementaryChord (200, 20)
	},
	{
	name: 'Unbilled',
	numProjects: 5,
	colorFactory: new SplitComplementaryChord (50, 20)
	},
	{
	name: 'Paused',
	numProjects: 5,
	colorFactory: new MonoChord (0)
	},
	{
	name: 'Misc',
	numProjects: 5,
	colorFactory: new MonoChord (100)
	},
	{
	name: 'No Project',
	numProjects: 2,
	colorFactory: new MonoChord (80)
	}
	]


	categories.forEach(function (category, idx) {
	var ul = document.createElement('ul'),
	h1 = document.createElement('h1')

	h1.textContent = category.name

	for (var i = 0; i < category.numProjects; i++) {
	li = document.createElement('li')
	li.style.backgroundColor = category.colorFactory.generate()
	ul.appendChild(li)
	}

	document.body.appendChild(h1)
	document.body.appendChild(ul)
	})


	var ul = document.createElement('ul'),
	h1 = document.createElement('h1')

	for (var i = 0; i < 40; i++) {
	var categoryIdx = Math.floor(Math.random() * 7),
	category = categories[categoryIdx],
	li = document.createElement('li')

	li.style.backgroundColor = category.colorFactory.generate()
	li.classList.add(category.name.replace(' ', '-').toLowerCase())
	ul.appendChild(li)
	}

	h1.textContent = 'qwertyuio'
	document.body.appendChild(h1)
	document.body.appendChild(ul)

	</script>
	</body>