Skip to content

Instantly share code, notes, and snippets.

@redblobgames
Created September 12, 2017 16:18
Show Gist options
  • Save redblobgames/086a8bac38cb8412109d288f5c920892 to your computer and use it in GitHub Desktop.
Save redblobgames/086a8bac38cb8412109d288f5c920892 to your computer and use it in GitHub Desktop.
HTML Color Names (Relative Lightness, linear color space)
license: mit
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
color
Pink
LightPink
HotPink
DeepPink
PaleVioletRed
MediumVioletRed
LightSalmon
Salmon
DarkSalmon
LightCoral
IndianRed
Crimson
FireBrick
DarkRed
Red
OrangeRed
Tomato
Coral
DarkOrange
Orange
Yellow
Yellow
LightYellow
LemonChiffon
LightGoldenrodYellow
PapayaWhip
Moccasin
PeachPuff
PaleGoldenrod
Khaki
DarkKhaki
Gold
Cornsilk
BlanchedAlmond
Bisque
NavajoWhite
Wheat
BurlyWood
Tan
RosyBrown
SandyBrown
Goldenrod
DarkGoldenrod
Peru
Chocolate
SaddleBrown
Sienna
Brown
Maroon
DarkOliveGreen
Olive
OliveDrab
YellowGreen
LimeGreen
Lime
LawnGreen
Chartreuse
GreenYellow
SpringGreen
MediumSpringGreen
LightGreen
PaleGreen
DarkSeaGreen
MediumSeaGreen
SeaGreen
ForestGreen
Green
DarkGreen
MediumAquamarine
Aqua
Cyan
LightCyan
PaleTurquoise
Aquamarine
Turquoise
MediumTurquoise
DarkTurquoise
LightSeaGreen
CadetBlue
DarkCyan
Teal
LightSteelBlue
PowderBlue
LightBlue
SkyBlue
LightSkyBlue
DeepSkyBlue
DodgerBlue
CornflowerBlue
SteelBlue
RoyalBlue
Blue
MediumBlue
DarkBlue
Navy
MidnightBlue
Lavender
Thistle
Plum
Violet
Orchid
Fuchsia
Magenta
MediumOrchid
MediumPurple
BlueViolet
DarkViolet
DarkOrchid
DarkMagenta
Purple
Indigo
DarkSlateBlue
RebeccaPurple
SlateBlue
MediumSlateBlue
White
Snow
Honeydew
MintCream
Azure
AliceBlue
GhostWhite
WhiteSmoke
Seashell
Beige
OldLace
FloralWhite
Ivory
AntiqueWhite
Linen
LavenderBlush
MistyRose
Gainsboro
LightGrey
Silver
DarkGray
Gray
DimGray
LightSlateGray
SlateGray
DarkSlateGray
Black
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
padding: 10px;
}
section {
clear: both;
}
.color {
float: left;
padding: 3px 5px;
margin: 2px 5px;
font-family: Helvetica;
border-radius: 3px
}
</style>
</head>
<body>
<label>Threshold: <input type="range" min="0" max="1" value="0.5" step="0.01" oninput="redraw(this.value)"></label>
<section></section>
<script>
function gammaToLinear(x) {
x /= 255;
if (x <= 0.03928) {
return x / 12.92;
} else {
return ((x + 0.055) / 1.055)**2.4;
}
}
function redraw(threshold) {
console.log(threshold)
cdivs.style({
"background-color": function(d) { return d.color },
color: function(d) {
var rgb = d3.rgb(d.color);
var L2 = 0.2126 * gammaToLinear(rgb.r) + 0.7152 * gammaToLinear(rgb.g) + 0.0722 * gammaToLinear(rgb.b)
if(L2 >= threshold) {
return "black"
} else {
return "white"
}
}
})
}
var display = d3.select("section");
var cdivs;
d3.csv("colors.csv", function(err, colors) {
cdivs = display.selectAll("div.color")
.data(colors)
cdivs.enter()
.append("div").classed("color", true);
cdivs.text(function(d) {
return d.color.toLowerCase()
});
redraw(0.5);
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment