Simple Color Select Script

[HotNoob]

you can change the width by changing the variable width, and you can change the height, by playing around with the height and increaVir variables.

Code: Select all

<div id=div style='background-color:black; width:800px; padding:2px 2px 2px 2px;'>
  <table id=table cellspacing=0 cellpadding=0>
      <tr id='container'>
      </tr>
  </table>
  <script>
  function selectColor(object)
  {
    alert("Selected: " + object.style.backgroundColor);
  }
  var max = 255;
  var increment = 255/max;
  var current = 0;
  var data = "";
  var width = 800;
  var height = '10px';
  var tdWidth = width/max;
  for(i = 0; i < max; i++)
  {
      data += "<td style='width:"+tdWidth+"; height: "+height+"; background-color: rgb("+Math.round(current)+","+Math.round(current)+","+Math.round(current)+");' onClick='selectColor(this);'> </td>";
      current += increment;
  }
  document.getElementById('container').innerHTML = data;

  </script>

  <table id=table2 cellspacing=0 cellpadding=0>
      <tr id='container2'>
      </tr>
  </table>
  <script>
  var maxHor = 100;
  var increaHor = 255/maxHor;
  var maxVir = 50;
  var increaVir = 255/maxVir;
  var start = 0;
  var r,g,b = 0;
  var data = "";
  var tdWidth = (width/max)/3;
  for(i = 0; i < maxVir; i++)
  {
      data += "<tr>";
      r = start;
      g = start;
      b = start;
      for(i2 = 0; i2 < maxHor; i2++)
      {
        if(r < 254)
        {
            r += increaHor;
        }
        else if (g < 254)
        {
           g += increaHor;
        }
        else if(b < 254)
        {
          b += increaHor;
        }
        data += "<td style='width:"+tdWidth+"; height: "+height+"; background-color: rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+");' onClick='selectColor(this);'> </td>";
      }
      r = start;
      g = start;
      b = start;
      for(i2 = 0; i2 < maxHor; i2++)
      {
        if(g < 254)
        {
            g += increaHor;
        }
        else if (b < 254)
        {
           b += increaHor;
        }
        else if(r < 254)
        {
          r += increaHor;
        }
        data += "<td style='width:"+tdWidth+"; height: "+height+"; background-color: rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+");' onClick='selectColor(this);'> </td>";
      }
      r = start;
      g = start;
      b = start;
      for(i2 = 0; i2 < maxHor; i2++)
      {
        if(b < 254)
        {
            b += increaHor;
        }
        else if (r < 254)
        {
           g += increaHor;
        }
        else if(g < 254)
        {
          r += increaHor;
        }
        data += "<td style='width:"+tdWidth+"; height: "+height+"; background-color: rgb("+Math.round(r)+","+Math.round(g)+","+Math.round(b)+");' onClick='selectColor(this);'> </td>";
      }
      data += "</tr>";
      start += increaVir;
  }
  document.getElementById('container2').innerHTML = data;

  </script>
</div>
<script>
        document.getElementById('div').style.width = width+"px";
        document.getElementById('table').style.width = width+"px";
        document.getElementById('table2').style.width = width+"px";
</script>

enjoy.