Color and grey palette in PHP and Javascript

gistfile1.aw

//author: unknown/ extended by Lo Sauer (2000); Codebase yr2000
//descr: Color and grey palette in PHP with Javascript interaction
<script language="JavaScript"> 

 var coRed=127;coGreen=127;coBlue=255; // Original color 
  
var Hex=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); 

function rgb2hex(cRed,cGreen,cBlue){ 
  cColor=Hex[Math.floor(cRed/16)]+Hex[cRed%16]+Hex[Math.floor(cGreen/16)]+Hex[cGreen%16]+Hex[Math.floor(cBlue/16)]+Hex[cBlue%16]; 
  return cColor; 
} 
  
function ShowColor(cColor){ 
  //implementation logic
}; 
  
function plttClick(cRed,cGreen,cBlue){ 
	// Change the color 
	coRed=cRed; 
	coGreen=cGreen; 
	coBlue=cBlue; 
	// Replace the following line with your own code 
	console.log(cRed+','+cGreen+','+cBlue) 
} 

function plttOver(cRed,cGreen,cBlue){ 
	ShowColor(rgb2hex(cRed,cGreen,cBlue)); 
	// Add you own code here 
	self.status='Red: '+cRed+' / Green: '+cGreen+' / Blue: '+cBlue; 
} 

function plttOut(){ 
	// Restore original color 
	ShowColor(rgb2hex(coRed,coGreen,coBlue)); 
	// Add you own code here 
	self.status='Click on the color of your choice'; 
} 

</script> 

<?php 
  // -- Color Palette - 
   $arColors = array(0, 51, 102, 153, 204, 255);
				// 0x00 0x33 0x66 0x99 0xCC 0xFF 
  $plttSize=Count($arColors); 
  $cellWidth=12; 
  $pic=ImageCreate($plttSize*$plttSize*($cellWidth+1),$plttSize*($cellWidth+1)); 
  ImageFilledRectangle($pic,0,0,$plttSize*$plttSize*($cellWidth+1),$plttSize*($cellWidth+1),ImageColorAllocate($pic,255,255,255)); 
  $cTop=0; 
  print("<map name=\"color-pltt\">\n"); 
  for($cRed=0;$cRed<$plttSize;$cRed++){ 
   $cLeft=0; 
   for($cGreen=0;$cGreen<$plttSize;$cGreen++){ 
    for($cBlue=0;$cBlue<$plttSize;$cBlue++){ 
     ImageFilledRectangle($pic,$cLeft,$cTop,$cLeft+$cellWidth-1,$cTop+$cellWidth-1,ImageColorAllocate($pic,$arColors[$cRed],$arColors[$cGreen],$arColors[$cBlue])); 
     echo "<area shape=\"rect\" coords=\"".$cLeft.",".$cTop.",".($cLeft+$cellWidth-1).",".($cTop+$cellWidth-1)."\" href=\"javascript:plttClick(".$arColors[$cRed].",".$arColors[$cGreen].",".$arColors[$cBlue].")\" onMouseOver=\"plttOver(".$arColors[$cRed].",".$arColors[$cGreen].",".$arColors[$cBlue].");return true;\" onMouseOut=\"plttOut();return true;\" />\n"; 
     $cLeft=$cLeft+$cellWidth+1; 
    } 
   } 
   $cTop=$cTop+$cellWidth+1; 
  } 
  echo "</map>\n"; 
  ImagePNG($pic,"./pngs/color-pltt.png"); 
  ImageDestroy($pic); 
   
  // -- Gray Palette - 
  $plttSize=32; // Must be a divider of 256 
  $cellWidth=12; // Must be >0 
  $pic=ImageCreate(($plttSize+1)*($cellWidth+1),$cellWidth+1); 
  ImageFilledRectangle($pic,0,0,$plttSize*($cellWidth+1),$cellWidth+1,ImageColorAllocate($pic,255,255,255)); 
  $incRGB=floor(256/$plttSize); 
  $cLeft=0; 
  $cTop=0; 
  echo "<map name=\"gray-pltt\">\n"; 
  for($cGray=0;$cGray<($plttSize+1);$cGray++){ 
   if($cGray==0){ 
    $grayRGB=0; 
   } else { 
    $grayRGB=($cGray*$incRGB)-1; 
   } 
   ImageFilledRectangle($pic,$cLeft,$cTop,$cLeft+$cellWidth-1,$cTop+$cellWidth-1,ImageColorAllocate($pic,$grayRGB,$grayRGB,$grayRGB)); 
   echo "<area shape=\"rect\" coords=\"".$cLeft.",".$cTop.",".($cLeft+$cellWidth-1).",".($cTop+$cellWidth-1)."\" href=\"javascript:plttClick(".$grayRGB.",".$grayRGB.",".$grayRGB.")\" onMouseOver=\"plttOver(".$grayRGB.",".$grayRGB.",".$grayRGB.");return true;\" onMouseOut=\"plttOut();return true;\" />\n"; 
   $cLeft=$cLeft+$cellWidth+1; 
  } 
  echo "</map>\n"; 
  ImagePNG($pic,"./pngs/gray-pltt.png"); 
  ImageDestroy($pic); 
?> 
  

Color Palette

<img src="https://github.com/lsauer/resources/raw/master/phproj/pngs/color-pltt.png" usemap="#color-pltt" border="0" /> 
Gray Palette
<img src="https://github.com/lsauer/resources/raw/master/phproj/pngs/gray-pltt.png" usemap="#gray-pltt" border="0" />