From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 3.6: Colours

Colors are an important part of most page designs. To make using common colors easy, HTML and CSS have a large set of named colors as shown in the table below. You can use any of the named colors by simply using the name of the color as the value of a color attribute such as

As you can see by the color names table, there are a lot of colors to choose from, but we are not even close to all the possible colors a monitor is able to display. While there are several models used to select colors (such as HSV), we are going to focus on the RGB model that is used internally by computers. This model is used due to the simple fact that monitors display colors using light as opposed to using pigments. This difference means the primary colors used are different than what is used by pigment-based ways of mixing colors. Light uses an additive model where black is the absence of color while white is the presence of all colors. Pigments use a subtractive model where white is the absence of color and black is the presence of all colors. For people use to working with subtractive models, the additive model may seem strange, but one can easily verify the accuracy of the additive model by getting several color lights and seeing how the colors combine.

With the RGB model, we have three primary colors that can be combined to produce all the colors that can be displayed. These colors are Red, Green, and Blue. Combining red and green makes yellow. Combining green and blue creates cyan. And the best color, purple, is made by combining red and blue. By changing the intensity (amount) of the red, green, or blue components that are being added, we can create a wide range of other colors.

Computers use a byte to represent each of the three color components so the red, green, and blue components have a value from 0 to 255. 0 indicates that the color component is not present while 255 indicates it is at full intensity. Values between the two indicate a partial intensity. There is a function in CSS for setting a color using RGB values, called rgb. Here are some examples:

The first parameter is the red component, the second is green, and the third is blue. You will notice that you can write the numbers with or without a comma separator. You can also use a percentage instead of a number between 0 and 255.

In more advanced CSS, you can have elements on top of other elements. In these cases, you may want the top element to be translucent so you can see what is underneath. This is done by specifying an alpha value. This is either a percentage or a decimal number between 0 and 1. 0 or 0% indicates the object is fully transparent while 100% or 1 indicates the object is fully opaque. 50% or .5 would be half-visible. This is used as follows:

You will notice that using the comma format the alpha value is just separated by a comma. With space separated values, you indicate the alpha value with a slash followed by the value.

There is a simple way of specifying a color using RGB Hexadecimal and there are several other color models that we can use, which we will be looking at next.