Basic Color Cube

Brad Garrick Jul 25, 2001

This creative script lets you choose the background color using a color cube. You can also do a reverse search using hexadecimal, RGB, or just the name of the colors.

Color Cube

Click on a color to lock it.
Click on any square to unlock.

Here's the color code to match up the RGB in paint.

Red	Green	Blue

The JavaScript Source: Image Effects: Basic Color Cube

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL BASIC COLOR CUBE:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

</script>

//
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--Here\'s the background changer for the cube
leftclick=0;

</HEAD>

<BODY>

<center>
<h3>Color Cube</H3></center>
<center>Click on a color to lock it.<br>Click on any square to unlock.</center>
<center>
<table>

<SCRIPT LANGUAGE="JavaScript">
<!-- Cube Maker
var hex_Red=new Array("00","33","66","99","cc","ff");
var hex_Green=new Array("00","33","66","99","cc","ff");
var hex_Blue=new Array("00","33","66","99","cc","ff");
var hexred="00";
var hexgreen="00";
var hexblue="00";
var red=0;
var green=0;
var blue=0;
var x=0;
var y=0;
var z=0;
var xyz=0;

while (y<6)
  {
  window.document.write("<tr>");
  var x=0;
  var hexblue=hex_Blue[blue];
    while (x<6)
    {
    var z=0;
    var hexgreen=hex_Green[green];
      while (z<6)
      {
      var hexred=hex_Red[red];
      var hexadecimal="#"+hexred+hexgreen+hexblue;
      window.document.write("<td bgColor="+hexadecimal+"><a href=\"javascript:lock()\" onmouseover=\"r(\'"+hexadecimal+"\'); return true\"><img src=\"\" border=\"0\" height=\"20\" width=\"20\"/></a></td>");
      z++;
      red++;
      if (red==6)
      {
      red=0;
      }
      }
    x++;
    green++;
    if (green==6)
    {
    green=0;
    }
    xyz++;
    if (xyz==3)
    {
    window.document.write("</tr>");
    xyz=0;
    }
    }
  y++;
  blue++
  if (blue==6)
  {
  blue=0;
  }
  }
// End color cube. -->
</script>

</table>
</center>

<center>Here's the color code to match up the RGB in paint.</center>
<table align="center">
  <tr>
     <td align="center" width="100">Red</td>
     <td align="center" width="100">Green</td>
     <td align="center" width="100">Blue</td>
  </tr>
  <tr>
     <td align="center"><form name="bb" onSubmit="changeBackRGB(); return false;"><input type="text" name="re" size="2"></form></td>
     <td align="center"><form name="cc" onSubmit="changeBackRGB(); return false;"><input type="text" name="gr" size="2"></form></td>
     <td align="center"><form name="dd" onSubmit="changeBackRGB(); return false;"><input type="text" name="bl" size="2"></form></td>
  </tr>
</table>

</table>
</center>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Basic Color Cube

Color Cube

Leave a Response

Attention JavaScript Coders

Go Deeper