RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Build a Web-safe Color Palette Application-3 : Page 3

Make the Palette Interactive
With all the building blocks in place, it's time to write the script to add interactivity. Add a <script> block to the head section of the document, and write the createTable() function as follows:

<script type="text/javascript">
  function createTable(){
    var colors = new 
    var tableText = '<table width="350" 
    for (i=0; i<6; i++) {
      for (j=0; j<6; j++) {
        tableText += '<tr>';
        for (k=0; k<6; k++){
          var color = colors[i] + colors[j] + 
          if (i < 4 && j < 4 && k < 4) {
            tableText += '<td onClick="setColor(this)" 
            style="color:white;background-color:#' + 
            color + ';">' + color + '</td>';
          else {
            tableText += '<td onClick="setColor(this)" 
            style="background-color:#' + color + 
            ';">' + color + '</td>';
        tableText += '</tr>';
    tableText += '</table>';
    return tableText;
The preceding code creates a table by using three nested for loops. The colors array holds the hexadecimal color values acceptable for each of the red, green, and blue components of a Web-safe color palette. The code then uses the nested loops to iterate through each of the values. The i loop represents the red component, the j loop represents the green component, and the k loop represents the blue component of the color to be displayed. By including the HTML table markup tags and looping through the acceptable values of the Web-safe palette stored in the colors array, the createTable() function creates a table with 6 colors and 36 rows—the 216 colors of the Web-safe color palette.

You may have noticed that as the code constructs the <td> tags, it also adds an onClick event handler that points to a function called setColor(). The setColor() function takes the <td> element itself as an argument (the "this" argument). You'll need to add the setColor() function—and the colorToSetFlag mentioned earlier to the page. Add the following to the script:

   var colorToSet = 'fore'; 
   function setColor(node){
     if (colorToSet=='fore') {
       document.getElementById('testArea').style.color = 
         '#' + node.firstChild.nodeValue;
       document.getElementById('foreground').innerHTML = 
         'Foreground: ' + node.firstChild.nodeValue;
     else {
         'testArea').style.backgroundColor = '#' + 
       document.getElementById('background').innerHTML = 
         'Background: ' + node.firstChild.nodeValue;

When the page first loads, the colorToTest flag is set to 'fore', but the flag value changes from 'fore' to 'back' as users change the selected radio button. The setColor() function uses DOM properties to access the text stored in the <td> element passed to the function. It then uses that text (the color value) to apply the selected color to either the foreground or background of the testArea <div> depending on the current colorToSet flag value. Finally, the setColor() function sets the innerHTML property of either the foreground or background labels to the selected color value.

That's all there is to it! You can use this Web-safe color palette application to help select a color scheme for anything from a single element to an entire site. You could easily extend the application to let users change the font, weight, and size of the text in the test area. In fact, the closer you make the content of the test area to the actual content of the intended site, the more likely it is that the process of selecting a color scheme will go smoothly.

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the college's in-house Web design studio. You can reach him via e-mail .
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date