A Pen by White Wolf Wizard.

Find-A-Color.markdown

Find A Color

A Pen by White Wolf Wizard on CodePen.

License.

index.haml

#container
  -(1..4).each do
    .frame
      -(1..9).each do
        .item
          .box-first
          .box-second
          .box-third

script.js

$(window).load(function(){
  var h = 10, s = 75,
      l1 = 25, l2 = 50, l3 = 75;
  $('.item .box-first').each(function(i){
    var color = h * i;
    $(this).css({ backgroundColor: 'hsl('+color+','+s+'%,'+l1+'%)' });
  });
  $('.item .box-second').each(function(i){
    var color = h * i;
    $(this).css({ backgroundColor: 'hsl('+color+','+s+'%,'+l2+'%)' });
  });
  $('.item .box-third').each(function(i){
    var color = h * i;
    $(this).css({ backgroundColor: 'hsl('+color+','+s+'%,'+l3+'%)' });
  });
  $('<div id="input"></div>').prependTo('#container');
  $('<p><em>Hue:</em><input type="number" id="hue" class="input" min="0" max="360" step="10" value="'+h+'"></p>')
  .add('<p><em>Saturation:</em><input type="number" id="sat" class="input" min="0" max="100" step="5" value="'+s+'"></p>')
  .add('<p><em>Lightness 1:</em><input type="number" id="lit1" class="input" min="0" max="100" step="5" value="'+l1+'"></p>')
  .add('<p><em>Lightness 2:</em><input type="number" id="lit2" class="input" min="0" max="100" step="5" value="'+l2+'"></p>')
  .add('<p><em>Lightness 3:</em><input type="number" id="lit3" class="input" min="0" max="100" step="5" value="'+l3+'"></p>')
  .appendTo('#input');
  $('.input').change(function(){
    var h = $('#hue').val(), s = $('#sat').val(),
        l1 = $('#lit1').val(), l2 = $('#lit2').val(), l3 = $('#lit3').val();
    $('.item .box-first').each(function(i){
      var color = h * i;
      $(this).css({ backgroundColor: 'hsl('+color+','+s+'%,'+l1+'%)' });
    });
    $('.item .box-second').each(function(i){
      var color = h * i;
      $(this).css({ backgroundColor: 'hsl('+color+','+s+'%,'+l2+'%)' });
    });
    $('.item .box-third').each(function(i){
      var color = h * i;
      $(this).css({ backgroundColor: 'hsl('+color+','+s+'%,'+l3+'%)' });
    });
  }).change();
});

$(function(){
  $('.item [class*="box-"]').hover(function(i){
    var thisColor = $(this).css('backgroundColor');
    $('<input type="text" class="color" value="'+thisColor+'" disabled>')
    .appendTo($(this)).fadeIn(150);
  },function(){
    $('.color').remove();
  });
  $('[class*="box-"]').on('click',function(){
    $(this).find('.color').select();
  });
});

style.scss

@import "compass";
*, *:before, *:after { box-sizing: border-box; }
body { overflow: hidden; }
#container {
  position: absolute;
  top: 50px; left: 0; right: 0; bottom: 0;
  padding: 35px;
  .frame {
    width: 100%; height: 25%;
    display: table;
    .item {
      width: 10%; height: 100%;
      display: table-cell;
      [class*='box-'] {
        position: relative;
        width: 100%; height: 33.33%;
        z-index: 0;
        &:hover { z-index: 1; }
        .color {
          cursor: pointer;
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          height: 25px;
          padding: 0; margin: auto -25px;
          border-radius: 3px;
          outline: 0; border: 0;
          background-color: #FFF;
          background-image: linear-gradient(0deg,rgba(0,0,0,.15) 0%,transparent 100%);
          display: none;
          box-shadow: 0 0 5px rgba(0,0,0,.15);
          font-family: 'Consolas', monospace, serif;
          font-size: 60%;
          color: #666;
          text-align: center;
          line-height: 25px;
          font-smoothing: antialiased;
        }
      }
    }
  }
  #input {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%; height: 50px;
    background: #000;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 80%;
    color: #FFF;
    line-height: 50px;
    text-align: center;
    font-smoothing: antialiased;
    p {
      margin: 0 10px;
      display: inline-block;
      em { cursor: default; padding-right: 5px; }
      .input {
        cursor: pointer;
        padding: 0 0 0 3px; margin: 0;
        outline: 0; border: 5px solid #333;
        background: #333;
        color: #FFF;
      }
    }
  }
}