The JavaScript Source: Miscellaneous : Background Color Changer 2

Home

Miscellaneous

Background Color Changer 2

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!

The JavaScript Source: Miscellaneous : Background Color Changer 2

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.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 type="text/javascript" src="colorChange.js"></script>

<div style="width: 300px; margin-left: 30%; 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>

Did you use this script? Do you like this site? Please link to us!

Add a comment, suggestion, or correction

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

Whitepapers and eBooks

Adobe Article: Adobe Helps PHP Developers Create Rich Internet Applications
Adobe Article: Java Developers Finding a Home at Adobe Flex
IBM Articles: A Smarter Business Needs Smarter Technology
Intel Xeon Processor Increases Server Efficiency and Capabilities
Intel Tech Brief: Automated Energy Efficiency for the Intelligent Enterprise
Oracle Whitepaper: Using Oracle In-Memory Database Cache to Accelerate the Oracle Database
Oracle Whitepapers - Innovation for IT Leaders
Avaya Article: Communication-Enabled Mashups--Empowering Both Business Owners and IT

Internet.com eBook: IT Manager's Guide to Social Networking
Internet.com eBook: Get Ready for Windows 7
Microsoft Article: Expression Web 3--New Features for PHP Developers
Whitepapers: Manage Your Business Infrastracture with IBM
Whitepaper: Maximize Your Storage Investment with HP
Internet.com eBook: Becoming a Better Project Manager
Microsoft Article: Stress Free and Efficient Designer/Developer Collaboration
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Webcast: Connecting PHP to Microsoft Technologies
Video: Microsoft Partner Program Benefits
Video: Windows Azure Debugging Tips
SAP BusinessObjects Webcast: Unlock the Power of Reporting with Crystal Reports

IBM Webcast: Speed Business Innovation with Reduced Cost and Risk
Video: Deploy Applications on Windows Azure
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

Downloads & Free Trials: Microsoft's New Efficiency Resource Center
Get the Windows 7 SDK
Free Trial: Red Gate SQL Backup Pro 6

Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Virtual Lab: Migrating PHP Applications
Enabling Web Slices and Accelerators with a PHP Site
Internet.com Hot List: Get the Inside Scoop on the Hottest IT and Developer Products

All About Botnets
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES