News

JQUERY: How to create a custom colour palette

Discover the color-thief.js plugin and derive dominant and palette RGB colours from an image element using and jQuery

colorthief

Discover the color-thief.js plugin and derive dominant and palette RGB colours from an image element using <canvas> and jQuery</canvas>

colorthief


GET THE CODE FOR THIS TUTORIAL


Capture colours

One of the coolest aspects of the Not To Scale site is how CSS hex colours are taken from video stills to theme UI elements. The designers, She Was Only, developed custom code to perform this in a more sophisticated way, but for this technique we’ll do something similar using a clever jQuery plugin called color-thief.js.

Download color-thief.js

Color-thief.js by Lokesh Dhakar (lokeshdhakar.com) cleverly uses jQuery and HTML5 <canvas> to return RGB values from an image. In this example we will use it to output an <img> element’s colour palette across a stack of <div> swatches and RGB labels. The plugin is available from GitHub at github.com/lokesh/color-thief so begin by downloading the ZIP repository.

Attach jQuery

With the library unzipped, copy the ‘src’ folder containing color-thief.js into the root of your page. In the <head> attach the latest jQuery, shown below via CDN, and then the plugin script itself:

001 <script src=”http://code.jquery.com/jquery-1.11.3.min.js”></script>
002 <script src=”src/color-thief.js”></script>

Set up the HTML elements

So our page is very simply made up of a <div> containing our 600 by 450px JPG image, before a series of nested divs we’ll change the backgrounds to display the RGB colour values. We’ll show a larger dominant colour swatch then eight smaller palette swatches. In each of these swatches we have a <p> label that will also update to output the RGB values:

001 HTML:
002 <body>
003 <div class=”container”>
004 <img id=”myImage” src=”thePic.jpg”></img>
005 <div class=”dominant”><p>COLOR 1</p></div>
006 <div class=”palette”>
007     <div id=”colorBox”><p id=”colorLabel”>COLOR 2</p></div>    
008     <div id=”colorBox”><p id=”colorLabel”>COLOR 3</p></div>
009     <div id=”colorBox”><p id=”colorLabel”>COLOR 4</p></div>
010     <div id=”colorBox”><p id=”colorLabel”>COLOR 5</p></div>
011     <div id=”colorBox”><p id=”colorLabel”>COLOR 6</p></div>
012     <div id=”colorBox”><p id=”colorLabel”>COLOR 7</p></div>
013     <div id=”colorBox”><p id=”colorLabel”>COLOR 8</p></div>
014     <div id=”colorBox”><p id=”colorLabel”>COLOR 9</p></div>
015 </div>
016 </div>

Set the CSS classes

These elements require some styling, purely to arrange them into place, set default colours and so on. Check the project files to see the full markup but the key few for our <div> swatches and labels are listed below as follows. If you view the page thus far the elements will be blank.

001 CSS:
002 .dominant {
003     width: 596px;
004     border: 2px solid #FFF;
005     margin-top: 5px;
006     margin-bottom: 5px;
007
008 #colorBox {
009     float: left;
010     width: 136px;
011     border: 2px solid #FFF;
012     padding: 5px;
013 }
014 
015 #colorLabel { color: #000; }
016 .dominant, #colorBox, #colorLabel {background: #FFF; }

Call on ColorThief()

Our main code, placed just before our closing </body> tag, starts by grabbing the myImage <img> element. Next we create a new ColorThief() instance to call the core methods on. The getColor() and getPalette() methods, both passed the image element, return our dominant colour and an array (sized by the second argument -1) of palette colours:

001 <script>
002 var myImage = $(‘#myImage’)[0];
003 var colorThief = new ColorThief();
004 var dominantColor = colorThief.getColor(myImage);
005 var paletteColors = colorThief.getPalette(myImage, 9);

Switch the swatches

Now very simply we can update our dominant colour swatch using dominantColor, switching the div element’s CSS background-color property and then rewriting its <p> label to display the RGB correctly:

001 $(“.dominant”).css({“background-color”:”rgb(“ + dominantColor + “)”});
002 $(“.dominant p”).text(“rgb(“ + dominantColor + “)”);

Populate the palette

To update the palette swatches, the last part of our <script> grabs all the identical boxes and labels into two arrays. The loop then iterates under the length of paletteColors (x8) in order to again change the background-color properties of each swatch, before outputting each RGB value to the labels.

×