Разбор палитры изображений

[SSinn]

Доброго времени суток.
У меня есть скрипт который разбирает доминирующие цвета на изображении.
Помогите пожалуйста дописать чтоб при наведении на цвет писало его HEX код и RGB код.
Вот сам скрипт:

$(document).ready(function () {
 
    if (typeof window.FileReader === 'function') {
      $('#dragDrop').show();
 
      var $dropZone = $('#dropZone');
 
      var dragEnter = function( evt ){
        evt.stopPropagation();
        evt.preventDefault();
        $dropZone.addClass('dragging');
      };
 
      var dragLeave = function( evt ){
        evt.stopPropagation();
        evt.preventDefault();
        $dropZone.removeClass('dragging');
      };
 
      var dragOver = function( evt ){
        evt.stopPropagation();
        evt.preventDefault();
      };
 
      var drop = function( evt ){
        evt.stopPropagation();
        evt.preventDefault();
        $dropZone.removeClass('dragging');
        
        var dt = evt.originalEvent.dataTransfer;
        var files = dt.files;
 
        handleFiles( files );
      };
 
      $dropZone
        .on('dragenter', dragEnter)
        .on('dragleave', dragLeave)
        .on('dragover', dragOver)
        .on('drop', drop);
    }
 
    var displayColors = function( image ) {
      var $image = $(image);
      var imageSection = $image.closest('.imageSection');
      var appendColors = function (colors, root) {
          $.each(colors, function (index, value) {
              var swatchEl = $('<div>', {'class': 'swatch'})
                  .css('background-color', 'rgba('+ value +', 1)');
              root.append(swatchEl);
          });
      };
 
      // Dominant Color
      var dominantColor = getDominantColor(image);
      var dominantSwatch = imageSection.find('.dominantColor .swatches');
      appendColors([dominantColor], dominantSwatch);
 
      // Palette
      var colorCount = $image.attr('data-colorcount') ? $image.data('colorcount') : 10;
      var medianPalette = createPalette(image, colorCount);
      var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
      appendColors(medianPalette, medianCutPalette);
    };
 
    function handleFiles( files ) {
      var imageType = /image.*/;
      var fileCount = files.length;
 
      for (var i = 0; i < fileCount; i++) {
        var file = files[i];
 
        if ( file.type.match(imageType) ) {
          var reader = new FileReader();
          reader.onload = function( e ) {
              imageInfo = { images: [
                  {'class': 'droppedImage', file: e.target.result}
                ]};
 
              var html = Mustache.to_html($('#template').html(), imageInfo);
              $('#draggedImages').prepend( html );
 
              var img = $('.droppedImage .targetImage').get(0);
 
              // Must wait for image to load in DOM, not just load from FileReader
              $(img).on('load', function() {
                displayColors( img );
                util.centerImg( img, 400, 300);
 
                $('.droppedImage').slideDown();
              });
            };
          reader.readAsDataURL(file);
        } else {
          alert('File must be a supported image type.');
        }
      }
    }
 
   /* var html = Mustache.to_html($('#template').html(), imageArray);
    $('#main').append(html);*/
 
    // Use lettering.js to give letter by letter styling control for the h1 title
    $("h1").lettering();
 
    // For each image:
    // Once image is loaded, get dominant color and palette and display them.
    $('img').bind('load', function (event) {
      var image = event.target;
      displayColors( image );
    });
});
 
var util = {
  centerImg: function( img, containerWidth, containerHeight) {
      var $img = $(img);
      var imgWidth = $img.get(0).width;
      var imgHeight = $img.get(0).height;
      var imgAspectRatio = imgHeight/imgWidth;
 
      if ( imgHeight > containerHeight ) {
        imgWidth = containerHeight / imgAspectRatio;
        $img.css('width', ( imgWidth + "px" ));
      }
      if ( imgWidth > containerWidth ) {
        $img.css('width', ( containerWidth + "px" ));
        imgHeight =  imgAspectRatio * containerWidth;
      }      
      if ( imgWidth < containerWidth ) {
        var hOffset = ( containerWidth - imgWidth )/2;
        $img.css('margin-left', ( hOffset + "px" ));
      }
      if ( imgHeight < containerHeight ) {
        var vOffset = ( containerHeight - imgHeight )/2;
        $img.css('margin-top', ( vOffset + "px" ));
      }
    }
};

Вот HTML файл:

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
  <link href='http://fonts.googleapis.com/css?family=Varela+Round|Terminal+Dosis:400,700,600' rel='stylesheet' type='text/css'>
 
    <title>Color Thief</title>
    <meta name="description" content="">
    <link rel="stylesheet" href="css/app.css">
    <script src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
 
<div id="container">
    <header>
        <h1>Color Thief</h1>
        <p>Программа яка визначає колірну палітру загруженого зображення, та підбирає найліпші кольора які підійдуть до цього зображення.</p>
    </header>
    <div id="main" role="main">
    <div id='dragDrop' style='display: none'>
      <h2>Программа</h2>
      <div id="dropZone" class="dropZone">
      </div>
      <div id="draggedImages"></div>
    </div>
    </div>
</div> 
 
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.8.3.min.js"><\/script>')</script>
<script src="js/libs/jquery.lettering.js"></script>
<script src="js/libs/mustache.js"></script>
 
 
<script src="js/libs/quantize.js"></script>
<script src="js/color-thief.js"></script>
<script id='template' type='text/x-mustache'>
  {{#images}}
  <div class="imageSection {{class}} ">
    <div class="imageWrap">
      <img class="targetImage" src="{{file}}" data-colorcount="{{colorCount}}" />
    </div>
    <div class="colors">
      <div class="function dominantColor">
        <h3>Домінуючий колір на зображенні</h3>
        <div class="swatches"></div>
      </div>
      <div class="function medianCutPalette clearfix">
        <h3>Палітра кольорів загруженого зображення</h3>
        <div class="swatches"></div>
      </div>
    </div>
  </div>
  {{/images}}
</script>
 
<script src="index.js"></script>
</body>
</html>

2) И еще у меня есть алгоритм подбора подходящего цвета для изображения... В бд храниться цвета и их форматы.. Помогите пожалуйста сделать так :
После определения палитры цветов мы брали по алгоритму цвета из бд которые подходят к палитре и выводили пару вариантов...
Заранее благодарен.

[Hekumok]

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.