Skip to content

Instantly share code, notes, and snippets.

@jcaxmacher
Forked from mbostock/.block
Last active September 2, 2015 00:17
Show Gist options
  • Save jcaxmacher/952492c58998d1272d69 to your computer and use it in GitHub Desktop.
Save jcaxmacher/952492c58998d1272d69 to your computer and use it in GitHub Desktop.
Every ColorBrewer Scale

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.

var colorbrewer=["#f7fcb9", "#7fcdbb", "#ccece6", "#ece7f2", "#9ebcda", "#d4b9da", "#ffeda0", "#fec44f", "#c6dbef", "#fee6ce", "#fc9272", "#d9f0a3", "#e0f3db", "#99d8c9", "#d0d1e6", "#fde0dd", "#c994c7", "#fed976", "#efedf5", "#9ecae1", "#fdd0a2", "#f0f0f0", "#addd8e", "#ccebc5", "#ece2f0", "#a6bddb", "#fcc5c0", "#fee8c8", "#feb24c", "#dadaeb", "#e5f5e0", "#fdae6b", "#d9d9d9", "#edf8b1", "#a8ddb5", "#d0d1e6", "#e0ecf4", "#fa9fb5", "#fdd49e", "#fff7bc", "#bcbddc", "#c7e9c0", "#fee0d2", "#bdbdbd", "#c7e9b4", "#e5f5f9", "#a6bddb", "#bfd3e6", "#e7e1ef", "#fdbb84", "#fee391", "#deebf7", "#a1d99b", "#fcbba1"];
<!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: 37px;
height: 22px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="colorbrewer.min.js"></script>
<script>
d3.select("body")
.selectAll(".palette")
.append('span')
.attr('title', 'sorted for fun')
.selectAll(".swatch")
.data(colorbrewer)
.enter().append("span")
.attr("class", "swatch")
.style("background-color", function(d) { return d; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment