Colors that are changed by the new formula L = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b > 0.5 * 255
, compared to just hsl.luminance > 0.5
.
I wanted a programmatically friendly list of the HTML named colors found here: https://en.wikipedia.org/wiki/Web_colors
Built with blockbuilder.org
forked from enjalot's block: HTML Color Names (Relative Lightness)
forked from enjalot's block: HTML Color Names (Relative Lightness)
xxxxxxxxxx
<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;
}
.color {
float: left;
padding: 3px 5px;
margin: 2px 5px;
font-family: Helvetica;
border-radius: 3px
}
</style>
</head>
<body>
<script>
function color(d,m) {
var hsl = d3.hsl(d.color);
var rgb = d3.rgb(d.color);
var L = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
// console.log(hsl)
if ((m ? hsl.l : L) >= 0.5) {
return "black"
} else {
return "white"
}
}
var display = d3.select("body");
d3.csv("colors.csv", function(err, colors) {
var cdivs = display.selectAll("div.color")
.data(colors)
cdivs.enter()
.append("div").classed("color", true);
cdivs.text(function(d) {
//var rgb = d3.rgb(d.color);
//var hsl = rgb.hsl();
return d.color.toLowerCase()
})
.style({
"background-color": function(d) { return d.color },
color: d => (color(d,0) != color(d,1)) ? color(d,0) : d.color
})
//cdivs.filter(d => color(d) === 'white').remove()
})
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js