« »

Input color codes, either as RGB numbers, or as a 6 character hexadecimal code, then test it to see how it will look on the page. Great for testing color schemes!

Label: Background Color Changer 2

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// Created by: Brett McLean :: http://www.brettbits.com/

var sixteen;
var one;
var red;
var green;
var blue;
var colorCode;
var inputType = "dec";

var ralpha = "0123456789ABCDEF";
var temppos;
var rnumber;

hexArray = new Array();
  hexArray[0] = "0";
  hexArray[1] = "1";
  hexArray[2] = "2";
  hexArray[3] = "3";
  hexArray[4] = "4";
  hexArray[5] = "5";
  hexArray[6] = "6";
  hexArray[7] = "7";
  hexArray[8] = "8";
  hexArray[9] = "9";
  hexArray[10] = "A";
  hexArray[11] = "B";
  hexArray[12] = "C";
  hexArray[13] = "D";
  hexArray[14] = "E";
  hexArray[15] = "F";

rhexArray = new Array();
  rhexArray[0] = "F";
  rhexArray[1] = "E";
  rhexArray[2] = "D";
  rhexArray[3] = "C";
  rhexArray[4] = "B";
  rhexArray[5] = "A";
  rhexArray[6] = "9";
  rhexArray[7] = "8";
  rhexArray[8] = "7";
  rhexArray[9] = "6";
  rhexArray[10] = "5";
  rhexArray[11] = "4";
  rhexArray[12] = "3";
  rhexArray[13] = "2";
  rhexArray[14] = "1";
  rhexArray[15] = "0";


function d2h(number) { //converts a decimal number to hexadecimal
 	sixteen = Math.floor(number/16); //value in the 16s position
 	one = Math.floor(number-(sixteen*16)); //value in the 1s position
 	sixteen = hexArray[sixteen]; //hex representation of the value in the 16s position
 	one = hexArray[one]; //hex respresentation of the value in the 1s position
 	number = sixteen + one; //concatenate string values of hex digits
 	return number;
}

function h2d(number) { //converts hexadecimal numbers to decimal equivalents
 	if(number.substring(0,1) == "F") {
 			sixteen = 15;
 	} else 	if(number.substring(0,1) == "E") {
 			sixteen = 14;
 	} else 	if(number.substring(0,1) == "D") {
 			sixteen = 13;
 	} else 	if(number.substring(0,1) == "C") {
 			sixteen = 12;
 	} else 	if(number.substring(0,1) == "B") {
 			sixteen = 11;
 	} else 	if(number.substring(0,1) == "A") {
 			sixteen = 10;
 	} else {
 		sixteen = eval(number.substring(0,1));
 	}
 	sixteen = sixteen * 16;
 	if(number.substring(1,2) == "F") {
 			one = 15;
 	} else if(number.substring(1,2) == "E") {
 			one = 14;
 	} else if(number.substring(1,2) == "D") {
 			one = 13;
 	} else if(number.substring(1,2) == "C") {
 			one = 12;
 	} else if(number.substring(1,2) == "B") {
 			one = 11
 	} else if(number.substring(1,2) == "A") {
 			one = 10;
 	} else {
 		one = eval(number.substring(1,2));
 	}
 	return sixteen + one; //return sum of these decimal numbers
}

function changeFgColor(number) { //this function receives the background's hexadecimal color code
		//as a parameter, and then returns a suitable font color that would
		//be visible on that background color
 	rnumber = "";
 	for(i=0; i <= number.length-1; i++) {
  		temppos = ralpha.indexOf(number.charAt(i));
  		rnumber = rnumber + rhexArray[temppos];
 	}
 	return rnumber;
}

function changeBgColor() { //this function reads in values from the text fields, parses the text
		//as a color code, and then changes the background color
 	if(inputType == "hex") { //if user has changed the hexadecimal field
  		document.colorform.hextext.value = document.colorform.hextext.value.toUpperCase();
  		if(document.colorform.hextext.value.substring(0,1) == "#") { //if user placed "#" in front of hex color code
   			colorCode = document.colorform.hextext.value.substring(1,7);
  } else {
  			colorCode = document.colorform.hextext.value.substring(0,6);
	 }
		document.colorform.redtext.value = h2d(colorCode.substring(0,2)); //converts to red's decimal value
		document.colorform.greentext.value = h2d(colorCode.substring(2,4)); //converts to red's decimal value
		document.colorform.bluetext.value = h2d(colorCode.substring(4,6)); //converts to red's decimal value
		document.bgColor = colorCode; //change background color
		document.fgColor = changeFgColor(colorCode); //change font color to something readable
		return false; //exit function
	}

	//if program reaches this point, the color code is to be based on inputted decimal values,
	//as opposed to hexadecimal values

	//check red's value range
 	if (eval(document.colorform.redtext.value) > 255 || eval(document.colorform.redtext.value) < 0) {
 		alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
 		return false;
 	}
 	//check green's value range
 	if (eval(document.colorform.greentext.value) > 255 || eval(document.colorform.greentext.value) < 0) {
 		alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
 		return false;
 	}
 	//check blue's value range
 	if (eval(document.colorform.bluetext.value) > 255 || eval(document.colorform.bluetext.value) < 0) {
 		alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
 		return false;
 	}

 	red = d2h(eval(document.colorform.redtext.value)); //convert red's decimal value to hex
 	green = d2h(eval(document.colorform.greentext.value));//convert green's decimal value to hex
 	blue = d2h(eval(document.colorform.bluetext.value)); //convert blue's decimal value to hex

 	colorCode = red + green + blue; //create hexadecimal color code
 	document.bgColor = colorCode; //set background color
 	document.fgColor = changeFgColor(colorCode); //change font color to something readable
 	document.colorform.hextext.value = "#" + colorCode; //rewrite hex's text field with new color code
}

function changeInput(type) {
 	inputType = type; //inputType is to determine whether the user is changing the decimal text fields,
			 //or the hexadecimal text fields
}

function instruct() { //alerts user with instructions
 	alert("Enter a Red, Green, or Blue value of 0 to 255 \nor enter a 6 digit Hex Color Code using numbers 0-9\nand letters A-F then click Change Background.");
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div style="width: 300px; background-color: #fff; color: #00009C; text-align: center; line-height: 1.5em;">
<form name="colorform" onSubmit="changeBgColor(); return false;">

Red: <input type="text" name="redtext" size="3" value="255" onfocus="changeInput('dec')">
Green: <input type="text" name="greentext" size="3" value="255" onfocus="changeInput('dec')">
Blue: <input type="text" name="bluetext" size="3" value="255" onfocus="changeInput('dec')">
<br>
Hex Code: <input type="text" name="hextext" size="7" value="#FFFFFF" onfocus="changeInput('hex')">
<br>
<input type="submit" value="Change Background" style="background-color: #00009C; color: #fff;">
<br>
<input type="button" value="Instructions" onclick="instruct()" style="background-color: #00009C; color: #fff;">
</form>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->