Using the color chart

Color chart : how to use the color chart ?

When you google for color charts, you will see hundreds of color chart types, you don't know which is the right one to use......but first we will learn about the basic principles of using colors and then learn how the color chart works in Activeworlds.

The traditional color chart

If you have learned anything about painting, then it will be about mixing colors: red and yellow make orange, red and blue make violet, and yellow and blue make green.

RED , YELLOW and BLUE are the primary colors.
ORANGE, GREEN and VIOLET are the secondary colors

The RGB color chart

When using colors on a computer , this color chart is different. The primary colors are red, green and blue : RGB-model or RGB color chart .

RED, GREEN and BLUE are the primary colors. (and not yellow)
MAGENTA, YELLOW and CYAN are the secondary colors

These secondary colours are also the colors of the ink cardridges in our printers : the yellow and magenta ink will make red, the cyan and yellow will make green , and the cyan and magenta will make blue. So quite it's quite another way of mixing colors....

This RGB-chart is also used for TV, cameras, computer screens, websites (html), etc...


Hexadecimal values

The RGB color system works with hexadecimal values instead of decimal values. Hexadecimal means that the shades of each color are indicated with a value from 0 till 256 , and not from 0 till 99. (Computers work with the binary system, so just like for texture sizes, we work here also the "powers of 2".)

However, each color shade is indicated with a 2-digit number, and not with 3 digits. With the decimal system , you have the numbers 0 1 2 3 4 5 6 7 8 9 and you can make 10x10=100 combinations for each color with those characters. In the hexadecimal system, you have also the letters A B C D E F , which make 16 characters in total and here you can make 16x16=256 combinations for each color, which matches the 256 shades.

This range of color shades goes from 00 (= no color ) until FF (pure color). The first 2 digits are for the shade of red, then 2 digits for the shade of green and the last 2 digits for the shade of blue. If you want to make the colour cyan, then let's look first at the RGB color chart : you need to mix blue and green , and exclude the red, this will make : 00 FF FF.

red green blue
00->FF 00->FF 00->FF
Hexadecimal code Color
00 00 00 black
FF FF FF white
  the primary colors
FF 00 00 red
00 FF 00 green
00 00 FF blue
  the secundary colors
FF FF 00 yellow
FF 00 FF magenta
00 FF FF cyan

When you want to apply more white or black shade to your colors , then you put a value between 00 and FF for this color. e.g. 99 99 99 for grey , or 66 66 66 for a darker shade of grey. Click upon the picture at the right to enlarge and see some of the combinations you can make. You can make 256x256x256= 16.777.216 colors

On the previous picture you have an overview of darkened or whitened shades of the 6 primary and secondary colors. On this picture you have some shades between those 6 colors.

When you want to build and choose a color by using this hexidecimal colorchart system , it is obvious that you will not know the exact code for each color. Fortunately, there is a utility program that makes it quite easy for you.

The RGB colour picker

Although you can select colors in various programs (Paint, Photoshop, Dreamweaver, Gimp,...) , this RGB colour picker is a small freeware program which will show the hexidecimal code for the color combination you create.

You can download the RGB color picker on this webpage of SWCity.net (SWCity Builders Academy):

When you start the program , you will find the hexadecimal code after "HTML #", because these color numbers are used for website applications as well. When starting the program, no color is selected, which means that you will have 000000 (=black). Now you can slide on the 3 color bars , going from 0 till 256 for each color, and immediately you can see changing the HTML value as well.

When you have created a colour, go at the right of the HTML-number , where you can select "Copy HTML code to clipboard". And then you can paste his code, for instance into the action command of an object in Activeworlds. But after you have pasted this code, you need to delete the #-sign in the action command. Finally you will see that the color of the RGB colour picker program will be on your object.