The X-Lab - Experimental Development Repository

ColorGen3
Category: generator
Language: HTML/Javascript
Description:
A multi-featured webpage colors cheme generator
Download: colorgen3.zip
Preview
Source Code:
<!--### Written by Micah Atwell - www.micahatwell.com/xlab ###-->
<!--
   Please do not modify or remove this information.
   Copyright (C) 2006, Micah Atwell. All Rights Reserved.
   http://www.micahatwell.com/
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>ColorGen3 - Webpage Color Scheme Generator</title>
   <style type="text/css">
      body{margin:0px;background-color:#ccc;color:black;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10pt;}
      select{font-size:10px;}
      .reg{position:absolute;width:400px;height:265px;border:solid #ccc;border-width:1px;}
         #r1{left:0px;top:95px;}
         #r2{left:400px;top:95px;}
         #r3{left:0px;top:360px;}
         #r4{left:400px;top:360px;}
         .col1{position:absolute;left:10px;top:10px;}
         .col2{position:absolute;left:95px;top:10px;}
         .col3{position:absolute;left:180px;top:10px;}
         .colr{margin-bottom:10px;width:71px;height:71px;border:solid #999;border-width:1px;}
         .txt{margin:12px 0px 13px 0px;width:195px;height:71px;}
      #controls{position:absolute;left:0px;top:0px;width:100%;padding-bottom:2px;background-color:#999;}
         th{padding:0px 2px 1px 2px;font-size:9px;font-weight:bold;background-color:#666;color:#fff;}
         .fld{font-size:10px;}
         /* IF CHANGING ANY BUTTON STYLES, COPY AND PASTE THEM INTO CG3HELP.HTML */
         .btn{font-size:10px;padding:0px 0px 0px 0px;background-color:#ffc;color:#000;
            border:solid #000;border-width:1px;margin-right:2px;}
         .btnLum{font-size:10px;padding:0px 0px 0px 0px;background-color:#ccc;color:#000;cursor:n-resize;
            border:solid #000;border-width:1px;margin-right:2px;margin-top:2px;}
         .btnInv{font-size:10px;padding:0px 0px 0px 0px;background-color:#6ff;color:#f00;font-weight:bold;
            border:solid #000;border-width:1px;margin-right:2px;margin-top:2px;}
         .btnRed{font-size:10px;padding:0px 1px 0px 1px;background-color:#c33;color:#fcc;font-weight:bold;
            border:solid #000;border-width:1px;margin-right:2px;margin-top:2px;}
         .btnGrn{font-size:10px;padding:0px 1px 0px 1px;background-color:#3c3;color:#030;font-weight:bold;
            border:solid #000;border-width:1px;margin-right:2px;margin-top:2px;}
         .btnBlu{font-size:10px;padding:0px 1px 0px 1px;background-color:#33c;color:#ccf;font-weight:bold;
            border:solid #000;border-width:1px;margin-right:2px;margin-top:2px;}
         .btnHlp{font-size:10px;padding:0px 1px 0px 1px;background-color:#f9f;margin-top:2px;margin-bottom:2px;
            color:#303;font-weight:bold;cursor:help;
            border:solid #000;border-width:1px;}
         .chk{margin-bottom:0px;}
         .swatch{margin:1px 2px 1px 0px;width:35px;height:35px;border:solid #000;border-width:1px;cursor:e-resize;}
         .cap{font-size:10px;font-weight:normal;}
      #mc{position:absolute;left:10px;top:700px;color:black;}
   </style>
   <script language="JavaScript" type="text/javascript">
      <!--
         /// VARIABLES ///
         var UA=null;
         if(navigator.userAgent.indexOf("MSIE")!=-1)UA="IE";
         else if(navigator.userAgent.indexOf("Gecko")!=-1)UA="Moz";
         var dfc=new Array("#ffffff","#B0CDB7","#4E555A","#000000"); //default colors
         var dfbw=2; //default border-width
         var named=new Array("aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","linen","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen");
         var namedOpts="<option>Named colors...";
         for(i=0;i<named.length;i++)namedOpts+="<option style='background-color:"+named[i]+";'>"+named[i];
         var dragging_rgb=false,dragging_lum=false,dragging_swatch=false;dragEl=null,dropEl=null;;
         var mx=0,my=0;
         /// FUNCTIONS ///
         function adjLum(mode){
            var idx=dragEl.substr(3,dragEl.length-1);
            var targFld=document.getElementById("colr"+idx);
            if(targFld.value.search(/^\#[0-9a-f]{6}$/i)==-1)return false;
            var targSw=document.getElementById("swatch"+idx);
            var pr1=hex2dec(targFld.value.substr(1,2));
            var pr2=hex2dec(targFld.value.substr(3,2));
            var pr3=hex2dec(targFld.value.substr(5,2));
            var tlimit=false,blimit=false;
            if(pr1==255||pr2==255||pr3==255)tlimit=true;
            if(pr1==0||pr2==0||pr3==0)blimit=true;
            if(!tlimit && mode==1 && pr1<255)pr1++;else if(!blimit && mode==0 && pr1>0)pr1--;pr1=dec2hex(pr1);
            if(!tlimit && mode==1 && pr2<255)pr2++;else if(!blimit && mode==0 && pr2>0)pr2--;pr2=dec2hex(pr2);
            if(!tlimit && mode==1 && pr3<255)pr3++;else if(!blimit && mode==0 && pr3>0)pr3--;pr3=dec2hex(pr3);
            var newv="#"+pr1+pr2+pr3;
            targFld.value=newv;
            targSw.style.backgroundColor=newv;
         }
         function adjRGB(mode){
            var idx=dragEl.substr(3,dragEl.length-1);
            var targFld=document.getElementById("colr"+idx);
            if(targFld.value.search(/^\#[0-9a-f]{6}$/i)==-1)return false;
            var pr1=targFld.value.substr(1,2);
            var pr2=targFld.value.substr(3,2);
            var pr3=targFld.value.substr(5,2);
            var targSw=document.getElementById("swatch"+idx);
            var hue=dragEl.substr(0,3);
            if(hue=="red"){
               var dec=hex2dec(pr1);if(mode==1 && dec<255)dec++;else if(mode==0 && dec>0)dec--;pr1=dec2hex(dec);
            }else if(hue=="grn"){
               var dec=hex2dec(pr2);if(mode==1 && dec<255)dec++;else if(mode==0 && dec>0)dec--;pr2=dec2hex(dec);
            }else if(hue=="blu"){
               var dec=hex2dec(pr3);if(mode==1 && dec<255)dec++;else if(mode==0 && dec>0)dec--;pr3=dec2hex(dec);
            }
            var newv="#"+pr1+pr2+pr3;
            targFld.value=newv;
            targSw.style.backgroundColor=newv;
         }
         function cycleArrayElements(arr){var sh=arr.shift();arr.push(sh);return arr;}
         function dec2hex(n){
            function convN(N){
               if(N<10)return N;if(N==10)return "A";if(N==11)return "B";if(N==12)return "C";
               if(N==13)return "D";if(N==14)return "E";if(N==15)return "F";
            }
            return convN(parseInt(n/16))+''+convN(parseInt(n%16));
         }
         function getNewRender(){
            var colr=new Array();
            for(i=0;i<4;i++)colr[i]=document.getElementById("colr"+i).value;
            if(document.getElementById("bdrs").checked)bdrW=dfbw;else bdrW=0;
            renderScheme(colr[0],colr[1],colr[2],colr[3],bdrW);
         }
         function helpWin(){
            win=window.open("cg3help.html","helpWin","width=400,height=450,top=120,left=400,"+
               "menubar,scrollbars,status,resizable");
         }
         function hex2dec(n){return parseInt(n,16);}
         function invertRGB(targEl){
            var v=document.getElementById(targEl).value;
            if(v.search(/^\#[0-9a-f]{6}$/i)==-1)return false;
            var newv="#"+dec2hex(255-(hex2dec(v.substr(1,2))))+dec2hex(255-(hex2dec(v.substr(3,2))))+
               dec2hex(255-(hex2dec(v.substr(5,2))));
            document.getElementById(targEl).value=newv;
            getNewRender();
         }
         function KU(e){
            var ekc,srcEl;
            if(UA=="IE"){ekc=event.keyCode;srcEl=event.srcElement;}
            else if(UA=="Moz"){ekc=e.which;srcEl=e.target;}
            if(ekc==13 && srcEl.id.search(/colr\d/)!=-1 && validColor(srcEl))getNewRender();
         }
         function MD(e){
            if(UA=="IE"){mx=event.x;my=event.y;srcEl=event.srcElement;}
            else if(UA=="Moz"){mx=e.pageX;my=e.pageY;srcEl=e.target;}
            if(srcEl.id.search(/(red|grn|blu)\d/)!=-1){
               dragging_rgb=true;
               dragEl=srcEl.id;
            }else if(srcEl.id.search(/lum\d/)!=-1){
               dragging_lum=true;
               dragEl=srcEl.id;
            }else if(srcEl.id.search(/swatch\d/)!=-1){
               dragging_swatch=true;
               dragEl=srcEl.id;
            }
         }
         function MM(e){
            if(UA=="IE"){ny=event.y;}else if(UA=="Moz"){ny=e.pageY;}
            if(dragging_rgb){if(ny<my)adjRGB(1);else adjRGB(0);my=ny;}
            else if(dragging_lum){if(ny<my)adjLum(1);else adjLum(0);my=ny;}
         }
         function MU(e){
            if(dragging_rgb){
               dragging_rgb=false;
               getNewRender();
            }else if(dragging_lum){
               dragging_lum=false;
               getNewRender();
            }else if(dragging_swatch){
               dragging_swatch=false;
               if(UA=="IE"){dropEl=event.srcElement.id;}
               else if(UA=="Moz"){dropEl=e.target.id;}
               if(dropEl.search(/swatch\d/)==-1)return false;
               swatchDrop();
               getNewRender();
            }
         }
         function rand(seed){return Math.round(Math.random()*seed);}
         /// Returns random hex value (ie, 00-FF)
         function randHex(seed){
            if(!seed)return dec2hex(rand(255));
            return dec2hex(rand(seed));
         }
         function randRGB(mode){
            var rh1=randHex();
            if(mode=="rgb")return "#"+rh1+randHex()+randHex();
            if(mode=="gry")return "#"+rh1+rh1+rh1;
            var rh2=randHex(hex2dec(rh1));
            if(mode=="r")return "#"+rh1+rh2+rh2;
            if(mode=="g")return "#"+rh2+rh1+rh2;
            if(mode=="b")return "#"+rh2+rh2+rh1;
         }
         function setAllRand(mode){
            for(i=0;i<4;i++)document.getElementById("colr"+i).value=randRGB(mode);
            getNewRender();
         }
         function setMonoRand(srcEl,c){
            document.getElementById(srcEl).value=c;
            getNewRender();
         }
         function swatchDrop(){
            document.getElementById("colr"+dropEl.substr(dropEl.length-1)).value=
               document.getElementById("colr"+dragEl.substr(dragEl.length-1)).value;
         }
         function validColor(srcEl){
            var v=srcEl.value;
            if(v.search(/^\#[0-9a-f]{6}$/i)!=-1)return true; //match hexrgb
            v=v.toLowerCase();
            for(i=0;i<named.length;i++)if(v==named[i])return true;
            srcEl.blur();
            alert("Invalid color: ["+v+"]\n\nValues must be hexadecimal RGB (#1AB2CC) or a valid named color.");
            return false;
         }
         function renderScheme(c1,c2,c3,c4,bdrW){
            var elRoot=document.getElementById("root");
            elRoot.innerHTML="";
            var colr=new Array(c1,c2,c3,c4);
            var samptxt=" The quick brown fox jumped over the lazy dogs.";
            var out=
               "<div id='controls'>"+
                  "<table width='772' cellpadding='0' cellspacing='0' border='0'>"+
                     "<tr>"+
                        "<td align='left' valign='top'><div style='width:11px;'></div></td>";
            for(i=0;i<4;i++){out+=
                        "<td align='left' valign='top'>"+
                           "<table cellpadding='0' cellspacing='0' border='0'>"+
                              "<th>Swatch</th><th>Change/Adjust</th>"+
                              "<tr>"+
                                 "<td align='left' valign='top' nowrap>"+
                                    "<div id='swatch"+i+"' class='swatch' style='background-color:"+colr[i]+";";
               if(UA=="IE"){out+=         "margin-bottom:4px;";btnSp=68;}else btnSp=66;
               out+=                     "' title='Drag to another swatch to clone this color'></div>"+
                                    "<input type='button' id='lum"+i+"' value='Lum' class='btnLum' "+
                                       "title='Drag to change luminosity'>"+
                                    "<input type='button' value='I' class='btnInv' onclick=\""+
                                       "invertRGB('colr"+i+"');\" title='Click to invert color'><br>"+
                                 "</td>"+
                                 "<td align='left' valign='bottom' nowrap class='cap'>"+
                                    "<input type='text' id='colr"+i+"' value='"+colr[i]+
                                       "' size='10' class='fld' autocomplete='off' title='"+
                                       "To change, type new value and press <Enter>'> current<br>"+
                                    "<select onchange='"+
                                       "if(this.options[this.selectedIndex]!=0){"+
                                          "document.getElementById(\"colr"+i+"\").value="+
                                             "this.options[this.selectedIndex].text;getNewRender();}"+
                                       "' title='Select a named color from list'>"+namedOpts+"</select><br>"+
                                    "<input type='button' value='RGB' class='btn' onclick=\""+
                                       "setMonoRand('colr"+i+"',randRGB('rgb'));\" title='Click to generate random color'>"+
                                    "<input type='button' value='GRY' class='btn' onclick=\""+
                                       "setMonoRand('colr"+i+"',randRGB('gry'));\" title='"+
                                          "Click to generate random grayscale'>"+
                                    "<input type='button' id='red"+i+"' value='±' class='btnRed' "+
                                       "style='cursor:n-resize;' title='Drag to change red level'>"+
                                    "<input type='button' id='grn"+i+"' value='±' class='btnGrn' "+
                                       "style='cursor:n-resize;' title='Drag to change green level'>"+
                                    "<input type='button' id='blu"+i+"' value='±' class='btnBlu' "+
                                       "style='cursor:n-resize;' title='Drag to change blue level'><br>"+
                                    "<div style='display:inline;margin-left:"+btnSp+"px;'></div>"+
                                    "<input type='button' id='redrand"+i+"' value='?' class='btnRed' "+
                                       "onclick=\"setMonoRand('colr"+i+"',randRGB('r'));\" "+
                                       "title='Click to generate random red level'>"+
                                    "<input type='button' id='grnrand"+i+"' value='?' class='btnGrn' "+
                                       "onclick=\"setMonoRand('colr"+i+"',randRGB('g'));\" "+
                                       "title='Click to generate random green level'>"+
                                    "<input type='button' id='blurand"+i+"' value='?' class='btnBlu' "+
                                       "onclick=\"setMonoRand('colr"+i+"',randRGB('b'));\" "+
                                       "title='Click to generate random blue level'>"+
                                 "</td>"+
                                 "<td align='left' valign='bottom' width='100%'> </td>"+
                              "</tr>"+
                           "</table>"+
                        "</td>";
            }
            out+=         "<td align='center' valign='top' class='cap' nowrap width='100%'>"+
                           "<input type='button' value='Help' class='btnHlp' onclick='helpWin();' title='Help'><br>"+
                           "<b>Global:</b><br>"+
                           "<span title='Turn borders on or off'><input type='checkbox' id='bdrs'";
            if(bdrW>0)out+=   " checked";
            out+=               " class='chk' onclick='getNewRender();'> borders</span><br>"+
                           "<input type='button' value='RGB' class='btn' onclick=\"setAllRand('rgb');\" title='"+
                              "Click to generate random color'>"+
                           "<input type='button' value='GRY' class='btn' onclick=\"setAllRand('gry');\" "+
                              "title='Click to generate random grayscale'><br>"+
                        "</td>"+
                     "</tr>"+
                  "</table>"+
               "</div>";
            var j=new Array(1,2,3,4);
            for(i=0;i<4;i++){
               j=cycleArrayElements(j);
               out+=
                  "<div id='r"+(i+1)+"' class='reg' style='background-color:"+colr[0]+";'>"+
                     "<div class='col1'>"+
                        "<div class='colr' style='background-color:"+colr[1]+";border:solid "+
                           colr[2]+";border-width:"+bdrW+"px;'></div>"+
                        "<div class='colr' style='background-color:"+colr[2]+";border:solid "+
                           colr[1]+";border-width:"+bdrW+"px;'></div>"+
                        "<div class='colr' style='background-color:"+colr[3]+";border:solid "+
                           colr[1]+";border-width:"+bdrW+"px;'></div>"+
                     "</div>"+
                     "<div class='col2'>";
               if(bdrW>0)out+=
                        "<div class='colr' style='background-color:"+colr[1]+";border:solid "+
                           colr[3]+";border-width:"+bdrW+"px;'></div>"+
                        "<div class='colr' style='background-color:"+colr[2]+";border:solid "+
                           colr[3]+";border-width:"+bdrW+"px;'></div>"+
                        "<div class='colr' style='background-color:"+colr[3]+";border:solid "+
                           colr[2]+";border-width:"+bdrW+"px;'></div>";
               out+=   "</div>"+
                     "<div class='col3'>"+
                        "<div class='txt' style='color:"+colr[1]+";'><b>Color "+j[0]+":</b>"+samptxt+"</div>"+
                        "<div class='txt' style='color:"+colr[2]+";'><b>Color "+j[1]+":</b>"+samptxt+"</div>"+
                        "<div class='txt' style='color:"+colr[3]+";'><b>Color "+j[2]+":</b>"+samptxt+"</div>"+
                     "</div>"+
                  "</div>";
               colr=cycleArrayElements(colr);
            }
            elRoot.innerHTML=out;
         }
         document.onkeyup=KU;
         document.onmousedown=MD;
         document.onmousemove=MM;
         document.onmouseup=MU;
      //-->
   </script>
</head>
<body onload="renderScheme(dfc[0],dfc[1],dfc[2],dfc[3],dfbw);">
<div id="root"></div>
<div id="mc"></div>
</body>
</html>