RGB/Hex Value Converter (PHP/jQuery/Javascript) Tutorial/Code

RGB/Hex Value Converter

PHP jQuery Javascript
Browse Category | Saturday, August 4, 2012 | William Thomas

Description: Converts the RGB color to its hex value using PHP & jQuery/Javascript.

PHP:


<?php

/*CONVERTS R/G/B TO HEX VALUE*/

//CHARACTERS OF THE "HEX ALPHABET"
$hex_alpha = "0123456789abcdef";
$n = strlen($hex_alpha); //NUMBER OF ELEMENT OF THE ARRAY ABOVE
$hex_combos = array(); //BLANK ARRAY VARIABLE (WILL BE USED TO MAKE THE ARRAY OF ALL COMBINATIONS OF LETTERS AND NUMBERS)

for($i=0; $i<$n*$n; $i++){
    $v = floor($i/$n); //REPEATS ARRAY VERTICALLY (0,0,0,0,0,0; 1,1,1,1,1,1)
    $h = $i%$n; //REPEATS ARRAY HORIZONTALLY (0,1,2,3,4,5; 0,1,2,3,4,5)
    
    $hex_combos[$i] = $hex_alpha[$v].$hex_alpha[$h]; //PUTS THE 2-CHARS OF THE HEX-VALUE TOGETHER
}

$r = 50;
$g = 186;
$b = 237;

$hex_value = $hex_combos[$r].$hex_combos[$g].$hex_combos[$b]; //CONVERTS FROM R/G/B TO HEX VALUE
echo $hex_value; //FULL HEX VALUE
echo '<br>';
echo '<div style="background:#'.$hex_value.'; width: 20px;height:20px;"></div>';
echo '<br><br>';

/*CONVERTS HEX VALUE TO R/G/B*/

$hex_value = '32baed'; //HEX VALUE
$reg_hex = '/^[0-9a-f]{1,6}$/'; //PATTERN TO VALID HEX VALUE
$r_g_b = array("R", "G", "B"); //LETTERS TO GO NEXT TO THEIR RESPECTIVE CONVERSIONS
$x = array(); //ARRAY TO CONTAIN THE HEX VALUE IN 3 GROUPS OF 2 Ex: (32 ba ed), EACH WILL BE CONVERTED TO ITS R/G/B EQUIVELANT

//IF HEX VALUE IS VALID
if(preg_match($reg_hex, $hex_value)){
    //"FOR LOOP" TO PUT THE 2-CHAR COMBO TOGETHER
    for($i=0, $j=0; $i<strlen($hex_value)/2, $j<strlen($hex_value); $i++, $j+=2){
        $hex_split = substr($hex_value, $j, 2); //PARTIAL THE HEX VALUE
        $x[$i] = $hex_split; //PARTIAL THE HEX VALUE INSERTED IN ARRAY WITH ITS OTHER PARTS
        
        $rgb = array_search($x[$i], $hex_combos); //CONVERTS FROM HEX VALUE TO R/G/B
        echo $r_g_b[$i]. ':' .$rgb.' '; //R/G/B AND THEIR VALUES
        if($i==0){
            $rgb_bg .= $rgb;
        } else {
            $rgb_bg .= ','.$rgb;
        }
    }
    echo '<div style="background:rgb('.$rgb_bg.'); width: 20px;height:20px;"></div>';
} else {
    echo 'Invalid Hex Value';
}

?>

jQuery/Javascript:

/*MAKES ARRAY FOR ALL HEX VALUE COMBINATIONS*/

var hex_alpha = "0123456789abcdef"; //CHARACTERS OF THE "HEX ALPHABET"
var n = hex_alpha.length; //NUMBER OF CHARACTERS OF THE "HEX ALPHABET"
var hex_combos = []; //BLANK ARRAY VARIABLE (WILL BE THE ARRAY OF ALL COMBINATIONS OF HEX VALUES)

//ARRAY PROCESSED HERE

for(i=0; i<(n*n); i++){

//REPEATS EACH CHARACTER VERTICALLY Ex:(0,0,0,0,0,0; 1,1,1,1,1,1)

var v = Math.floor(i/n);

//REPEATS EACH CHARACTER HORIZONTALLY Ex:(0,1,2,3,4,5; 0,1,2,3,4,5)

var h = i%n;

hex_combos[i] = hex_alpha[v]+hex_alpha[h]; //PUTS 2 CHARACTERS AT A TIME IN THE ARRAY

}

/*CONVERTS R/G/B TO ITS HEX VALUE*/

function rgb_to_hex(){

var l = $(".colors").length; //NUMBER OF R/G/B INPUTS
var hex_value = ""; //BLANK VARIABLE (WILL BE THE HEX VALUE)

//"FOR LOOP" TO MAKE ARRAY OF THE HEX VALUE SPLIT IN 3 PIECES

for(i=0; i<l; i++){

var color = $(".colors:eq("+i+")").val();

//FULLY CONVERTED HEX VALUE

if(color){

hex_value += hex_combos[color];

} else {

hex_value += "00"; //SET TO "00" IF NO INPUT

}

}

$("#hex").val(hex_value); //DISLPAYS IN THIS ELEMENT IN HTML
$("#block").css({"background-color":hex_value}); //BLOCK FILLED WITH THE COLOR

}

/*CONVERTS HEX VALUE TO ITS R/G/B*/

function hex_to_rgb(hex_value, l){ //(HEX VALUE, NUMBER OF CHARACTERS) VARIABLES FROM THE INPUT FIELD

var p = /^([0-9a-f]{1,6})$/i; //PATTERN FOR VALID HEX VALUE

//IF THE HEX VALUE ISN'T EMPTY...

if(hex_value){

//IF HEX VALUE IS VALID...

if(hex_value.match(p)){

//IF HEX VALUE IS < 6 CHARACTERS, ZEROS WILL BE FILLED FOR THE # OF CHARACTER < 6

if(l<6){

for(i=1; i<=(6-l); i++){

hex_value += "0";

}

}

var x = []; //ARRAY TO SPLIT THE HEX VALUE IN 3 GROUPS OF 2 Ex: (32 ba ed), EACH WILL BE CONVERTED TO ITS R/G/B EQUIVELANT

//"FOR LOOP" TO PUT EACH GROUP OF 2 CHARS IN THE "x" ARRAY

for(i=0, j=0; i<l/2, j<l; i++, j+=2){

x[i] = hex_value.substr(j, 2);

}

//IF THERE ARE < 6 CHARACTERS OF THE HEX VALUE...

if(l<6){

for(i=x.length; i<=2; i++){

x[i] = "00"; //0'S WILL BE CONVERTED IN ITS PART OF THE R/G/B

}

//"FOR LOOP" TO CONVERT FROM HEX VALUE TO R/G/B

for(i=0; i<hex_combos.length; i++){

for(j=0; j<x.length; j++){

//HEX VALUE FROM STRING IS FOUND IN FULL ARRAY OF COMBOS AND GETS ITS INDECES WHICH ARE THE R/G/B

if(x[j]==hex_combos[i]){

$(".colors:eq("+j+")").val(i); //R/G/B VALUES CONVERTED IN THEIR RESPECTIVE FIELDS

}

}
$("#m").html(""); //CLEARS THE MESSAGE IF THE HEX VALUE IS VALID

} else {

hex_value = "ffffff"; //IF HEX VALUE IS INVALID, THE VALUE WILL BE THIS (WHITE)
$("#m").html("Invalid Hex Value"); //THE MESSAGE

}

}
$("#block").css({"background-color":hex_value}); //BLOCK FILLED WITH THE COLOR

}

</script>

<style>

/*COLOR WILL BE SHOWN IN THIS BLOCK*/

#block {

height: 50px; width: 50px;

}

</style>

</head>
<body>

Views: 389 Downloads: 3

(Optional in case you want a reply)

0 Comments

Email:
Password:
	Keep me logged in

Email: