JSFiddle - React, Tailwind, and code Playground

by bseth99

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="render"></div>

CSS

.wrapper {
   display: inline-block;
   margin: 1px;
   border: 1px dotted silver;
}

.color {
   vertical-align: top;
   font-size: 6pt;
   margin: 3px;
   width: 125px;
}

.box {
   display: inline-block;
   height: 20px;
   width: 50px;
   border: 1px solid dimgray;
}

.values {
   display: inline-block;
   margin-left: 1px;
}

JavaScript

$(function()
{
   var $rdr = $('#render');

   $.each(['rgb(0,0,0)', 'rgb(255,255,255)', 'hsl(0,0%,100%)'], function (idx)
      {
         var $wrp, $val, cdf,
             color = this,
             clr = jQuery.Color(color),
             now = clr.lightness(),
             step = (now > 0.5 ? 0 - now : 1 - now) / 10;

         if (idx % 4 == 0) $rdr.append('<br/>');

         $wrp = $('<div>')
                     .addClass('wrapper')
                     .html('<span><center>'+color+'</center></span>')
                     .appendTo($rdr);

         for (var i=0;i<=10;i++)
         {
            cdf = clr.lightness(now + step * i);

            $val = $('<div>')
                      .addClass('color')
                      .appendTo($wrp);

            $val.append(
               $('<div>')
                  .addClass('box')
                  .css('background-color', cdf)
                  .appendTo($val)
             );

            $val.append(
               $('<div>')
                  .addClass('values')
                  .html(cdf.toRgbaString()+'<br/>'+cdf.toHslaString())
             );
         }

      });
});