Skip to content

Instantly share code, notes, and snippets.

@mjfoster83

mjfoster83/index.html

Last active August 29, 2015 14:02
Show Gist options
  • Save mjfoster83/f69272039c11ed0b7213 to your computer and use it in GitHub Desktop.
Save mjfoster83/f69272039c11ed0b7213 to your computer and use it in GitHub Desktop.
Download ZIP
Color Starter - The Web Safe Palette
Raw
index.html
<!doctype html>
<html>
<head>
<title>Color Starter - A Starter Palette</title>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript">
function draw(data) {
"use strict";
var w=960, h=500;
var pad = {left: 0, right: 0, top: 0, bottom: 0};
var svg = d3.select("body")
.append("svg")
.attr("height", h)
.attr("width", w);
svg.append("rect")
.attr("x", pad.left).attr("y",pad.top)
.attr("width", w-(pad.left+pad.right))
.attr("height",h-(pad.top+pad.bottom))
.attr("fill", "rgb(255,255,255)");
var xScale = d3.scale.linear().domain([1, 17]).range([pad.left, w-pad.right]);
var yScale = d3.scale.linear().domain([1, 16]).range([h-pad.bottom, pad.top]);
var circles = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d) { return xScale(d.X); })
.attr("y", function(d) { return yScale(d.Y); })
.attr("width", 57.6)
.attr("height", 30)
.attr("ry", 7)
.attr("rx", 7)
.attr("fill", function(d) { return [d.Hex]; })
var text = svgContainer.selectAll("text")
.data(circleData)
.enter()
.append("text");
}
</script>
</head>
<body>
<script type="text/javascript">
d3.json("websafe.json", draw);
</script>
</body>
</html>
Raw
websafe.json
[{"X":1,"Y":16,"Hex":"#FFFFFF"},
{"X":2,"Y":16,"Hex":"#CCCCCC"},
{"X":3,"Y":16,"Hex":"#999999"},
{"X":4,"Y":16,"Hex":"#666666"},
{"X":5,"Y":16,"Hex":"#333333"},
{"X":6,"Y":16,"Hex":"#000000"},
{"X":7,"Y":16,"Hex":"#FFCC00"},
{"X":8,"Y":16,"Hex":"#FF9900"},
{"X":9,"Y":16,"Hex":"#FF6600"},
{"X":10,"Y":16,"Hex":"#FF3300"},
{"X":1,"Y":15,"Hex":"#99CC00"},
{"X":6,"Y":15,"Hex":"#CC9900"},
{"X":7,"Y":15,"Hex":"#FFCC33"},
{"X":8,"Y":15,"Hex":"#FFCC66"},
{"X":9,"Y":15,"Hex":"#FF9966"},
{"X":10,"Y":15,"Hex":"#FF6633"},
{"X":11,"Y":15,"Hex":"#CC3300"},
{"X":16,"Y":15,"Hex":"#CC0033"},
{"X":1,"Y":14,"Hex":"#CCFF00"},
{"X":2,"Y":14,"Hex":"#CCFF33"},
{"X":3,"Y":14,"Hex":"#333300"},
{"X":4,"Y":14,"Hex":"#666600"},
{"X":5,"Y":14,"Hex":"#999900"},
{"X":6,"Y":14,"Hex":"#CCCC00"},
{"X":7,"Y":14,"Hex":"#FFFF00"},
{"X":8,"Y":14,"Hex":"#CC9933"},
{"X":9,"Y":14,"Hex":"#CC6633"},
{"X":10,"Y":14,"Hex":"#330000"},
{"X":11,"Y":14,"Hex":"#660000"},
{"X":12,"Y":14,"Hex":"#990000"},
{"X":13,"Y":14,"Hex":"#CC0000"},
{"X":14,"Y":14,"Hex":"#FF0000"},
{"X":15,"Y":14,"Hex":"#FF3366"},
{"X":16,"Y":14,"Hex":"#FF0033"},
{"X":1,"Y":13,"Hex":"#99FF00"},
{"X":2,"Y":13,"Hex":"#CCFF66"},
{"X":3,"Y":13,"Hex":"#99CC33"},
{"X":4,"Y":13,"Hex":"#666633"},
{"X":5,"Y":13,"Hex":"#999933"},
{"X":6,"Y":13,"Hex":"#CCCC33"},
{"X":7,"Y":13,"Hex":"#FFFF33"},
{"X":8,"Y":13,"Hex":"#996600"},
{"X":9,"Y":13,"Hex":"#993300"},
{"X":10,"Y":13,"Hex":"#663333"},
{"X":11,"Y":13,"Hex":"#993333"},
{"X":12,"Y":13,"Hex":"#CC3333"},
{"X":13,"Y":13,"Hex":"#FF3333"},
{"X":14,"Y":13,"Hex":"#CC3366"},
{"X":15,"Y":13,"Hex":"#FF6699"},
{"X":16,"Y":13,"Hex":"#FF0066"},
{"X":1,"Y":12,"Hex":"#66FF00"},
{"X":2,"Y":12,"Hex":"#99FF66"},
{"X":3,"Y":12,"Hex":"#66CC33"},
{"X":4,"Y":12,"Hex":"#669900"},
{"X":5,"Y":12,"Hex":"#999966"},
{"X":6,"Y":12,"Hex":"#CCCC66"},
{"X":7,"Y":12,"Hex":"#FFFF66"},
{"X":8,"Y":12,"Hex":"#996633"},
{"X":9,"Y":12,"Hex":"#663300"},
{"X":10,"Y":12,"Hex":"#996666"},
{"X":11,"Y":12,"Hex":"#CC6666"},
{"X":12,"Y":12,"Hex":"#FF6666"},
{"X":13,"Y":12,"Hex":"#990033"},
{"X":14,"Y":12,"Hex":"#CC3399"},
{"X":15,"Y":12,"Hex":"#FF66CC"},
{"X":16,"Y":12,"Hex":"#FF0099"},
{"X":1,"Y":11,"Hex":"#33FF00"},
{"X":2,"Y":11,"Hex":"#66FF33"},
{"X":3,"Y":11,"Hex":"#339900"},
{"X":4,"Y":11,"Hex":"#66CC00"},
{"X":5,"Y":11,"Hex":"#99FF33"},
{"X":6,"Y":11,"Hex":"#CCCC99"},
{"X":7,"Y":11,"Hex":"#FFFF99"},
{"X":8,"Y":11,"Hex":"#CC9966"},
{"X":9,"Y":11,"Hex":"#CC6600"},
{"X":10,"Y":11,"Hex":"#CC9999"},
{"X":11,"Y":11,"Hex":"#FF9999"},
{"X":12,"Y":11,"Hex":"#FF3399"},
{"X":13,"Y":11,"Hex":"#CC0066"},
{"X":14,"Y":11,"Hex":"#990066"},
{"X":15,"Y":11,"Hex":"#FF33CC"},
{"X":16,"Y":11,"Hex":"#FF00CC"},
{"X":1,"Y":10,"Hex":"#00CC00"},
{"X":2,"Y":10,"Hex":"#33CC00"},
{"X":3,"Y":10,"Hex":"#336600"},
{"X":4,"Y":10,"Hex":"#669933"},
{"X":5,"Y":10,"Hex":"#99CC66"},
{"X":6,"Y":10,"Hex":"#CCFF99"},
{"X":7,"Y":10,"Hex":"#FFFFCC"},
{"X":8,"Y":10,"Hex":"#FFCC99"},
{"X":9,"Y":10,"Hex":"#FF9933"},
{"X":10,"Y":10,"Hex":"#FFCCCC"},
{"X":11,"Y":10,"Hex":"#FF99CC"},
{"X":12,"Y":10,"Hex":"#CC6699"},
{"X":13,"Y":10,"Hex":"#993366"},
{"X":14,"Y":10,"Hex":"#660033"},
{"X":15,"Y":10,"Hex":"#CC0099"},
{"X":16,"Y":10,"Hex":"#330033"},
{"X":1,"Y":9,"Hex":"#33CC33"},
{"X":2,"Y":9,"Hex":"#66CC66"},
{"X":3,"Y":9,"Hex":"#00FF00"},
{"X":4,"Y":9,"Hex":"#33FF33"},
{"X":5,"Y":9,"Hex":"#66FF66"},
{"X":6,"Y":9,"Hex":"#99FF99"},
{"X":7,"Y":9,"Hex":"#CCFFCC"},
{"X":11,"Y":9,"Hex":"#CC99CC"},
{"X":12,"Y":9,"Hex":"#996699"},
{"X":13,"Y":9,"Hex":"#993399"},
{"X":14,"Y":9,"Hex":"#990099"},
{"X":15,"Y":9,"Hex":"#663366"},
{"X":16,"Y":9,"Hex":"#660066"},
{"X":1,"Y":8,"Hex":"#006000"},
{"X":2,"Y":8,"Hex":"#336633"},
{"X":3,"Y":8,"Hex":"#009900"},
{"X":4,"Y":8,"Hex":"#339933"},
{"X":5,"Y":8,"Hex":"#669966"},
{"X":6,"Y":8,"Hex":"#99CC99"},
{"X":10,"Y":8,"Hex":"#FFCCFF"},
{"X":11,"Y":8,"Hex":"#FF99FF"},
{"X":12,"Y":8,"Hex":"#FF66FF"},
{"X":13,"Y":8,"Hex":"#FF33FF"},
{"X":14,"Y":8,"Hex":"#FF00FF"},
{"X":15,"Y":8,"Hex":"#CC66CC"},
{"X":16,"Y":8,"Hex":"#CC33CC"},
{"X":1,"Y":7,"Hex":"#003300"},
{"X":2,"Y":7,"Hex":"#00CC33"},
{"X":3,"Y":7,"Hex":"#006633"},
{"X":4,"Y":7,"Hex":"#339966"},
{"X":5,"Y":7,"Hex":"#66CC99"},
{"X":6,"Y":7,"Hex":"#99FFCC"},
{"X":7,"Y":7,"Hex":"#CCFFFF"},
{"X":8,"Y":7,"Hex":"#3399FF"},
{"X":9,"Y":7,"Hex":"#99CCFF"},
{"X":10,"Y":7,"Hex":"#CCCCFF"},
{"X":11,"Y":7,"Hex":"#CC99FF"},
{"X":12,"Y":7,"Hex":"#9966CC"},
{"X":13,"Y":7,"Hex":"#663399"},
{"X":14,"Y":7,"Hex":"#330066"},
{"X":15,"Y":7,"Hex":"#9900CC"},
{"X":16,"Y":7,"Hex":"#CC00CC"},
{"X":1,"Y":6,"Hex":"#00FF33"},
{"X":2,"Y":6,"Hex":"#33FF66"},
{"X":3,"Y":6,"Hex":"#009933"},
{"X":4,"Y":6,"Hex":"#00CC66"},
{"X":5,"Y":6,"Hex":"#33FF99"},
{"X":6,"Y":6,"Hex":"#99FFFF"},
{"X":7,"Y":6,"Hex":"#99CCCC"},
{"X":8,"Y":6,"Hex":"#0066CC"},
{"X":9,"Y":6,"Hex":"#6699CC"},
{"X":10,"Y":6,"Hex":"#9999FF"},
{"X":11,"Y":6,"Hex":"#9999CC"},
{"X":12,"Y":6,"Hex":"#9933FF"},
{"X":13,"Y":6,"Hex":"#6600CC"},
{"X":14,"Y":6,"Hex":"#660099"},
{"X":15,"Y":6,"Hex":"#CC33FF"},
{"X":16,"Y":6,"Hex":"#CC00FF"},
{"X":1,"Y":5,"Hex":"#00FF66"},
{"X":2,"Y":5,"Hex":"#66FF99"},
{"X":3,"Y":5,"Hex":"#33CC66"},
{"X":4,"Y":5,"Hex":"#009966"},
{"X":5,"Y":5,"Hex":"#66FFFF"},
{"X":6,"Y":5,"Hex":"#66CCCC"},
{"X":7,"Y":5,"Hex":"#669999"},
{"X":8,"Y":5,"Hex":"#003366"},
{"X":9,"Y":5,"Hex":"#336699"},
{"X":10,"Y":5,"Hex":"#6666FF"},
{"X":11,"Y":5,"Hex":"#6666CC"},
{"X":12,"Y":5,"Hex":"#666699"},
{"X":13,"Y":5,"Hex":"#330099"},
{"X":14,"Y":5,"Hex":"#9933CC"},
{"X":15,"Y":5,"Hex":"#CC66FF"},
{"X":16,"Y":5,"Hex":"#9900FF"},
{"X":1,"Y":4,"Hex":"#00FF99"},
{"X":2,"Y":4,"Hex":"#66FFCC"},
{"X":3,"Y":4,"Hex":"#33CC99"},
{"X":4,"Y":4,"Hex":"#33FFFF"},
{"X":5,"Y":4,"Hex":"#33CCCC"},
{"X":6,"Y":4,"Hex":"#339999"},
{"X":7,"Y":4,"Hex":"#336666"},
{"X":8,"Y":4,"Hex":"#006699"},
{"X":9,"Y":4,"Hex":"#003399"},
{"X":10,"Y":4,"Hex":"#3333FF"},
{"X":11,"Y":4,"Hex":"#3333CC"},
{"X":12,"Y":4,"Hex":"#333399"},
{"X":13,"Y":4,"Hex":"#333366"},
{"X":14,"Y":4,"Hex":"#6633CC"},
{"X":15,"Y":4,"Hex":"#9966FF"},
{"X":16,"Y":4,"Hex":"#6600FF"},
{"X":1,"Y":3,"Hex":"#00FFCC"},
{"X":2,"Y":3,"Hex":"#33FFCC"},
{"X":3,"Y":3,"Hex":"#00FFFF"},
{"X":4,"Y":3,"Hex":"#00CCCC"},
{"X":5,"Y":3,"Hex":"#009999"},
{"X":6,"Y":3,"Hex":"#006666"},
{"X":7,"Y":3,"Hex":"#003333"},
{"X":8,"Y":3,"Hex":"#3399CC"},
{"X":9,"Y":3,"Hex":"#3366CC"},
{"X":10,"Y":3,"Hex":"#0000FF"},
{"X":11,"Y":3,"Hex":"#0000CC"},
{"X":12,"Y":3,"Hex":"#000099"},
{"X":13,"Y":3,"Hex":"#000066"},
{"X":14,"Y":3,"Hex":"#000033"},
{"X":15,"Y":3,"Hex":"#6633FF"},
{"X":16,"Y":3,"Hex":"#3300FF"},
{"X":1,"Y":2,"Hex":"#00CC99"},
{"X":6,"Y":2,"Hex":"#0099CC"},
{"X":7,"Y":2,"Hex":"#33CCFF"},
{"X":8,"Y":2,"Hex":"#66CCFF"},
{"X":9,"Y":2,"Hex":"#6699FF"},
{"X":10,"Y":2,"Hex":"#3366FF"},
{"X":11,"Y":2,"Hex":"#0033CC"},
{"X":16,"Y":2,"Hex":"#3300CC"},
{"X":7,"Y":1,"Hex":"#00CCFF"},
{"X":8,"Y":1,"Hex":"#0099FF"},
{"X":9,"Y":1,"Hex":"#0066FF"},
{"X":10,"Y":1,"Hex":"#0033FF"}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment