There is input box where you enter the Id of what you want to change.
then can use buttons to change Hue sateration and Light/darkness
will also return Hex color for copy and paste
i made this to make it easy to test color schems on my pages.

With this code you can copy the Html Body part and past to the bottom of the page to be edited and point to the js and css file.

Sorry non Fire Fox users this isnt a customer end script so i didnt acomadate for other browsers.

JavaScript:
Code:
function init(){

		killMovers();		
}


function fadeOut(obj){
	if (!obj.style.opacity){obj.style.opacit=1;}	// if no value to opacity yet set to solid
	if (obj.fadeTimer!=null){resetOpacit(obj);}
		counter = 0;
		obj.fadeTimer = setInterval(function(){doFadeOut(obj,counter++);},60);
}
function doFadeOut(obj,counter,value){

	if (counter!=11){		//counter hasnt expired do action
		value = 10-counter;
		obj.style.opacity= value/10;	

	}else{
	obj.style.opacity=.04

		clearInterval(obj.fadeTimer);
	}
}
function resetOpacit(obj){
	obj.style.opacity=1;
	clearInterval(obj.fadeTimer);
}


window.onload = init;


function moveLeft(obj,objWidth){
	var adder=-4;
	if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
	if (document.getElementById("divUp").enableMove == "true"){
		obj.moveTimer = setInterval(function(){doHorizontalMove(obj,adder,objWidth);},10);
	}
}
function moveRight(obj,objWidth){
	var adder=4;
	if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
	if (document.getElementById("divUp").enableMove == "true"){
		obj.moveTimer = setInterval(function(){doHorizontalMove(obj,adder,objWidth);},10);
	}
}

function doHorizontalMove(obj,adder,objWidth){
	xpos = parseInt(obj.style.left) ;
	if (!xpos){xpos=0;}
	if (!xpos && adder==-4){xpos=o;	//  Keep in Bounds
		if (xpos >=(parseInt(window.innerWidth)-objWidth)|| !xpos){
			if (adder==4){xpos=parseInt(window.innerWidth)-objWidth;}
		}
	}
	xpos =xpos + adder;										//Move
	obj.style.left= xpos + 'px';									//   Object

}
function stopMove(obj){
	clearInterval(obj.moveTimer);
	var display = document.getElementById("display");

}
function moveUp(obj,objHeight){
	var adder=-4;
	if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
	if (document.getElementById("divUp").enableMove == "true"){
		obj.moveTimer = setInterval(function(){doVerticalMove(obj,adder,objHeight);},10);
	}
}
function moveDown(obj,objHeight){
	var adder=4;
	if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
	if (document.getElementById("divUp").enableMove == "true"){
		obj.moveTimer = setInterval(function(){doVerticalMove(obj,adder,objHeight);},10);
	}
}


function doVerticalMove(obj,adder,objHeight){

	ypos = parseInt(obj.style.top) ;
	if (!ypos){ypos=0;}
	if (!ypos && adder==-4){ypos=o	//  Keep in Bounds
	if (ypos >=(parseInt(window.innerHeight)-objHeight)|| !ypos){
		if (adder==2){ypos=parseInt(window.innerHeight)-objHeight;};}
	}
	ypos =ypos + adder;										//Move
	obj.style.top= ypos + 'px';									//   Object
}

function enableMovers(caller){

	if (!caller.opclick){caller.opclick =1;}
	if (caller.opclick==1){
		caller.value ="Hide";		
		caller.opclick=2;
		obj =document.getElementsByName("moveCtrl");
		objStore = document.getElementById("divUp");
		objStore.enableMove = "true";
		var i
		for (i in obj){obj[i].style.opacity = 1;}

	}else{
		caller.value ="Move";
		caller.opclick=1;
		 obj =document.getElementsByName("moveCtrl");
		objStore = document.getElementById("divUp");
		objStore.enableMove = "disabled";
		for (i in obj){obj[i].style.opacity = 0;}
	}
}
function killMovers(){
		 obj =document.getElementsByName("moveCtrl");
		objStore = document.getElementById("divUp");
		objStore.enableMove = "disabled";
		for (i in obj){obj[i].style.opacity = 0;}
}


function hIncrease(){
	obj = getObj();
	if (obj.timer!=null){clearInterval(obj.timer);}
	if(obj.th ==null){startHSL(obj)}
		ader = 1;
		amount =document.getElementById("getAmount").value;

		obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'h');},20);
}
function sIncrease(){
	obj = getObj();
	if (obj.timer!=null){clearInterval(obj.timer);}
	if(obj.th ==null){startHSL(obj)}
		ader = 1;
		amount =document.getElementById("getAmount").value;

		obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'s');},20);
}
function lIncrease(){
	obj = getObj();
	if (obj.timer!=null){clearInterval(obj.timer);}
	if(obj.th ==null){startHSL(obj)}
		ader = 1;
		amount =document.getElementById("getAmount").value;

		obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'l');},20);
}
function hDecrease(){
	obj = getObj();
	if (obj.timer!=null){clearInterval(obj.timer);}
	if(obj.th ==null){startHSL(obj)}
		ader = -1;
		amount =document.getElementById("getAmount").value;

		obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'h');},20);
}
function sDecrease(){
	obj = getObj();
	if (obj.timer!=null){clearInterval(obj.timer);} 
	if(obj.th ==null){startHSL(obj)}
		ader = -1;
		amount =document.getElementById("getAmount").value;

		obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'s');},20);
}
function lDecrease(){
	obj = getObj();
	if (obj.timer!=null){clearInterval(obj.timer);}
	if(obj.th ==null){startHSL(obj)}
		ader = -1;
		amount =document.getElementById("getAmount").value;

		obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'l');},20);
}
function changeColor(obj,ader,amount,lookUp){

	hader= 0;
	sader= 0;
	lader= 0;
	if (amount>=1){
		switch(lookUp){
			case "h":
				hader = ader;
				break;
			case "s":
				sader = ader;
				break;
			case "l":
				lader = ader;
				break;
		}
		checked = getChecked();

		if (checked==1){

			obj.th =obj.th+hader;
			if (obj.th>360 && ader==1){obj.th=0;}  //wrap uper limit
			if (obj.th<0&& ader==-1){obj.th=360;}  // lower limit
	
			obj.ts =obj.ts+sader;
			if (obj.ts>100){obj.ts=100;}  //stop at uper limit
			if (obj.ts<0){obj.ts=0;}	// lower limit

			obj.tl =obj.tl+lader;
			if (obj.tl>100){obj.tl=100;}  //stop at uper limit
			if (obj.tl<0){obj.tl=0;}	// lower limit

			h =obj.th;	s =obj.ts ;		l =obj.tl ;
			obj.style.color = "hsl("+h+","+s+"%,"+l+"%)";
			document.getElementById("hexColor").value =cssHex(obj.style.color);
			document.getElementById("displayInfo").innerHTML ="hsl ("+obj.th+ " "+ obj.ts +" "+ obj.tl+")";


		}else{

			obj.bgh =obj.bgh+hader;

			if (obj.bgh>360 && ader==1){obj.bgh=0;}  //wrap uper limit
			if (obj.bgh<0 && ader==-1){obj.bgh=360;}  // lower limit

			obj.bgs =obj.bgs+sader;
			if (obj.bgs>100){obj.bgs=100;}  //stop at uper limit
			if (obj.bgs<0){obj.bgs=0;}	// lower limit

			obj.bgl =obj.bgl+lader;
			if (obj.bgl>100){obj.bgl=100;}  //stop at uper limit
			if (obj.bgl<0){obj.bgl=0;}	// lower limit
			h =obj.bgh;		s =obj.bgs ;		l =obj.bgl ;

			obj.style.backgroundColor = "hsl("+h+","+s+"%,"+l+"%)";

		document.getElementById("hexColor").value =cssHex(obj.style.backgroundColor);
			document.getElementById("displayInfo").innerHTML ="hsl("+obj.bgh+ " "+ obj.bgs +" "+ obj.bgl+")";

		}
	}else{
		clearInterval(obj.timer);
		obj.timer=null;
	}

}

function getChecked(){

	radios = document.getElementsByName("change");

	if (radios[0].checked){rtValue = 1
	}else{rtValue =2}
	return rtValue;
}


function startHSL(obj){

	if(obj.th==null){objstyle = document.defaultView.getComputedStyle(obj, "");}else{objstyle =obj;}		// get styles\

	fvalue= objstyle.color;							// txt color set RGB
	obj.style.color=fvalue;
	tvalue= fvalue.split(",")
	tr = parseInt(tvalue[0].slice(4,tvalue[0].length));
	tg = parseInt(tvalue[1]);
	tb = parseInt(tvalue[2]);
	if (!tr){tr=0;}		//---------------------------------------------// fix any errors
	if (!tg){tg=0;}
	if (!tb){tb=0;}
	txtHSL = rgbToHsl(tr, tg, tb);	//--------------------------------			// Txt HSL Values
	obj.th =txtHSL[0];	obj.ts =txtHSL[1];	obj.tl =txtHSL[2];					// Store HSL	th	ts	tl

	fbgvalue= objstyle.backgroundColor;					// Background color set RGB
	obj.style.backgroundColor=fbgvalue;
	bgvalue= fbgvalue.split(",")
	bgr = parseInt(bgvalue[0].slice(4,bgvalue[0].length));
	bgg = parseInt(bgvalue[1])
	bgb = parseInt(bgvalue[2])
	if (!bgr){bgr=0;}		//-------------------------------------------// fix any errors
	if (!bgg){bgg=0;}
	if (!bgb){bgb=0;}
	bgHSL = rgbToHsl(bgr, bgg, bgb);		//-----------------------------		// Bground HSL Values

	obj.bgh =bgHSL[0];	obj.bgs =bgHSL[1];	obj.bgl =bgHSL[2];					// Store HSL	th	ts	tl


}

function cssHex(values){			// Returns Hex Color  based on RGB stored in a variable
							// or being sent in the form of 	obj.style.backgroundColor /obj.style.color

	var value= values.split(",")
	r = parseInt(value[0].slice(4,value[0].length));
	g = parseInt(value[1])
	b = parseInt(value[2])
	if (!r ){r=0;}		// if value color isnt asigned set to black #000000
	if (!g ){g=0;}
	if (!b){b=0;}
	zero="0"
	r = r.toString(16);
	g = g.toString(16);
	b= b.toString(16);
	if (r.length==1){r = zero.concat(r);}
	if (g.length==1){g = zero.concat(g);}
	if (b.length==1){b = zero.concat(b);}
	Hcol = "#"+r+""+g+""+b;

	idV = document.getElementById("getId").value;				//get id from input box
	obj = document.getElementById(idV);
	return Hcol;
}


function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;

    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
 h =parseInt(h*360);
 s =parseInt(s*100);
 l =parseInt(l*100);
    return [h, s, l];
}

function getObj(){

	idV = document.getElementById("getId").value;				//get id from input box
	obj = document.getElementById(idV);					// lookup id of obj
	if (obj!=null){
		return obj;
	}else{
		alert("Obj "+document.getElementById("getId").value+" failed to load Check Css For Id");
		alert("Item wil defult to textBox");
		document.getElementById("getId").value = "colCtrlBox";
		getObj();
		return obj;
	}
	
}
Html code:
Code:
<html>
<head>
	<title>Edit Background and text color by Id</title>
	<link rel="icon" type="image/x-icon" href="favi.ico">
	<link rel="stylesheet" type="text/css" href="Combind.css">
	<script type ="text/javascript"  src="Combind.js"></script>
<style>

</style>
</head>
<body>



<div id ="fadethis" onmouseover="resetOpacit(this)" onmouseout="fadeOut(this)" >This Is a moving boX<br>
<input type="button" onclick="enableMovers(this)" value="Move" )" />
	<div id ="divLeft" name="moveCtrl"	onmouseover="moveLeft(document.getElementById('fadethis'),300)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
	<div id ="divRight" name="moveCtrl"	onmouseover="moveRight(document.getElementById('fadethis'),300)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
	<div id ="divUp" name="moveCtrl"	onmouseover="moveUp(document.getElementById('fadethis'),250)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
	<div id ="divDown" name="moveCtrl" 	onmouseover="moveDown(document.getElementById('fadethis'),250)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
<!----------------------------------------------------------------------------------------------------------------------------------------------->
<div Id="colCtrlBox">
	      Item Id: <input id = "getId" class = "fltEdtCtrl" value="edtBox" type="text" name="edtCtrlId" />
	      Change Amount:	<input id = "getAmount" name="edtCtrlAmount" class = "fltEdtCtrl" type="text" value="10" />
<p id="displayInfo">Info here:</p>
<table Id="colCtrl">

	<tr>
		<td>	<input type="button" value="H +" onclick="hIncrease()" /></td>
		<td>	<input type="button" value="H -" onclick="hDecrease()"/> </td>
		<td>	<input type="button" value="Dark" onclick="lDecrease()"/></td>
		<td>	<label for="textCol">Text </label> 		<input type="radio" id ="textCol" name="change" value="text" checked/></td>
		<td>	<label for="backCol"> Background </label> 	<input type="radio" id ="backCol" name="change" value="background" /></td>
<td></td>
	</tr>
	<tr>
		<td>	<input type="button" value="S +" onclick="sIncrease()"  /></td>
		<td>	<input type="button" value="S -" onclick="sDecrease()" /></td>
		<td>	<input type="button" value="Light" onclick="lIncrease()"/></td>  
		<td colspan="3"> <label for="hexColor">Hex color Is </label><input type="text" id="hexColor" value=""/><td/>
	</tr>

</table>
</div>
</div>

</body>
</html>
Lastly the css file:
Code:
	#fadethis{
		position:absolute;
		left:1px;		top:1px;
		width:auto;		height:auto;
		background-color:#ff159c;
		opacity:0.05;
	}	
	#divLeft{
		left:-80;		top:-80px;
		width:80;		height:340;
		opacity:0;
	}
	#divRight{
		left:390;		top:-80px;
		width:80;		height:340;
		opacity:0;
	}

	#divUp{
		top:-80px;
		width:430;		height:80;
		opacity:0;
	}

	#divDown{
		top:180px;	left:-40;
		width:470;		height:80;
		opacity:0;

	}
	#divDown,#divUp,#divRight,#divLeft{
		position:absolute;
		background-color:#adcbff;
}
#getId{width:7em;}
#getamount{width:7em;} 
#colCtrl{ Top:50; left:120;}
#colCtrlBox{
 
	top:40; 	left:40;
	width:auto;	height:auto;
	background:hsl(210,65%,75%);	
	border-style:outset;
}
#edtBox{
	position:absolute;
	top:300;		left:400;
	height:200;	width:200;
	background:#bbff2f;	

}
.varholder{
	color:hsl(209, 64%, 54%);
	background:#bbff2f;	
}
Some of the java script calls could have been minamized by customizing one function to do all moves or all color changes, by taking input at the html side.
I gone do that another time im just happy to finish this Much in 4 days.
Im only new to programming so there was a lot of gramatic errors and hours of searching for them.

if some one could write a script that will automaticly insert or create the Html part would love the code.