Tiny Color Picker App With Copy To Clipboard Support

File Size: 3.26 KB
Views Total: 1444
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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 = [

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 > button').each(function () {

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

$('button').click(function() {
  $('.copied').text(copiedText[(Math.floor(Math.random() * 4) + 1)-1]);

6. The example CSS to style the color picker.

.clipboard {
  color: transparent;
  text-align: center;
  font-family: sans-serif;
  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.