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!... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<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
    -->
Step 2: Copy & Paste HTML code below in your BODY section
HTML
Code:
<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
    -->