Skip to content

Instantly share code, notes, and snippets.

@milroc

milroc/README.md

Forked from mbostock/.block
Last active December 20, 2015 09:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save milroc/6108554 to your computer and use it in GitHub Desktop.
Save milroc/6108554 to your computer and use it in GitHub Desktop.
Download ZIP
color brewer + HSL values
Raw
README.md

A quick visual reference to every ColorBrewer scale; colors by Cynthia Brewer. Available in CSS and JS format. Click on a palette to log the constituent colors in hexadecimal RGB to the console.

Fork added HSL values for a coworker

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #ccc;
/*width: 960px;*/
height: 500px;
}
.palette {
cursor: pointer;
display: inline-block;
vertical-align: bottom;
margin: 4px 0 4px 6px;
padding: 4px;
background: #fff;
border: solid 1px #aaa;
}
.swatch {
display: block;
vertical-align: middle;
width: 150px;
height: 22px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script>
var fNum = d3.format("0,.02f");
var formatNumber = function(d) {
return ((isNaN(fNum(d)))?fNum(0):fNum(d));
};
d3.select("body")
.selectAll(".palette")
.data(d3.entries(colorbrewer))
.enter().append("span")
.attr("class", "palette")
.attr("title", function(d) { return d.key; })
.on("click", function(d) { console.log(d3.values(d.value).map(JSON.stringify).join("\n")); })
.selectAll(".swatch")
.data(function(d) { return d.value[d3.keys(d.value).map(Number).sort(d3.descending)[0]]; })
.enter().append("span")
.attr("class", "swatch")
.style("background-color", function(d) { return d; })
.style("color", function(d) { return (d3.rgb(d).hsl().l > .5)?"#222":"#FFF"; })
.text(function(d) { d = d3.rgb(d).hsl(); console.log(d); return formatNumber(d.h) + " : " + formatNumber(d.s) + " : " + formatNumber(d.l); });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment