elplatt/index.html

## index.html
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <button id="button">Click me!</button>
    <div id="new-color"></div>
    <div id="all-colors"></div>
  </body>
</html>

## script.js
var phi = (1 + Math.sqrt(5)) / 2;
var base = 0.4;
var span = 0.5;

var N = 16;
var H = 5;
var L = Math.ceil(N / H)

var cell;
var level;
var perLevel;

var newColor = document.getElementById("new-color");
var allColors = document.getElementById("all-colors");
var colors = 0;

var addColor = function () {
  var i = colors;
  level = (i - i % H) / H
  l = 1.0 - level / L
	t = (i+1) * phi - Math.floor((i+1) * phi);
  console.log(t);
  y = Math.round(255 * l * (base + span * t));
  b = Math.round(255 * l * (base + span * (1 - t)));
  cell = document.createElement('div');
  var c = "rgb(" + y + "," + y + "," + b + ")";
  cell.style = "background-color:" + c + ";";
  allColors.appendChild(cell);
  newColor.style = "background-color:" + c + ";";
  colors += 1;
  cell.innerHTML = colors;
}

document.getElementById("button").onclick = addColor;

## style.css
#new-color {
  height: 40px;
}
#all-colors div {
  display:inline-block;
  width:40px;
  height:40px;
}
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<button id="button">Click me!</button>
	<div id="new-color"></div>
	<div id="all-colors"></div>
	</body>
	</html>
	var phi = (1 + Math.sqrt(5)) / 2;
	var base = 0.4;
	var span = 0.5;

	var N = 16;
	var H = 5;
	var L = Math.ceil(N / H)

	var cell;
	var level;
	var perLevel;

	var newColor = document.getElementById("new-color");
	var allColors = document.getElementById("all-colors");
	var colors = 0;

	var addColor = function () {
	var i = colors;
	level = (i - i % H) / H
	l = 1.0 - level / L
	t = (i+1) * phi - Math.floor((i+1) * phi);
	console.log(t);
	y = Math.round(255 * l * (base + span * t));
	b = Math.round(255 * l * (base + span * (1 - t)));
	cell = document.createElement('div');
	var c = "rgb(" + y + "," + y + "," + b + ")";
	cell.style = "background-color:" + c + ";";
	allColors.appendChild(cell);
	newColor.style = "background-color:" + c + ";";
	colors += 1;
	cell.innerHTML = colors;
	}

	document.getElementById("button").onclick = addColor;
	#new-color {
	height: 40px;
	}
	#all-colors div {
	display:inline-block;
	width:40px;
	height:40px;
	}