Colr.org has the ability to generate random colors from an image that you can load. I looked at the code and wondered why only one hundred randomly selected colors were loaded into the script, and I have now realized why.

There is a lot of data in image.

My own attempt at getting colors from images is a lot less random. You can hover over the image to get the color value for the pixel pointed at. It’s a nice feature, but it has draw backs. For one, it is really, really slow. Opera is the slowest and Firefox will throw ’script unresponsive’ warnings at the user (even though it’s just taking its time and will respond). Nevertheless I had fun making this. It works, and you can use it to get the RGB values from JPEG and PNG file types. It loads colors for GIF file types, but I’ve seen some inconsistency in it. There’s nothing to be done about it, I blame the GD Graphics Library, which only recently started to support gifs again.

So how do I do it? The image is loaded into PHP which uses the PHP image functions to get information for colors, including the color values for pixels. PHP records all the colors and their locations (for tens to hundreds of thousands of pixels), stores it in a string and sends it to JavaScript via AJAX. JavaScript then splits the string into several arrays, and associates rgb values with locations in a big multidimensional object. As the mouse hovers over the image, JavaScript uses onmousemove to get the X and Y position of the mouse pointer, calculates where it is above the image, and uses the location to retrieve the RGB values. JavaScript then converts the RGB values into a webcolor.

So there you go! Hopefully you’ll have some use for it. I know I will.

I finally got code to format correctly in my Word Press configuration, so I figure I should start putting some code down. I’m going to begin by sharing my RGB and HSL conversion formulas that I converted from easyrgb.com formulas into JavaScipt functions for my color tool.

Before I begin, I have to share these required functions that are necessary in order for the conversion to work:
[js]

function min_three_args(argOne,argTwo,argThree){

var minValue;

minValue = Math.min(argOne,argTwo);

minValue = Math.min(minValue,argThree);

return minValue;

}

function max_three_args(argOne,argTwo,argThree){

var maxValue;

maxValue = Math.max(argOne,argTwo);

maxValue = Math.max(maxValue,argThree);

return maxValue;

}
[/js]
They just figure out which of three arguments has the maximum value, something not native to JavaScript.

Here are the conversion functions. These two functions convert HSL into RGB. HSL values will range from 0 to 1. RGB values will vary from 1 to 255. The return will be an associative array. If you did returnR = hsl_to_rgb(R,G,B); then returnR[’b'] would have the blue value.
[js]

function hsl_to_rgb(H,S,L){

//formula from easyrgb.com converted to JavaScript by me

var R;

var G;

var B;

var var_1;

var var_2;

var returnObject;

returnObject = new Object;

if( S == 0 ){

//HSL values = 0 ? 1

R = L * 255; //RGB results = 0 ? 255

G = L * 255;

B = L * 255;

}else{

if( L < (1/2) ){

var_2 = (L * ( 1 + S ));

}else{

var_2 = (( L + S ) - ( S * L ));

}

var_1 = ((2 * L) - var_2);

R = 255 * Hue_2_RGB( var_1, var_2, (H + ( 1 / 3 )) );

G = 255 * Hue_2_RGB( var_1, var_2, H );

B = 255 * Hue_2_RGB( var_1, var_2, (H - ( 1 / 3 )) );

}

returnObject['r'] = R;

returnObject['g'] = G;

returnObject['b'] = B;

return returnObject;

}

function Hue_2_RGB( v1, v2, vH )

{

//formula from easyrgb.com converted to JavaScript by me

//Function Hue_2_RGB

if( vH < 0 ){

vH += 1;

}

if( vH > 1 ){

vH -= 1;

}

if(( 6 * vH ) < 1 ){

return ( v1 + ( v2 - v1 ) * 6 * vH );

}

if(( 2 * vH ) < 1 ){

return v2;

}

if(( 3 * vH ) < 2 ){

return ( v1 + ( v2 - v1 ) * ( ( 2 / 3 ) - vH ) * 6 );

}

return v1;

}
[/js]

This next function converts RGB to HSL. RBG values will be in decimal and range from 1 to 255. HSL values will vary from 0 to 1. The return will be an associative array. If you did returnR = rgb_to_hsl(R,G,B); then returnR['h'] would have the hue value.
[js]

function rgb_to_hsl(R,G,B){

//formula for conversion from easyrgb.com converted to JavaScript by me

var var_R;

var var_G;

var var_B;

var H;

var S;

var L;

var del_R;

var del_G;

var del_B;

var returnObject;

returnObject = new Object;

var_R = ( R / 255 ); //Where RGB values = 0 ? 255

var_G = ( G / 255 );

var_B = ( B / 255 );

var_Min = min_three_args( var_R, var_G, var_B ); //Min. value of RGB

var_Max = max_three_args( var_R, var_G, var_B ); //Max. value of RGB

del_Max = (var_Max - var_Min) //Delta RGB value

L = (( var_Max + var_Min ) / 2);

if ( del_Max == 0 ) //This is a gray, no chroma...

{

H = 0; //HSL results = 0 ? 1

S = 0;

}else{

//Chromatic data...

if( L < (1/2) ){

(S = del_Max / ( var_Max + var_Min ));

}else{

(S = del_Max / ( 2 - var_Max - var_Min ));

}

del_R = (((( var_Max - var_R ) / 6 ) + ( del_Max / 2 )) / del_Max);

del_G = (((( var_Max - var_G ) / 6 ) + ( del_Max / 2 )) / del_Max);

del_B = (((( var_Max - var_B ) / 6 ) + ( del_Max / 2 )) / del_Max);

if( var_R == var_Max ){

H = del_B - del_G;

}else if ( var_G == var_Max ){

H = (( 1 / 3 ) + del_R - del_B);

}else if ( var_B == var_Max ){

H = (( 2 / 3 ) + del_G - del_R);

}

if( H < 0 ){

H += 1;

}

if( H > 1 ){

H -= 1;

}

}

returnObject[’h'] = H;

returnObject[’s’] = S;

returnObject[’l'] = L;

return returnObject;

}
[/js]

Here is some stuff I wrote to quickly convert a hexidecimal web color into an associative array with corresponding HSL and RGB values. The web color parameter may or may not be prefixed with a hash (#). Note this returns an associative array, and the keys are capitalized. So much for consistency, I know. All the following functions require the previously shown functions.

[js]

function get_color_vals(webColor){

//get R,G,B,H,S,L from webcolor (as in #ffffff, or just ffffff).

//returns associative array/object that includes the original webColor with a #

var returnObj = new Object;

var rawColor;

webColor = String(webColor);

if((webColor.substr(0,1)) == “#”){

returnObj[’webColor’] = webColor;

rawColor = webColor.substr(1);

}else{

returnObj[’webColor’] = “#” + webColor;

rawColor = webColor;

}

//converting #000000 hex rgb to decimal values:

returnObj[’R'] = parseInt(rawColor.substr(0,2),16);

returnObj[’G'] = parseInt(rawColor.substr(2,2),16);

returnObj[’B'] = parseInt(rawColor.substr(4,2),16);

hslObject = rbg_to_hsl(returnObj[’R'],returnObj[’G'],returnObj[’B']);

returnObj[’H'] = hslObject[’h'];

returnObj[’S'] = hslObject[’s’];

returnObj[’L'] = hslObject[’l'];

return returnObj;

}
[/js]

This code will turn HSL values ranging from 0 to 1 into a hexdecimal web color. It does not prefix a hash.

[js]
function hsl_to_webColor(h,s,l){

//converting HSL to RGB webcolor

//does not prefix a ‘#’

var rgbObject;

var rgb;

var r_dec;

var g_dec;

var b_dec;

var r_hex;

var g_hex;

var b_hex;

var concat_pad = “0″;

rgbObject = hsl_to_rgb(h,s,l); //calling function with converted formula from easyrbg.com

r_dec = Math.abs(Math.floor(rgbObject[’r']));

g_dec = Math.abs(Math.floor(rgbObject[’g']));

b_dec = Math.abs(Math.floor(rgbObject[’b']));

if(r_dec > 255){

r_dec = r_dec - 255;

}else if(r_dec < 0){

r_dec = 0;

}

if(g_dec > 255){

g_dec = g_dec - 255;

}else if(g_dec < 0){

g_dec = 0;

}

if(b_dec > 255){

b_dec = b_dec - 255;

}else if(b_dec < 0){

b_dec = 0;

}

r_hex = r_dec.toString(16); //converting to hex

if(r_hex.length < 2){

r_hex = concat_pad.concat(r_hex);

}

g_hex = g_dec.toString(16); //converting to hex

if(g_hex.length < 2){

g_hex = concat_pad.concat(g_hex);

}

b_hex = b_dec.toString(16); //converting to hex

if(b_hex.length < 2){

b_hex = concat_pad.concat(b_hex);

}

rgb = r_hex + g_hex + b_hex;

return rgb;

}
[/js]

This next function is pretty cool, I think. It returns 10 blended colors from two hexidecimal web colors (#ffffff format). You can play with it to increase or decrease the number of blended colors you get. There's a bit of a hack in there, so when you do play with it, take note that I fudged the math to return 10 colors, it's not exact science, so I really mean that you'll have to 'play' with it if you want to change it.

[js]

function get_gradients(webColor1,webColor2){
//I wrote this thing. But...you can have it. ;\
//returns an array of 10 colors that are the intermediary colors
//between webColor1 and webColor2

var webColorObj1;
var webColorObj2;
var temph1;
var temps1;
var templ1;
var temph2;
var temps2;
var templ2;
var difference;
var quotient;
var newH = new Array();
var newS = new Array();
var newL = new Array();
var returnColors = new Array();

webColorObj1 = get_color_vals(webColor1);
webColorObj2 = get_color_vals(webColor2);

//hues
temph1 = Math.floor(webColorObj1['H'] * 255);
temph2 = Math.floor(webColorObj2['H'] * 255);
difference = Math.abs(temph1 - temph2);
if(difference == 0){
for(i=0;i<10;i++){
newH[i] = temph1;
}
}else{
quotient = Math.floor(difference/(10 + (1/2)));
if(temph1 < temph2){
for(i=0;i<10;i++){
newH[i] = Math.floor(temph1 + (quotient * (i + 1)));
}
}else{
for(i=0;i<10;i++){
newH[i] = Math.floor(temph1 - (quotient * (i + 1)));
}
}
}
temps1 = Math.floor(webColorObj1['S'] * 255);
temps2 = Math.floor(webColorObj2['S'] * 255);
difference = Math.abs(temps1 - temps2);
if(difference == 0){
for(i=0;i<10;i++){
newS[i] = temps1;
}
}else{
quotient = Math.floor(difference/(10 + (1/2)));
if(temps1 < temps2){
for(i=0;i<10;i++){
newS[i] = Math.floor(temps1 + (quotient * (i + 1)));
}
}else{
for(i=0;i<10;i++){
newS[i] = Math.floor(temps1 - (quotient * (i + 1)));
}
}
}

//lightness
templ1 = Math.floor(webColorObj1['L'] * 255);
templ2 = Math.floor(webColorObj2['L'] * 255);
difference = Math.abs(templ1 - templ2);
if(difference == 0){
for(i=0;i<10;i++){
newL[i] = templ1;
}
}else{
quotient = Math.floor(difference/(10 + (1/2)));
if(templ1 < templ2){
for(i=0;i<10;i++){
newL[i] = Math.floor(templ1 + (quotient * (i + 1)));
}
}else{
for(i=0;i<10;i++){
newL[i] = Math.floor(templ1 - (quotient * (i + 1)));
}
}
}

//put it all together
for(i=0;i<10;i++){
temph1 = (newH[i]/255);

temps1 = (newS[i]/255);

templ1 = (newL[i]/255);

returnColors[i] = "#" + hsl_to_webColor(temph1,temps1,templ1);
}
return returnColors; //oh yes, I rock. <3

}

[/js]

I don't gurantee anything will work or that I will support it or that if you use this your browser wont explode and if you choose to use this code you agree to do so at your own risk and not sue me, etc.. The conversions were from easyrgb.com, make sure you go check out their informative site.

Feel free to email me (bjorn [at] ambientchill [dot] com) with questions if you have any.

Yes my code is fugly. There are probably some lines in there that I just used for debugging, you might want to remove those, although they should be inactive. It was written by me for me, and I’m just sharing it out of the goodness of my heart so don’t whine.

The traffic on the Color Tool has cooled. The peak was a week a go with 11k users. Now it’s down to just over 1k unique visitors every day. That’s still a lot (for what I’m used to), but I don’t see many people saving their schemes. So I have begun logging when people change layouts, and to what layout they change to. It just tallies up how many times layouts were viewed, nothing else. The truth is in the numbers: Since yesterday so far I’ve had over 500 visitors, my log has shown me that layouts were changed as thus -

Last I viewed it last night:

Default - 11 ||| Text - 6 ||| Box - 6 ||| Gradient - 5 ||| Browser - 10 ||| Header - 4 ||| List - 4 ||| Image - 2 ||| stuff

This morning (538 users later):

Default - 32 ||| Text - 26 ||| Box - 21 ||| Gradient - 24 ||| Browser - 41 ||| Header - 8 ||| List - 9 ||| Image - 8 ||| stuff

Kind of underwhelming, I suppose most people are only gawking…

PS I added some more layouts: headers, lists, and one where you can load an image to help you select colors.

You can now view saved colors, just click on the ‘browse saved color scheme’ or change the layout in the options section by the save form on my Color Tool. You can sort by when submitted, by name, or by views, each ascending or descending. The browser is paginated (I hope I’m using that word correctly), and there are 8 color schemes per page. Let me know if you find a bug or have comments or anything. In a few minutes there will be a ‘random scheme’ link and some links to other color tools and then that will be it for a while. School calls you know.

I’ve added a feature that allows users of the Color Tool I’ve made to submit their schemes to colr.org. There’s no requirement to save the colors on the Color Tool first. You can just select, and submit. The link to effect the action is in the new consolidated ‘options’ section above the save form.

On my to do list:
Add more layouts.
Add a browse saved colors feature.
And more as I think of it..

I’ve added the ability to change layouts on the Color Tool. There’s a little drop down menu on the right, from which different layouts can be selected, right now there are only two options, but I will add more as I have time.