UnleashedCreativity.net
Postings on Mondays, Wednesdays, and Fridays or When-I-Have-Time-days

Login

username:
password:

Last 10 entries


Tags

.net 3d art blog c# coding college computers editorial entertainment firefox food freeware gaming hardware hdtp hiking humor ide japan japan, javascript linux mac mailbox milestone misc. mods momoiwa, mono movie nintendo philosophy php politics rant rebun review science software technology test time ucr wakkanai windows work wormholeftp 日本


Affiliates

  • Narcissism Incorporated
  • Wolfram Studios
  • KaleNet Web Design
  • OffTopic Productions
  • Deus Ex: High Definition Texture Project
  • The Nameless Mod


Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 United States License.

Converting an RGB value to a Hexadecimal value with Javascript

Posted on: Mon Aug 13, 2007 12:10 PM

I have to laugh hysterically to myself every time I even think about writing something new on UC. I laugh not because I've lost my sanity, but because I realize that I have very little information to benefit others. I wrack my brain trying to think up a decent, interesting topic and pull up nothing; after all, how interesting is an 8am-5pm job, Mondays through Fridays, and a weekend spent playing games or browsing the internet? I don't even like reading about it, and I live it!

Today's a little different, though. I managed to find a bit of code from my most recent project that I thought might help others should they come across the same problem as me.

What problem am I talking about? Why, the problem of finding a decent way to convert RGB color strings to Hexadecimal color strings!

I needed a function that could read color strings given by a browser and return those colors as Hex if the browser returned RGB. It took a bit of searching and piece-mealing, but I managed to come up with a function that gets the job done, and here it is:

function RGBtoHex(rgb)
	{
	if(rgb.search(/#/) > -1)
		{
		return rgb;
		}
	else
		{
		rgb = rgb.substr(4, rgb.length - 5);
		rgb = rgb.split(", ");
		
		r = parseInt(rgb[0]).toString(16).toUpperCase();
		g = parseInt(rgb[1]).toString(16).toUpperCase();
		b = parseInt(rgb[2]).toString(16).toUpperCase();
		
		if(r.length == 1) { r = "0"+r; }
		if(g.length == 1) { g = "0"+g; }
		if(b.length == 1) { b = "0"+b; }
		
		return "#"+r+g+b;
		}
	}


The function itself is pretty simple to use; send a color string (either "rgb(r, g, b)" or "#XXXXXX") to the function RGBtoHex and you will get back a hex string. Hex strings are automatically detected and returned; the true magic happens when you send an RGB string through.

First, the function removes the "rgb()" from the string. Then, an array is created that houses the Red, Green, and Blue values.

From there, each number is parsed into its appropriate Hex value via toString(16), then uppercased to match Hexadecimal formatting. If only one character is returned during this process (for example, if Red equals 0 before being converted to Hex, it will return "0"), then the string requires a zero (0) in front of it.

Finally, the function takes the three parts of the RGB string, lines them up in order, and places a pound sign in front of it, and voila! A Hexadecimal string from an RGB string!

This is the cleanest I could make the code (sans taking out all the line breaks), and in fact this is the second version of the original function; I find that over time, all my functions get refined, and this one was no exception!

I've got a large web-based project that I'm working on in my free time, and though it still has a while before it is ready to be released, stay tuned; I'll be sure to drop a link here when everything is ready to go!

Until next time, ladies and gents!


Leave a Comment









EVERYTHING on this site is © Matthew Miller, 2005-2010, so don't friggin' touch