///Color Code Converter

Color Code Converter

Color Code Converter

This article gives you a color code converter — RGB to hexadecimal, and the other way around.

It is one of the easiest to use color code converters on the Internet.

This one has what many don’t, a color swatch representing the latest converted color code. And not just a swatch, but three swatches so colors can be visually compared with each other.

The demonstration and code download page is at http://willmaster.com/a/26t/pl.pl?art262

Give it a try. If you like it, download the code.

The Color Code Converter can be put on a web page for use by your site visitors.

If you prefer a private installation, you might put it into a popup linked from your personal portal page. (See http://willmaster.com/possibilities/wmptips/tip031014.shtml for a “Personal Portal Page” tip.)

Alternatively, bookmark the demonstration page and use it whenever you need a converter or to compare colors.

The converter has two buttons, one to convert to hexadecimal characters and one to convert to RGB.

There is also a checkbox that, when checked, will convert the codes as you type. It knows which code you’re typing and converts it to the other automatically.

The reason for both methods, manually clicking a button and the auto-convert checkbox, is that some browsers don’t do the auto-convert very well. The conversion is okay, but tabbing from one code field to another can require manual character selection and replacement instead of automatically replacing with whatever is typed. It has to do with the onkeyup() JavaScript command. On some browsers, the command intercepts tab and other non-printable/command keys as if they were normal keyboard printable character keys.

The form fields immediately below the color swatches are hexadecimal color codes for copying and pasting into documents, such as the aforementioned web page source code.

The hexadecimal code is not preceded with a “#” character. If you prefer to have the character for copying with the hexadecimal code, modify the JavaScript as below:

The last function in the demonstration JavaScript is ConvertASection(). Four lines from the bottom of that function’s source code is a line adding the “#” character to the hexadecimal code.

In order to print the “#” with the hexadecimal number in the form fields below the colors swatches, the line needs to be switched with the line immediately above it in the function’s source code. Unfortunately, the line above it is too long to print in this article. But I believe you’ll recognize it even with the ellipsis to indicate missing characters.

So what you do is switch these two lines:

eval('document.ColorCodeConversionForm.hh ... hgbval + "'");
hgbval = '#' + hgbval;

You’ll end up with:

hgbval = '#' + hgbval;
eval('document.ColorCodeConversionForm.hh ... hgbval + "'");

A live implementation of the converter, with the above edits, is used at one of our affiliate text ad generators, http://willmaster.com/wmaf/AdCodeGenerator.shtml

If you wish to learn from the JavaScript, make a copy and play. Try this and that and see what happens.

Once you have a satisfactory modification, remember to test it on all the different browsers you have access to. IE5 for Mac OS 9 is especially cantankerous when it comes to certain JavaScript functions and constructs. That browser is one reason I rarely use regular expressions in JavaScript. It chokes on the code.

The color code convert can be used to convert from one format to another, to do trial and error until the correct color is displayed in the swatch, and to compare a swatch’s color with those in other swathes.

2010-05-26T11:33:30+00:00 April 18th, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment