Showing results for 
Search instead for 
Do you mean 
Reply
Feb 21 2010
By: DVM-501 PlayStation MVP 7830 posts
Offline

Guide To HTML Colors

[ Edited ]
16 replies 1958 views Edited Mar 19, 2013

 

 

We've always had questions about colors and how to use them on these forums, and I've noticed that these questions have increased lately due to the increased interest in having colored links and gradient effects in signatures. So I thought that I'd put together a guide specifically to help everyone learn how to use HTML colors. With this guide you will be able to use colors in posts and signatures beyond a simple point and click system, you'll learn to use the coding to it's fullest, enabling you to expand the amount of colors available to use innumerably.

 

 

Basics:
So, lets start with the basics.

The HTML code for font colors is as follows:

<font color="Hex Code">Text</font>

 

If you wish to do this for a hyperlink the HTML tends to be rather finicky on the order. The font HTML must be placed in side of the hyperlink HTML, as follows:

<a href="URL"><font color="Hex Code">Text</font></a>

 

Where it says Hex Code you'll use a series of six Hexadecimal characters (base 16 number system using numbers and letters). The sequence of the numbers and letters is what defines what color will appear in the text that you write. Also note that you always start the Hex Code with the # symbol. You can substitute the Hex Code with words such as "white" or "red" for the basic colors, however this is very limited and guide is meant to help you to be able to avoid using this method.

 

 
Understanding Hexadecimal:

As mentioned before, Hexadecimal is a base 16 counting system that utilizes the letters "A" through "F" to substitute the numbers "10-15". The counting system that we use in every day mathematics is a base 10 system, also know as decimal. Also, unlike the common perception, counting does not begin with 1, but 0 instead. This means that the decimal counting goes from "0-9", giving a total of ten digits before starting over again. The same principal works for Hex. you begin with 0, the starting value of nothing or null and move to "15" or "F", then the counting starts over again.

An easy way to think of it is to add the omitted value of the tens place, or sixteenths place in Hex. By doing this we can visually see why the count begins with 0 rather than 1.

00 01 02 03 04 05 06 07 08 09 - 10

By adding the omitted value it can now be observed that you must use all of the available digits before moving on to the next place value. When you count from "0" to "9" the tens value is at a null value, then when you enter a "10" you are actually starting over by increasing the tens place by one and going back to the null value in the ones place. The exact same method is used in Hex. You simply add a few more digest before increasing the next place value.

00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F - 10

Now to figure out how many values are available to you when counting. In Hex colors we only have available to use two place values. With these two place values we can figure out exactly how many different colors we can use.

As we all know, if we increase a decimal number to its highest value with only two place values we will have "99". We know this because the "9" is the highest single value and to count this number we simply count 9 tens for the tens place and 9 ones for the ones place. We can do the same for Hex. By maxing the values to "FF" we can count 15 sixteens for the sixteens place and 15 ones in the ones place, giving us a value of 255 in decimal being the highest value, then add the null value since counting begins with 0 and you have 256 total values to work with when creating a color.

This, however, is not the limit of Hex colors. The color that you see on a computer, TV, or in a light show is all created from three base colors. This is a similar concept to the three base colors in art, except that the base colors are Red, Green, and Blue. With these three colors you can create any color within the visible spectrum, and we do this by attributing a separate value to each one. This means that you have available to you 256 values of each individual base color, providing a grand total of 16,777,216 different colors that you can create using Hex in your HTML.


Converting Hex Code to Color:
When determining which digit to enter into the Hex Code you'll base it upon what shade you wish the color to be. "F" being the max value it defines white, while "0" being the null value it defines black, "E-A" are light shades of grey that gradually become darker the closer to "A" that you get and "9-1" are dark shades of grey that gradually get darker the closer the "1" that you get.


The six digits in the Hex Code split into three pares, each defining the amounts of red, green, and blue that appears in the color. The first two define the level of red, the second two define the level of green, and the third two define the level of blue. When you combine these three elements you can create a nearly endless array of colors.
For example:

FF0000 - Defines a pure, bright red. By setting the red to white, and the green and blue to black
00FF00 - Defines a pure, bright green. By setting the green to white, and the red and blue to black
0000FF - Defines a pure, bright blue. By setting the blue to white, and the red and green to black


If you want more of one of the three colors to be present in the color simply use more white in that portion of the Hex Code, and if you want less of the color use more black in that portion of the code. By utilizing the white, black, and greys in conjunction with combining the reds, greens, and blues you can create any color that you want in any shade that you want.

FFFF00 - Combining red and green you get yellow
FF00FF - Combining red and blue you get pink/purple
00FFFF - Combining green and blue you get cyan



Gradients:
Alright, so you've now mastered the basics of how the Hex Code works and can create any color that you want. Now you're ready to get into something a little more advanced, gradients. The idea behind a gradient is to gradually go from one color to another. To do this you must adjust the the Hex Code by a small fraction for each letter in the text that contains the gradient, however you don't want to use too small of a difference otherwise the effect will not be noticeable.

For example:

If you were to take the color FFEE00 and change the value of the green by one sixteens place and one ones place to FFDD00 you have effectively begun a gradient from yellow to orange. If you continue the change you can see a full gradient and you can take the gradient as far as you'd like.

FFEE00
FFDD00
FFCC00
FFBB00
FFAA00
FF9900
FF8800
FF7700
FF6600
FF5500
FF4400
FF3300
FF2200
FF1100


One thing that you have to keep in mind while doing gradients is that you have to code each individual letter in the word(s) for it to work. Also, any breaks in the text might disrupt the appearance of the gradient so the use of an "underscore" or another special character, though not necessary, is recommended to be placed between separate words in place of a space (special characters also needs to be coded).

Example_gradient

 


And that is how HTML coloring works. I hope that you've learned a few things from this. For further visual reference I'd recommend taking a look at my favorite color chart, or use the Hex Hub (provided by SweetPoison) to find all of the named colors.

 

If you have any questions, comments, or need any help feel free to post to this thread or send me a PM.

Please use plain text.
Message 7 of 17 (1,958 Views)
PlayStation MVP
Registered: 08/20/2007
Online
9412 posts
 

Re: Guide To HTML Colors

Aug 11, 2009

Nice guide.

 

"First Reply"

Please use plain text.
Message 1 of 17 (1,958 Views)
Reply
0 Likes
Fender Bender
Registered: 05/04/2007
Offline
3233 posts
 

Re: Guide To HTML Colors

Aug 11, 2009

Yet another good guide by DVM :smileytongue:

 

Thanks 

Please use plain text.
Message 2 of 17 (1,958 Views)
Reply
0 Likes
Treasure Hunter
Registered: 02/19/2007
Offline
8170 posts
 

Re: Guide To HTML Colors

Aug 14, 2009
Nice guide. Good stuff
Please use plain text.
Message 3 of 17 (1,958 Views)
Reply
0 Likes
Treasure Hunter
Registered: 01/26/2008
Offline
7484 posts
 

Re: Guide To HTML Colors

Aug 14, 2009
great guide
Please use plain text.
Message 4 of 17 (1,962 Views)
Reply
0 Likes
Keyblade Wielder
Registered: 02/13/2009
Offline
10027 posts
 

Re: Guide To HTML Colors

Aug 14, 2009

Already being put to very good use

Please use plain text.
Message 5 of 17 (1,962 Views)
Reply
0 Likes
PlayStation MVP
Registered: 01/26/2007
Offline
7830 posts
 

Re: Guide To HTML Colors

Aug 15, 2009
Thanks for the compliments. I'm glad to see it already in use.
Please use plain text.
Message 6 of 17 (1,962 Views)
Reply
0 Likes
Uncharted Territory
Registered: 11/22/2008
Offline
1890 posts
 

Re: Guide To HTML Colors

Jul 8, 2010

Very nice guide.

Please use plain text.
Message 8 of 17 (1,964 Views)
Reply
0 Likes
PlayStation MVP
Registered: 01/26/2007
Offline
7830 posts
 

Re: Guide To HTML Colors

Mar 11, 2013

With the introduction of the new forum layout we have seen an increase in the number of individuals asking how to change the color of their font, and even more so an increase in questions about changing the font color of hyperlinks.

 

Due to this I have decided to revive this thread and bring it from the depths of the Forum Support board, and have made a small addition to the guide to explaining how to make a hyperlink a different color.

 

I hope that this helps to alleviate many of the questions roaming around the forums, and as always if you have any questions regarding HTML or color feel free to send me a PM at any time and I'll respond at my soonest convenience.

Please use plain text.
Message 9 of 17 (1,900 Views)
Reply
0 Likes
PlayStation MVP
Registered: 11/06/2011
Offline
4403 posts
 

Re: Guide To HTML Colors

Mar 11, 2013

I am definitely Bookmarking this one!

 

Maybe someday I will be able to so my sigs on my own.:smileywink:

 

I still suck at HTML though.:smileylol:

 

Thank you DVM

 

Moble

Please use plain text.
Message 10 of 17 (1,888 Views)