D3 Examples - HTML Color Names (Relative Lightness)

xxxxxxxxxx
 
<!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 contrast(a, b){
      var sorted = [luminance(a), luminance(b)].sort();
      var dark = sorted[0], light = sorted[1];
​
      return (light + 0.05) / (dark + 0.05);
    }
    
    function luminance(color){
      var rgb = d3.rgb(color);
      var r = rgb.r/255;
      var g = rgb.g/255;
      var b = rgb.b/255;
​
      var R = (r <= 0.03928) ? r/12.92 : Math.pow((r+0.055)/1.055, 2.4);
      var G = (g <= 0.03928) ? g/12.92 : Math.pow((g+0.055)/1.055, 2.4);
      var B = (b <= 0.03928) ? b/12.92 : Math.pow((b+0.055)/1.055, 2.4);
      var L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
​
      return L;
    }
​
        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) { 
        return d.color.toLowerCase()
      })
      .style({
        "background-color": function(d) { return d.color },
        color: function(d) {
          var bgColor = d.color;
          var contrastBlack = contrast("black", bgColor);
          var contrastWhite = contrast("white", bgColor);
​
          if(contrastBlack > contrastWhite) {
            return "black"
          } else {
            return "white"
          }
        }
      })
    })
  </script>
</body>
​
    