Pick the Color

[Total: 0    Average: 0/5]

This file shows how to find the numbers (RGB) to use for any given color, or to find what color will be created by a given set of RGB.

Head Code:

<script type=text/javascript src="http://www.js-examples.com/bin/div_construct.js"></script>
<script type=text/javascript>
var  ns4 = navigator.appName.indexOf("Netscape")  != -1;
var  ie4 = navigator.appName.indexOf("Microsoft") != -1;
var  sliderMin = 50;
var  sliderMax = 306;
var  hexArray  = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
var  r1 = r2 = g1 = g2 = b1 = b2 = '0';
var  Rgb = rGb = rgB = '0';
var rActive = gActive = bActive = false; // no movement should be followed at startup.
var formValue; // make global.
var redValue,greenValue,blueValue; // make global.
var dragObject; // make global.

var sliderWidth  =   8;
var sliderHeight =  14;
var redTop       =  98;
var greenTop     = 118;
var blueTop      = 138;

var msgred         = ''
var msggreen       = ''
var msgblue        = ''
var msgredslider   = ''
var msggreenslider = ''
var msgblueslider  = ''
var msgcolortable  = '<table border=0 cellpadding=0 cellspacing=1><tr><td colspan=18 align=center id="subtext">Standard 216 Color Palette</td></tr>';
  clr = new Array('00','33','66','99','CC','FF');
  for (k=0;k<6;++k) {
    for (j=0;j<6;) {
      msgcolortable += '<tr>'
      for (m=0;m<3;++m) {
        for (i=0;i<6;++i) {
          msgcolortable += '<td bgcolor=#'+clr[k]+clr[j+m]+clr[i]+'>';
          msgcolortable += '<a href="javascript:void(null)" ';
          msgcolortable += 'onClick="convertHex(''+clr[k]+clr[j+m]+clr[i]+'');">';
          msgcolortable += '<img src="/images/shim.gif" width=10 height=10 border=0></a></td>';
        }
      }
      j+=3;
      msgcolortable += '</tr>';
    }
  }
msgcolortable += '</table>';
msgdisplay = '<img src="http://www.js-examples.com/js/colorblank.gif" width=50 height=50 border=0>';
msgtitlebar = '<table border=0 cellpadding=2 cellspacing=0 width=320><tr><td id="title">Color Picker</td></tr></table>';
msghexvalue = '<form name="frmValue"><table border=0 cellpadding=2 cellspacing=0 width=320 bgcolor=#EEEEEE><tr><td align=center>';
msghexvalue += '<table border=0 cellpadding=2 cellspacing=0><tr><td id="subtext">Red</td><td id="subtext">Green</td><td id="subtext">Blue</td></tr>';
msghexvalue += '<tr>';
msghexvalue += '<td><input type=text size=3 maxlength=3 name="RgbDisp" value="0" onBlur="manualSet(this.value,'red');"></td>';
msghexvalue += '<td><input type=text size=3 maxlength=3 name="rGbDisp" value="0" onBlur="manualSet(this.value,'green');"></td>';
msghexvalue += '<td><input type=text size=3 maxlength=3 name="rgBDisp" value="0" onBlur="manualSet(this.value,'blue');"></td>';
msghexvalue += '</tr></table></td><td align=center><table border=0 cellpadding=2 cellspacing=0><tr><td id="subtext">Hexdecimal</td></tr>';
msghexvalue += '<tr><td><input type=text size=6 maxlength=6 name="valueDisp" value="000000" onBlur="convertHex();"></td></tr>';
msghexvalue += '</table></td></tr></table></form>';
//                             window,       id,      body,         left, top, width, height, zIndex, absolute
var d_red         = new NewDiv(window, "red",         msgred,        54,  100,   256,      10,     2, "ABSOLUTE");
var d_green       = new NewDiv(window, "green",       msggreen,      54,  120,   256,      10,     2, "ABSOLUTE");
var d_blue        = new NewDiv(window, "blue",        msgblue,       54,  140,   256,      10,     2, "ABSOLUTE");
var d_redslider   = new NewDiv(window, "redSlider",   msgredslider,  50, redTop,   sliderWidth, sliderHeight,     3, "ABSOLUTE");
var d_greenslider = new NewDiv(window, "greenSlider", msggreenslider,50, greenTop, sliderWidth, sliderHeight,     3, "ABSOLUTE");
var d_blueslider  = new NewDiv(window, "blueSlider",  msgblueslider, 50, blueTop,  sliderWidth, sliderHeight,     3, "ABSOLUTE");
var d_colortable  = new NewDiv(window, "colorTable",  msgcolortable,380,   70,   320,     200,     2, "ABSOLUTE");
var d_display     = new NewDiv(window, "display",     msgdisplay,   320,  100,    50,      50,     4, "ABSOLUTE");
var d_titlebar    = new NewDiv(window, "titleBar",    msgtitlebar,   54,   70,   320,      20,     2, "ABSOLUTE");
var d_hexvalue    = new NewDiv(window, "hexValue",    msghexvalue,   54,  160,   320,      20,     2, "ABSOLUTE");


function init() {
  // these are set up for IE and NS differently
  // these can not be set up until after this page has loaded.
  formValue  = ns4 ? document.hexValue.document.frmValue.valueDisp : frmValue.valueDisp;
  redValue   = ns4 ? document.hexValue.document.frmValue.RgbDisp   : frmValue.RgbDisp;
  greenValue = ns4 ? document.hexValue.document.frmValue.rGbDisp   : frmValue.rGbDisp;
  blueValue  = ns4 ? document.hexValue.document.frmValue.rgBDisp   : frmValue.rgBDisp;

    // assign these functions
  document.onmousedown = mouseDown
  document.onmousemove = mouseMove
  document.onmouseup   = mouseUp
  if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
  manualSet("0","red");
  manualSet("0","green");
  manualSet("0","blue");
}

function mouseDown(e) {

  // check to see that the button #1 has been pressed.
  if ((ns4 && e.which!=1) ||
      (ie4 && event.button!=1))
    return true;
	
  // find the X and Y coords where the mouse was when the button was pressed.
  var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
  var y = (ns4)? e.pageY : event.y+document.body.scrollTop;

  // determine which button (slider), if any of the three, was selected to be moved.
  if (x > d_redslider.getX() && x < d_redslider.getX() + sliderWidth &&
      y > redTop && y < redTop + sliderHeight) {
    rActive    = true;
	dragObject = d_redslider;
  }
  if (x > d_greenslider.getX() && x < d_greenslider.getX() + sliderWidth &&
      y > greenTop && y < greenTop + sliderHeight) {
   gActive    = true;
   dragObject = d_greenslider;
  }
  if (x > d_blueslider.getX()  && x < d_blueslider.getX() + sliderWidth  &&
      y > blueTop  && y < blueTop + sliderHeight) {
    bActive    = true;
	dragObject = d_blueslider;
  }
  
  // if any button (slider) is active, then setup to drag it.
  if (rActive==true || gActive==true || bActive==true){
    if (x >= dragObject.xpos && x <= dragObject.xpos+dragObject.w) {
      dragObject.dragOffsetX = x-dragObject.xpos
    }
    return false
  }
  else { return true } // don't trap the event. (mouse button down)
}


var isOk=1;
function mouseMove(e) {
  if (isOk==0) return;
  else isOk=0;
  var rMoveTo = gMoveTo = bMoveTo = 0; // make these variables be local.

  // find out where the mouse is.
  var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
  var y = (ns4)? e.pageY : event.y+document.body.scrollTop

  // adjust the X pos to be in the slider range.
  if (x > sliderMax) x = sliderMax;
  if (x < sliderMin) x = sliderMin;

  // if moving any button (slider) react to the mouse movement.
  if (rActive) {
    
	d_redslider.moveTo(x, redTop);
    calcValue(x - sliderMin, 'red');
  }
  if (gActive) {
	d_greenslider.moveTo(x, greenTop);
    calcValue(x - sliderMin, 'green');
  }
  if (bActive) {
	d_blueslider.moveTo(x, blueTop);
    calcValue(x - sliderMin, 'blue');
  }
  isOk=1;
  return true
}


function mouseUp(e) {
  // denote no movement in progress
  rActive = false;
  gActive = false;
  bActive = false;
  return true
}


function calcValue(base, color){
  base -= 1;
  if (base < 16) { first = 0; }
  else { first = parseInt(base/16); }
  if (base < 0 ) { second = 0; base = 0; }
  else { second = parseInt(base%16); }
  c1=hexArray[first];
  c2=hexArray[second]; 
  if      (color == 'red')   { r1 = c1; r2 = c2; Rgb=base;}
  else if (color == 'green') { g1 = c1; g2 = c2; rGb=base;}
  else                       { b1 = c1; b2 = c2; rgB=base;}
  d_display.setBgColor('#'+r1+r2+g1+g2+b1+b2);
  formValue.value = r1+r2+g1+g2+b1+b2;
  redValue.value   = Rgb;
  greenValue.value = rGb;
  blueValue.value  = rgB;
  return true;
}


function manualSet(value,color){
  if (value < 0)   value=0;
  if (value > 255) value=255;
  ++value;
  calcValue(value,color);
  if      (color == 'red')  { d_redslider.moveTo(value   + sliderMin - 4, 100);   }
  else if (color == 'green'){ d_greenslider.moveTo(value + sliderMin - 4, 120); }
  else                      { d_blueslider.moveTo(value  + sliderMin - 4, 140);  }
}



function convertHex(hexString){
  if(hexString == null) hexString = formValue.value;
  inputHexArray = new Array(6);
  for(i=0;i<=5;++i){
    inputHexArray[i] = hexString.charAt(i);
  }
  for(i=0;i<=5;++i){
    tempHexVal = inputHexArray[i];
    for(j=0;j<=15;++j){
      if(tempHexVal == hexArray[j]) tempHexVal = j;
    }
    inputHexArray[i] = tempHexVal;
  }
  Rgb = (inputHexArray[0]*16)+inputHexArray[1]+1;
  calcValue(Rgb,'red');
  manualSet(Rgb,'red');
  rGb = (inputHexArray[2]*16)+inputHexArray[3]+1;
  calcValue(rGb,'green');
  manualSet(rGb,'green');
  rgB = (inputHexArray[4]*16)+inputHexArray[5]+1;
  calcValue(rgB,'blue');
  manualSet(rgB,'blue');
}
//onLoad="init();"
// The BODY tag should really have: onload="init()", this is a workaround:
setTimeout("init()",5000);
</script>

Body Code:

<script type=text/javascript>
d_red.output();
d_green.output();
d_blue.output();
d_redslider.output();
d_greenslider.output();
d_blueslider.output();
d_colortable.output();
d_display.output();
d_titlebar.output();
d_hexvalue.output();
</script>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *