Demo

Today we’ll build a small part of a web based user interface, that will allow us to change the background colour of an iPhone icon. To choose the colour, we’ll use a colour picker made in JavaScript, as the native input types are not supported on all browsers.

There are many colour pickers around the web, but we’ll test Spectrum jQuery plugin, “The No Hassle jQuery Colorpicker” for this project.

HTML

All the markup needed for Spectrum is an input element:

html
<input type="color" id="color-picker" />

Notice the type color, which in the browsers that support it, will show a native colour picker.

To make our project more credible we’ll add some context markup:

html
  <div class="container">
    <div class="output" id="output"></div>

    <div class="result-wrp">
      <input type="color" id="color-picker" />
      <span class="result" id="result"></span>
    </div>
  </div>

The output will show the hex code of the colour picked, and the result is our iPhone icon.

Just before we close the body tag we add the “jQuery* and Spectrum scripts.

CSS

Let’s add some style to organize the elements a bit:

css
body {
  font-family: sans-serif;
  background: #2F4347;
  margin: 0;
  padding: 0;
  text-align: center;
}

.container {
  margin: 3em auto;
  width: 20em;
}

.result {
  width: 5em;
  height: 5em;
  border-radius: 30%;
  box-shadow: 0 2px 6px #000;
  background: #95C066;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2em;
}

.output {
  margin-bottom: 5em;
  padding: 1em;
  color: #fff;
  border-bottom: 2px dashed #42595E;
  text-align: center;
  text-transform: uppercase;
  font-size: .8em;
  text-shadow: 0 -1px 0 #2B3E42;
  color: #475D62;
}

Much better! It looks like a real web app now. We also add a link to our Spectrum CSS file. Next the interaction.

JavaScript

We’ll add our code inside an immediate calling function:

js
(function () {
  var app = {
    start: function() {
      this.output = $('#output');
      this.result = $('#result');
      var self    = this,
        initialColor = this.result.css('background');
      var colorPicker = $('#color-picker').spectrum({
        chooseText: 'ok',
        color:      initialColor,
        move:       function(col) { self.onMove(col.toHexString()); },
        change:     function(col) { self.onChange(col.toHexString()); },
        hide:       function(col) { self.onHide(col.toHexString()); }
      });
      this.broadcast(colorPicker.spectrum('get').toHexString());
    }
  };

  $(function () {
    app.start();
  });
})();

First we create references to the DOM elements for later use, then instantiate the Spectrum plugin. Spectrum has many options that you can checkout at their website, we have used only a few here.

chooseText - determines the text of the confirmation button

color - the initial value of the input

move - the event fired when choosing a colour

change - the event fired when confirming a colour

hide - the event fired when canceling picking a colour, either by clicking outside the palette, or by clicking on the cancel button.

All the callback functions accept a color object argument, which represents the colour selected in each instance. This object has a toHexString method, which returns the hex code of the colour.

The broadcast function shows the selected colour on the screen, but only when it is confirmed. Let’s add it after the start function:

js
broadcast: function(color) {
  this.output.html('Final color: ' + color);
}

Now let’s implement the callbacks:

js
onMove: function(color) {
  this.result.css('background', color);
},

onChange: function(color) {
  this.result.css('background', color);
  this.broadcast(color);
},

onHide: function(color) {
  this.result.css('background', color);
  this.broadcast(color);
}

The main functionality in the methods above is to change the background colour of our iPhone icon. The bottom two also update the output window.

We then open the HTML file on a browser, and our colour picker works well.

More CSS

One of the benefits of Spectrum is its simple markup, that can be styled easily. Let’s do that next:

css
.sp-container {
  border: none;
  box-shadow: 0 0 .8em #aaa;
}

.sp-replacer {
  background: transparent;
  padding-right: 14px;
  border-color: #475D62;
}

.sp-replacer:hover,
.sp-replacer.sp-active {
  border-color: #536E74;
}

.sp-preview {
  position: relative;
  border: none;
}

.sp-preview:before {
  content: '';
  position: absolute;
  top: 7px;
  left: 30px;
  border-top: 5px solid #5D7980;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.sp-replacer:hover .sp-preview:before,
.sp-replacer.sp-active .sp-preview:before {
  border-top-color: #819BA1;
}

.sp-preview:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 31px;
  border-top: 4px solid #2F4347;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.sp-dd {
  display: none;
}

.sp-container button {
  background: transparent;
  font-size: 1em;
  text-shadow: none;
  border-radius: 1em;
  padding-left: .8em;
  padding-right: .8em;
  box-shadow: none;
  outline: none;
}

Now the picker fits better to our overall style of the page.

Summary

That was all: a simple but powerful colour picker plugin. Don’t forget to check the github repo for this tutorial, where you can see how all fits together.

Happy coding!