Material Design color picker

README.md

Find Material Design colors that are close to your color. Uses Connor Gramazio's d3-cam02 implementation of CIECAM02-UCS to find Material Design colors with the least perceptual distance from the reference color. Any valid CSS color can be used.

colors.json

[
  {"color": "#fff8e1", "name": "Amber 50"},
  {"color": "#ffecb3", "name": "Amber 100"},
  {"color": "#ffe082", "name": "Amber 200"},
  {"color": "#ffd54f", "name": "Amber 300"},
  {"color": "#ffca28", "name": "Amber 400"},
  {"color": "#ffc107", "name": "Amber 500"},
  {"color": "#ffb300", "name": "Amber 600"},
  {"color": "#ffa000", "name": "Amber 700"},
  {"color": "#ff8f00", "name": "Amber 800"},
  {"color": "#ff6f00", "name": "Amber 900"},
  {"color": "#ffe57f", "name": "Amber A100"},
  {"color": "#ffd740", "name": "Amber A200"},
  {"color": "#ffc400", "name": "Amber A400"},
  {"color": "#ffab00", "name": "Amber A700"},
  {"color": "#000000", "name": "Black"},
  {"color": "#e3f2fd", "name": "Blue 50"},
  {"color": "#bbdefb", "name": "Blue 100"},
  {"color": "#90caf9", "name": "Blue 200"},
  {"color": "#64b5f6", "name": "Blue 300"},
  {"color": "#42a5f5", "name": "Blue 400"},
  {"color": "#2196f3", "name": "Blue 500"},
  {"color": "#1e88e5", "name": "Blue 600"},
  {"color": "#1976d2", "name": "Blue 700"},
  {"color": "#1565c0", "name": "Blue 800"},
  {"color": "#0d47a1", "name": "Blue 900"},
  {"color": "#82b1ff", "name": "Blue A100"},
  {"color": "#448aff", "name": "Blue A200"},
  {"color": "#2979ff", "name": "Blue A400"},
  {"color": "#2962ff", "name": "Blue A700"},
  {"color": "#eceff1", "name": "Blue Grey 50"},
  {"color": "#cfd8dc", "name": "Blue Grey 100"},
  {"color": "#b0bec5", "name": "Blue Grey 200"},
  {"color": "#90a4ae", "name": "Blue Grey 300"},
  {"color": "#78909c", "name": "Blue Grey 400"},
  {"color": "#607d8b", "name": "Blue Grey 500"},
  {"color": "#546e7a", "name": "Blue Grey 600"},
  {"color": "#455a64", "name": "Blue Grey 700"},
  {"color": "#37474f", "name": "Blue Grey 800"},
  {"color": "#263238", "name": "Blue Grey 900"},
  {"color": "#cfd8dc", "name": "Blue Grey A100"},
  {"color": "#b0bec5", "name": "Blue Grey A200"},
  {"color": "#78909c", "name": "Blue Grey A400"},
  {"color": "#455a64", "name": "Blue Grey A700"},
  {"color": "#efebe9", "name": "Brown 50"},
  {"color": "#d7ccc8", "name": "Brown 100"},
  {"color": "#bcaaa4", "name": "Brown 200"},
  {"color": "#a1887f", "name": "Brown 300"},
  {"color": "#8d6e63", "name": "Brown 400"},
  {"color": "#795548", "name": "Brown 500"},
  {"color": "#6d4c41", "name": "Brown 600"},
  {"color": "#5d4037", "name": "Brown 700"},
  {"color": "#4e342e", "name": "Brown 800"},
  {"color": "#3e2723", "name": "Brown 900"},
  {"color": "#e0f7fa", "name": "Cyan 50"},
  {"color": "#b2ebf2", "name": "Cyan 100"},
  {"color": "#80deea", "name": "Cyan 200"},
  {"color": "#4dd0e1", "name": "Cyan 300"},
  {"color": "#26c6da", "name": "Cyan 400"},
  {"color": "#00bcd4", "name": "Cyan 500"},
  {"color": "#00acc1", "name": "Cyan 600"},
  {"color": "#0097a7", "name": "Cyan 700"},
  {"color": "#00838f", "name": "Cyan 800"},
  {"color": "#006064", "name": "Cyan 900"},
  {"color": "#84ffff", "name": "Cyan A100"},
  {"color": "#18ffff", "name": "Cyan A200"},
  {"color": "#00e5ff", "name": "Cyan A400"},
  {"color": "#00b8d4", "name": "Cyan A700"},
  {"color": "#fbe9e7", "name": "Deep Orange 50"},
  {"color": "#ffccbc", "name": "Deep Orange 100"},
  {"color": "#ffab91", "name": "Deep Orange 200"},
  {"color": "#ff8a65", "name": "Deep Orange 300"},
  {"color": "#ff7043", "name": "Deep Orange 400"},
  {"color": "#ff5722", "name": "Deep Orange 500"},
  {"color": "#f4511e", "name": "Deep Orange 600"},
  {"color": "#e64a19", "name": "Deep Orange 700"},
  {"color": "#d84315", "name": "Deep Orange 800"},
  {"color": "#bf360c", "name": "Deep Orange 900"},
  {"color": "#ff9e80", "name": "Deep Orange A100"},
  {"color": "#ff6e40", "name": "Deep Orange A200"},
  {"color": "#ff3d00", "name": "Deep Orange A400"},
  {"color": "#dd2c00", "name": "Deep Orange A700"},
  {"color": "#ede7f6", "name": "Deep Purple 50"},
  {"color": "#d1c4e9", "name": "Deep Purple 100"},
  {"color": "#b39ddb", "name": "Deep Purple 200"},
  {"color": "#9575cd", "name": "Deep Purple 300"},
  {"color": "#7e57c2", "name": "Deep Purple 400"},
  {"color": "#673ab7", "name": "Deep Purple 500"},
  {"color": "#5e35b1", "name": "Deep Purple 600"},
  {"color": "#512da8", "name": "Deep Purple 700"},
  {"color": "#4527a0", "name": "Deep Purple 800"},
  {"color": "#311b92", "name": "Deep Purple 900"},
  {"color": "#b388ff", "name": "Deep Purple A100"},
  {"color": "#7c4dff", "name": "Deep Purple A200"},
  {"color": "#651fff", "name": "Deep Purple A400"},
  {"color": "#6200ea", "name": "Deep Purple A700"},
  {"color": "#e8f5e9", "name": "Green 50"},
  {"color": "#c8e6c9", "name": "Green 100"},
  {"color": "#a5d6a7", "name": "Green 200"},
  {"color": "#81c784", "name": "Green 300"},
  {"color": "#66bb6a", "name": "Green 400"},
  {"color": "#4caf50", "name": "Green 500"},
  {"color": "#43a047", "name": "Green 600"},
  {"color": "#388e3c", "name": "Green 700"},
  {"color": "#2e7d32", "name": "Green 800"},
  {"color": "#1b5e20", "name": "Green 900"},
  {"color": "#b9f6ca", "name": "Green A100"},
  {"color": "#69f0ae", "name": "Green A200"},
  {"color": "#00e676", "name": "Green A400"},
  {"color": "#00c853", "name": "Green A700"},
  {"color": "#fafafa", "name": "Grey 50"},
  {"color": "#f5f5f5", "name": "Grey 100"},
  {"color": "#eeeeee", "name": "Grey 200"},
  {"color": "#e0e0e0", "name": "Grey 300"},
  {"color": "#bdbdbd", "name": "Grey 400"},
  {"color": "#9e9e9e", "name": "Grey 500"},
  {"color": "#757575", "name": "Grey 600"},
  {"color": "#616161", "name": "Grey 700"},
  {"color": "#424242", "name": "Grey 800"},
  {"color": "#212121", "name": "Grey 900"},
  {"color": "#e8eaf6", "name": "Indigo 50"},
  {"color": "#c5cae9", "name": "Indigo 100"},
  {"color": "#9fa8da", "name": "Indigo 200"},
  {"color": "#7986cb", "name": "Indigo 300"},
  {"color": "#5c6bc0", "name": "Indigo 400"},
  {"color": "#3f51b5", "name": "Indigo 500"},
  {"color": "#3949ab", "name": "Indigo 600"},
  {"color": "#303f9f", "name": "Indigo 700"},
  {"color": "#283593", "name": "Indigo 800"},
  {"color": "#1a237e", "name": "Indigo 900"},
  {"color": "#8c9eff", "name": "Indigo A100"},
  {"color": "#536dfe", "name": "Indigo A200"},
  {"color": "#3d5afe", "name": "Indigo A400"},
  {"color": "#304ffe", "name": "Indigo A700"},
  {"color": "#e1f5fe", "name": "Light Blue 50"},
  {"color": "#b3e5fc", "name": "Light Blue 100"},
  {"color": "#81d4fa", "name": "Light Blue 200"},
  {"color": "#4fc3f7", "name": "Light Blue 300"},
  {"color": "#29b6f6", "name": "Light Blue 400"},
  {"color": "#03a9f4", "name": "Light Blue 500"},
  {"color": "#039be5", "name": "Light Blue 600"},
  {"color": "#0288d1", "name": "Light Blue 700"},
  {"color": "#0277bd", "name": "Light Blue 800"},
  {"color": "#01579b", "name": "Light Blue 900"},
  {"color": "#80d8ff", "name": "Light Blue A100"},
  {"color": "#40c4ff", "name": "Light Blue A200"},
  {"color": "#00b0ff", "name": "Light Blue A400"},
  {"color": "#0091ea", "name": "Light Blue A700"},
  {"color": "#f1f8e9", "name": "Light Green 50"},
  {"color": "#dcedc8", "name": "Light Green 100"},
  {"color": "#c5e1a5", "name": "Light Green 200"},
  {"color": "#aed581", "name": "Light Green 300"},
  {"color": "#9ccc65", "name": "Light Green 400"},
  {"color": "#8bc34a", "name": "Light Green 500"},
  {"color": "#7cb342", "name": "Light Green 600"},
  {"color": "#689f38", "name": "Light Green 700"},
  {"color": "#558b2f", "name": "Light Green 800"},
  {"color": "#33691e", "name": "Light Green 900"},
  {"color": "#ccff90", "name": "A100"},
  {"color": "#b2ff59", "name": "A200"},
  {"color": "#76ff03", "name": "A400"},
  {"color": "#64dd17", "name": "A700"},
  {"color": "#f9fbe7", "name": "Lime 50"},
  {"color": "#f0f4c3", "name": "Lime 100"},
  {"color": "#e6ee9c", "name": "Lime 200"},
  {"color": "#dce775", "name": "Lime 300"},
  {"color": "#d4e157", "name": "Lime 400"},
  {"color": "#cddc39", "name": "Lime 500"},
  {"color": "#c0ca33", "name": "Lime 600"},
  {"color": "#afb42b", "name": "Lime 700"},
  {"color": "#9e9d24", "name": "Lime 800"},
  {"color": "#827717", "name": "Lime 900"},
  {"color": "#f4ff81", "name": "Lime A100"},
  {"color": "#eeff41", "name": "Lime A200"},
  {"color": "#c6ff00", "name": "Lime A400"},
  {"color": "#aeea00", "name": "Lime A700"},
  {"color": "#fff3e0", "name": "Orange 50"},
  {"color": "#ffe0b2", "name": "Orange 100"},
  {"color": "#ffcc80", "name": "Orange 200"},
  {"color": "#ffb74d", "name": "Orange 300"},
  {"color": "#ffa726", "name": "Orange 400"},
  {"color": "#ff9800", "name": "Orange 500"},
  {"color": "#fb8c00", "name": "Orange 600"},
  {"color": "#f57c00", "name": "Orange 700"},
  {"color": "#ef6c00", "name": "Orange 800"},
  {"color": "#e65100", "name": "Orange 900"},
  {"color": "#ffd180", "name": "Orange A100"},
  {"color": "#ffab40", "name": "Orange A200"},
  {"color": "#ff9100", "name": "Orange A400"},
  {"color": "#ff6d00", "name": "Orange A700"},
  {"color": "#fce4ec", "name": "Pink 50"},
  {"color": "#f8bbd0", "name": "Pink 100"},
  {"color": "#f48fb1", "name": "Pink 200"},
  {"color": "#f06292", "name": "Pink 300"},
  {"color": "#ec407a", "name": "Pink 400"},
  {"color": "#e91e63", "name": "Pink 500"},
  {"color": "#d81b60", "name": "Pink 600"},
  {"color": "#c2185b", "name": "Pink 700"},
  {"color": "#ad1457", "name": "Pink 800"},
  {"color": "#880e4f", "name": "Pink 900"},
  {"color": "#ff80ab", "name": "Pink A100"},
  {"color": "#ff4081", "name": "Pink A200"},
  {"color": "#f50057", "name": "Pink A400"},
  {"color": "#c51162", "name": "Pink A700"},
  {"color": "#f3e5f5", "name": "Purple 50"},
  {"color": "#e1bee7", "name": "Purple 100"},
  {"color": "#ce93d8", "name": "Purple 200"},
  {"color": "#ba68c8", "name": "Purple 300"},
  {"color": "#ab47bc", "name": "Purple 400"},
  {"color": "#9c27b0", "name": "Purple 500"},
  {"color": "#8e24aa", "name": "Purple 600"},
  {"color": "#7b1fa2", "name": "Purple 700"},
  {"color": "#6a1b9a", "name": "Purple 800"},
  {"color": "#4a148c", "name": "Purple 900"},
  {"color": "#ea80fc", "name": "Purple A100"},
  {"color": "#e040fb", "name": "Purple A200"},
  {"color": "#d500f9", "name": "Purple A400"},
  {"color": "#aa00ff", "name": "Purple A700"},
  {"color": "#ffebee", "name": "Red 50"},
  {"color": "#ffcdd2", "name": "Red 100"},
  {"color": "#ef9a9a", "name": "Red 200"},
  {"color": "#e57373", "name": "Red 300"},
  {"color": "#ef5350", "name": "Red 400"},
  {"color": "#f44336", "name": "Red 500"},
  {"color": "#e53935", "name": "Red 600"},
  {"color": "#d32f2f", "name": "Red 700"},
  {"color": "#c62828", "name": "Red 800"},
  {"color": "#b71c1c", "name": "Red 900"},
  {"color": "#ff8a80", "name": "Red A100"},
  {"color": "#ff5252", "name": "Red A200"},
  {"color": "#ff1744", "name": "Red A400"},
  {"color": "#d50000", "name": "Red A700"},
  {"color": "#e0f2f1", "name": "Teal 50"},
  {"color": "#b2dfdb", "name": "Teal 100"},
  {"color": "#80cbc4", "name": "Teal 200"},
  {"color": "#4db6ac", "name": "Teal 300"},
  {"color": "#26a69a", "name": "Teal 400"},
  {"color": "#009688", "name": "Teal 500"},
  {"color": "#00897b", "name": "Teal 600"},
  {"color": "#00796b", "name": "Teal 700"},
  {"color": "#00695c", "name": "Teal 800"},
  {"color": "#004d40", "name": "Teal 900"},
  {"color": "#a7ffeb", "name": "Teal A100"},
  {"color": "#64ffda", "name": "Teal A200"},
  {"color": "#1de9b6", "name": "Teal A400"},
  {"color": "#00bfa5", "name": "Teal A700"},
  {"color": "#fffde7", "name": "Yellow 50"},
  {"color": "#fff9c4", "name": "Yellow 100"},
  {"color": "#fff59d", "name": "Yellow 200"},
  {"color": "#fff176", "name": "Yellow 300"},
  {"color": "#ffee58", "name": "Yellow 400"},
  {"color": "#ffeb3b", "name": "Yellow 500"},
  {"color": "#fdd835", "name": "Yellow 600"},
  {"color": "#fbc02d", "name": "Yellow 700"},
  {"color": "#f9a825", "name": "Yellow 800"},
  {"color": "#f57f17", "name": "Yellow 900"},
  {"color": "#ffff8d", "name": "Yellow A100"},
  {"color": "#ffff00", "name": "Yellow A200"},
  {"color": "#ffea00", "name": "Yellow A400"},
  {"color": "#ffd600", "name": "Yellow A700"},
  {"color": "#ffffff", "name": "White"}
]

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  * {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

  body {
    margin: 1rem;
  }

  input {
    border: 1px solid #ccc;
    font-size: 1em;
    padding: 0.5em;
  }

  input.error {
    color: #d50000;
  }

  label {
    margin-right: 0.5em;
  }

  p {
    line-height: 1.5em;
  }

  table {
    border-collapse: collapse;
    width: 32rem;
  }

  #colors td {
    padding: 1em;
  }

  #colors .distance {
    text-align: right;
  }

  .form-control {
    margin-bottom: 1rem;
  }
</style>
<div class="form-control">
  <label for="color">Reference color:</label>
  <input id="color" type="text" value="red" />
</div>
<table>
  <tbody id="colors">
  </tbody>
</table>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/d3-cam02@0.1.5/build/d3-cam02.js"></script>
<script>
  var black = d3.jab('black');
  var white = d3.jab('white');
  var distanceFormat = d3.format('0.2f');

  function textColor(backgroundColor) {
    return black.de(backgroundColor) >= white.de(backgroundColor) ? black : white;
  }

  d3.json('colors.json', function(err, colors) {
    function updateColors(ref) {
      var data = colors.map(function(c) {
        return {
          color: c.color,
          distance: d3.jab(c.color).de(ref),
          name: c.name
        };
      });

      data.sort(function(a, b) { return a.distance - b.distance; });
      data.splice(10);

      d3.select('#ref-color')
        .style('background-color', ref)
        .style('color', textColor(ref));

      var rows = d3.select('#colors')
        .selectAll('tr')
        .data(data, function(d) { return d.name; });

      rows.exit().remove();

      rows = rows.enter();
      var newRow = rows.append('tr');
      newRow.append('td')
        .attr('class', 'shade')
        .text(function(d) { return d.name; });
      newRow.append('td')
        .attr('class', 'hex')
        .text(function(d) { return d.color; });
      newRow.append('td')
        .attr('class', 'distance')
        .text(function(d) { return distanceFormat(d.distance); });

      d3.select('#colors')
        .selectAll('tr')
        .data(data, function(d) { return d.name; })
        .style('background-color', function(d) { return d.color; })
        .style('color', function(d) { return textColor(d.color); })
        .order();
    }

    d3.select('#color')
      .on('input', function() {
        var refColor = d3.jab(this.value);
        var valid = !isNaN(refColor.J);

        d3.select(this)
          .attr('class', valid ? null : 'error');

        if (valid) {
          updateColors(refColor);
        }
      });

    updateColors('red');
  })
</script>