HTML Color Names (Relative Lightness)

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)

<!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;
    }    
    .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