Michigan Colors

HTML

<script src="//cdn.jsdelivr.net/tinycolor/0.9.16/tinycolor-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<div>These are the colors found on the <a href="http://vpcomm.umich.edu/brand/style-guide/design-principles/colors">Michigan Style Guide</a>

    <table id="mich_colors">
        <tr>
            <th>
                <p>Name</p>
            </th>
            <th>Shade</th>
            <th>HEX</th>
            <th>Lumosity</th>
        </tr>
        <tr>
            <td class="color_name">Porcelain</td>
            <td class="color_view" bgcolor="#eff0f1">&nbsp;&nbsp;&nbsp;</td>
            <td class="color_rgb_value">#eff0f1</td>
            <td>94.1</td>
        </tr>
        <tr>
            <td class="color_name">Mercury</td>
            <td class="color_view" bgcolor="#e5e5e5">&nbsp;&nbsp;&nbsp;</td>
            <td class="color_rgb_value">#e5e5e5</td>
            <td>89.8</td>
        </tr>
        <tr>
            <td class="color_name">Observatory White</td>
            <td class="color_view" bgcolor="#e4e1df">&nbsp;&nbsp;&nbsp;</td>
            <td class="color_rgb_value">#e4e1df</td>
            <td>88.4</td>
        </tr>
        <tr>
            <td class="color_name">UMMA Tan</td>
            <td class="color_view" bgcolor="#cfc096">&nbsp;&nbsp;&nbsp;</td>
            <td class="color_rgb_value">#cfc096</td>
            <td>70</td>
        </tr>
        <tr>
            <td class="color_name">Angell Hall Ash</td>
            <td class="color_view" bgcolor="#a79d96">&nbsp;&nbsp;&nbsp;</td>
            <td class="color_rgb_value">#a79d96</td>
            <td>62.2</td>
        </tr>
        <tr>
            <td class="color_name">The Rock Gray</td>
            <td class="color_view" bgcolor="#989c97">&nbsp;&nbsp;&nbsp;</td>
            <td class="color_rgb_value">#989c97</td>
            <td>61.2</td>
        </tr>
        <tr>
            <td class="color_name">Rackham Roof Green</td>
         ...

JavaScript

/*jslint browser:true, devel:true, debug:true */
/*global d3:false, $:false */
/*jshint browser:true, devel:true, debug:true  */
function tableToJson() {
    'use strict';
    var data = [],
        colorRGBvalue, colorName, rowIndex, cellIndex, color, colorDifference, comparisonColor = tinycolor($("#comparisonColor").text());
    console.log('Got here!');
    //alert('Got here!');
    // first row needs to be headers
    var headers = [];
    $('table #mich_colors tr:first td').each(function () {
        console.log(this.val());
        headers.push(this.val().toLowerCase().replace(/ /gi, ''));
    });
    rowIndex = 0;
    cellIndex = 0;
    // go through cells
    $('table#mich_colors tr:not(:first)').each(function () {
        rowIndex++;
        //console.log('rowIndex: ' + rowIndex);
        cellIndex = 0;
        $(this).children('td').each(function () {
            cellIndex++;
            //console.log('rowIndex: ' + rowIndex + ' cellIndex:' + cellIndex);
            if ($(this).is('.color_name')) {
                colorName = $(this).text().trim();
                //console.log('rowIndex: ' + rowIndex + ' cellIndex:' + cellIndex + ' colorRGBvalue:' + colorRGBvalue);
            } else if ($(this).is('.color_rgb_value')) {
                colorRGBvalue = $(this).text().trim();

                //console.log('rowIndex: ' + rowIndex + ' cellIndex:' + cellIndex + ' colorName:' + colorName);
            }
            if ($(this).is(':last-child')) {
                //color = d3.rgb(colorRGBvalue).hsl().l;
                color = tinycolor(colorRGBvalue);
                colorDifference = tinycolor.readability(color, comparisonColor);
                console.log('rowIndex: ' + rowIndex + ' cellIndex:' + cellIndex + ' colorRGBvalue:' + colorRGBvalue + ' colorName:' + colorName + ' brightness difference:' + colorDifference.brightness + ' color difference:' + colorDifference.color);

            }

        });



        //alert('RGB:' + colorRGBvalue + '...