Skip to content

Instantly share code, notes, and snippets.



Forked from jrideout/
Last active Aug 29, 2015
What would you like to do?
ColorBrewer scale page for

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.

<!DOCTYPE html>
<meta charset="utf-8">
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: 37px;
height: 22px;
<script src=""></script>
<script src=""></script>
.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")); })
.data(function(d) { return d.value[d3.keys(d.value).map(Number).sort(d3.descending)[0]]; })
.attr("class", "swatch")
.style("background-color", function(d) { return d; });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment