Tiny Color Picker App With Copy To Clipboard Support

A small, user-friendly, jQuery-based color picker app that makes it easier to select a color and copy the color code to the clipboard by clicking the color block. Inspired by Flat UI Color.

Dependency:

• jQuery library
• clipboard.js: copy to clipboard library

How to use it:

1. Create a container element for the color palette.

<div class="panel"></div>

2. Create another element for the 'Copied' overlay & message.

<div class="copied"></div>

3. Load the necessary jQuery library and clipboard.js in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/clipboard.min.js"></script>

4. Define an array of colors for the palette.

var colors = [
    "#16a085",
    "#1abc9c",
    "#2ecc71",
    ...
];

5. The main JavaScript to activate the color picker app.

var clipboard = new Clipboard('.clipboard');

$.map(colors, function(val) {
  var colorToPick = $("<button class='clipboard' data-clipboard-text="+ val +">"+ val +"</button>");
  $(".panel").append(colorToPick);
});

$('.panel > button').each(function () {
    $(this).css('background-color',$(this).text());
});

// custom copied text
var copiedText = [
  'Copied!',
  'Nice one!',
  'You got it!',
  'The best one!',
];

$('button').click(function() {
  $('.copied').css('background-color',$(this).text());
  $('.copied').text(copiedText[(Math.floor(Math.random() * 4) + 1)-1]);
  $('.copied').fadeIn(500).delay(300);
  $('.copied').fadeOut(500);
})

6. The example CSS to style the color picker.

.clipboard {
  color: transparent;
  line-height:100px;
  text-align: center;
  font-family: sans-serif;
  width:200px;
  height:200px;
  border: none;
  font-size: 16px;
}

.clipboard:hover {
  font-weight: bold;
  cursor: pointer;
}

.copied {
  display: none;
  background-color: grey;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  height: 100%;
  width: 100%;
  color: white;
  font-size: 72px;
  font-weight: bold;
  text-align: center;
  line-height: 100%;
  text-transform: uppercase;
}

.copied:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

---

This awesome jQuery plugin is developed by HichamELBSI. For more Advanced Usages, please check the demo page or visit the official website.