The Super Color Chart Tutorial

This tutorial was written by Hotrats

The
Super ColorChart

Introduction The Super Color Chart is a relatively easy tool to use. It is useful whenever you would like to change the background and text color on your e-mail signature or web page. Instead of plugging hex numbers into your html code and going thru the lengthy process of changing them until you get the one you like, go to the Super Color Chart where you can select a background and text color simultaneously. While you're at it don't forget to choose "link" and "vlink" text colors also. Let's get started. The first thing you need to do is go to The Super Color Chart (Go there now and look around but come back for the rest of the tutorial). There you will see a color chart with 2 buttons below it labeled "TEXT" and "BGCOLOR". Skip over these for now and go down to the "Sample Text" box. After highlighting the box, click return or edit on your keyboard. Delete what is in the box and compose your own fun message. Next, go down to the "Sample Text Size" button and click. Select the font size you wish to view your message in. You should choose the size font that you will be using in your e-mail sig. or web page so that you can get a good feel for how the finished product will look. Now go back up to the buttons for "TEXT" and "BGCOLOR". Let's choose a background color first. Click the "BGCOLOR" button. Go to the color chart and select a color. You do this by using the arrow keys on your keyboard to move around in the chart. When you are over a color you like, click it. The color will show up in the right side of your screen. Don't worry, if you hate the color once you see so much of it just select another color and click.
As as an example, to the right you will see I am using BGCOLOR ="OOOOFF". You can pick your own color this is just for an example.
Ok, let's pick some text colors that look good and most importantly are readable. Click on the "TEXT" button and choose a text color that suits your purposes. For my example lets use white="FFFFFF", black="000000",and a shade of blue="6633FF". Oops can't see the shade of blue real well. Thats all right lets just go a lot lighter.	white="FFFFFF" "black=000000" shade of blue="6633FF"
There that's better. The lighter shade of blue is much easier to read.	white="FFFFFF" black="000000" shade of blue="6633FF" lighter shade of blue="3399FF"
The hexadecimal equivalents will appear in the boxes labeled "TEXT RBG" and "BGCOLOR RBG". These are the numbers you need to plug into your html code on your web page or e-mail signature. There are just a few style points to keep in mind when selecting colors. First, keep your reader in mind when selecting your colors. They have to be able to read your message with as little visual effort as possible. Second, some colors tend to bleed or become fuzzy when used in combination. Be creative but be careful! Ok, now you know the basic use of The Super Color Chart, but now what about those other buttons and the Sample Font Face box. Well, the Sample Font Face box does nothing at all so don't worry about it. At the bottom of the site is a Go To button. When you enter the site you are in the Cross Platform Colors (216 colors) Chart, which is a good place for you as a webtv user to be. All the colors listed here are considered webtv safe (any hexadecimal number with 0, 3, 6, 9, C, and F as twins are considered webtv safe). Here is a brief description of the other sub-sites available at the Go To: button. Go To: Color Value Literals (140 colors) This is a very useful sub-site for those of you who like to use "literal" designations in your code. There are two additional boxes below the color chart labelled "TEXT literal" and "BGCOLOR literal". Once you have selected a color from the chart these two boxes will give you the literal alternative (Note: Below these boxes it still gives you the hexadecimal designation also). Go To: Mac System Colors (256 colors) You are not on a Mac so why worry about this sub-site. Works the same as the other color chart but just shows colors that are compatible with a Mac. Go To: Background Image and Text Color This sub-site at first sounded like a good idea to me but alas you can't actually plug a background image into it. (If you really want to select a suitable font color for a background image of your choice go to Color Picker by Dave Alexander. When you go there, bring a URL of a background image you would like to use. Enter it in the pop-up box and look at font color selections against your background.) Go To: RGB Slider (16.7 Mill. colors) This sub-site is not viewable to webtv users Go To: Decimal to Hexadecimal Converter At this sub-site of the Super Color Chart you have three boxes each for "TEXT" and "BGCOLOR", labeled R, B, and G (Note: R, B, and G stand for red, green, and blue). When you enter values into these boxes they will convert them to a hexadecimal number. This may be a little advanced for beginners but is fun to play with to see what values are involved with colors. Also, at some graphics sites, you need to use decimal numbers to create a logo or banner. If you wish to match a background or text color with one of your graphic colors use this chart to convert them. Beware, not all hexadecimal conversions here are webtv safe colors.