Color

C o l o r

What are RGB and HSV?

RGB and HSV are numerical ways of describing colors. The first, RGB, stands for Red, Green, Blue. The Second, HSV, stands for Hue, Saturation, Value.

RGB

The RGB system uses numbers from 0-255 (or sometimes 1-256) to describe how much red, green, and blue there is in a certain color. For instance, the RGB value for red is, R=255, G=0, and B=0. That is, the color red contains all of the red value possible and nothing else. This would normally be written just as RGB=(255, 0, 0.) However, certain shades of red contain varying amounts of blue and green. Another example: purple, which is made up of red and blue, has RGB=(255, 0, 255.)

HSV

Hue is the shade of a color. Hue can also be explained as the angle around the color wheel of a certain color. For example, green lies at 120 degrees on the color wheel.

Saturation is the freedom from white of a color, or rather the distance from the center (white) of the color wheel. Therefore, a color with S=0 is entirely white, while a color with S=1 is completely free from white and at the very edge of the color wheel.

Value (brightness) is the amount of energy a color has. Value can also be explained as the overall brightness of the dominant primary of a color. The lesser the value, the dimmer the color: the greater the value, the more brilliant the color. V=0 is black; V=1 is a very brilliant color.

Putting it all together: Say you wanted a very pure, brilliant blue. First of all, your Hue (H) would be 240 (as in 240 degrees around the color wheel--the point at which blue lies.) The saturation would equal 1 because you want a pure blue, free from white. Your Value (V) would equal 1 since you want a very brilliant blue.

Converting RGB to HSV:

It is possible to convert RGB values to HSV values. It is also possible to convert HSV to RGB, but it is much more difficult. Because most graphics programs do not require you to do such calculations and conversions, you will rarely find yourself in a situation when you need to convert. If you do, however, it is handy to use the following simple formulas:

max=largest RGB component
min=smallest RGB component

H=60*(G-B)/(max-min) if red is largest
180*(B-R)/(max-min) if green is largest
300*(R-G)/(max-min) if blue is largest
S=(max-min)/max
V=max

C o l o r on the web:

It used to be that, in order to use color on a web site, you had to figure out the hexadecimal (HEX) value for a color. HEX values are made up of numbers and letters, such as "#FFFFFF" (white) or "#000000" (black.) With the new versions of HTML and web browsers, you can simply name the color you want to use. Here are some examples:

Yellow
Cyan
Pink
As you can see, some colors do not show up well on a computer screen. Remember that you want someone who is looking at your web site to be able to see what is written. Be careful not to use light colored text or dark colored backgrounds unless they contrast well enough to be readable.

The following HTML tags allow you to use color on your web site:

font color="color" -- Sets the font color at a specific part of a page.
body bgcolor="color" -- Sets the background color of the entire page.
text="color" -- Sets the text color for the entire page.
link="color" -- Sets the color of text that is a link to another web page.
alink="color" -- Sets the color of the text of a link while it is active (while the user is clicking on it and has the mouse button down.)
vlink="color" -- Sets the color of text for a link that a user has already visited.

* The last five tags on this list appear together in one big tag towards the beginning of the HTML code for a web page, just after the "title" tag. The entire tag (normally enclosed by <>'s) would look like this:

body bgcolor="white" text="black" link="blue" alink="red vlink="purple"

Notice that this is the tag used for this page.

Links:

PEI's RGB/HEX SuperConverter! -- http://www.peimag.com/rgbhex.htm
The ultimate web site for all of your color needs. This site is very easy to use and has some incredibly useful features, such as an RGB to HEX (hexadecimal) calculator, a list of colors that uses Java to instantly show an example of each, and an RGB color chart. If you are developing a web site, do not miss this one!
The Coloured Text Page -- http://fas-www.harvard.edu/~mabaker/colours/blackbg.html
This is not nearly as exciting as the SuperConverter, but it does list some interesting colors and gives you help with the code for them.

Back to Setting Up Web Pages.

Back to TeleTalk.

Return to WOW/EM

Go to the Menu

Copyright September 1996,
updated February 2004.
Kristine H. Burns,
Florida International University
Questions? Contact me.