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 adds the ColorBrewer name as a label and the Spacegray 80s Dark palette.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #ccc;
width: 960px;
height: 500px;
}
.scale-color{
font-size: 10px;
font-family: Helvetica, sans-serif;
}
.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: 37px;
height: 20px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/colorbrewer.v1.min.js"></script>
<script>
colorbrewer.spacegray80s ={15: ['#2d2d2d','#393939','#515151','#6699cc','#66cccc','#747369','#99cc99','#a09f93','#cc99cc','#d27b53','#d3d0c8','#f2777a','#f2f0ec','#f99157','#ffcc66']};
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")); })
.append("span")
.attr("class", "scale-color")
.html(function(d){ return d.key })
.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; });
</script>