Skip to content

Instantly share code, notes, and snippets.

@emilyhorsman
Created March 8, 2015 20:34
Show Gist options
  • Save emilyhorsman/10c1d757c87f4ed78b66 to your computer and use it in GitHub Desktop.
Save emilyhorsman/10c1d757c87f4ed78b66 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colours</title>
<script type="text/javascript">
function populateColours(colours) {
var t = document.getElementById("colours");
for (var c in colours) {
var row = t.insertRow(-1);
var previewCell = row.insertCell(0);
previewCell.className = "preview";
previewCell.style.backgroundColor = "#" + c;
row.insertCell(1).innerHTML = "#" + c;
row.insertCell(2).innerHTML = colours[c];
}
}
</script>
<style type="text/css">
td { padding: 1em; }
td.preview {
width: 9em;
height: 0.5em;
}
</style>
</head>
<body>
<!--
http://www.color-blindness.com/color-name-hue/
This is awesome for colourblind individuals.
-->
<table id="colours">
</table>
<script type="text/javascript" src="colours.js"></script>
</body>
</html>
populateColours({
"f7a6ae": "Sundown (Red)",
"b8f7a6": "Pale Green (Green)",
"ab8f7a": "Sandrift (Brown)",
"43b571": "Medium Sea Green (Green)",
"f890ed": "Pale Magenta (Violet)",
"7c4876": "Cosmic (Violet)",
"b5a3e3": "Perano (Blue)"
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment