Spelchan.com Logo

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

p {
    color:MidnightBlue;
    background-color:FloralWhite;
}

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:

rgb(255,128, 64)
rgb(255 128 64)
rgb(100% 50% 25%)
rgb(100%, 50%, 25%)

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.

AliceBlue
(#F0F8FF)
AntiqueWhite
(#FAEBD7)
Aqua
(#00FFFF)
Aquamarine
(#7FFFD4)
Azure
(#F0FFFF)
Beige
(#F5F5DC)
Bisque
(#FFE4C4)
Black
(#000000)
BlanchedAlmond
(#FFEBCD)
Blue
(#0000FF)
BlueViolet
(#8A2BE2)
Brown
(#A52A2A)
BurlyWood
(#DEB887)
CadetBlue
(#5F9EA0)
Chartreuse
(#7FFF00)
Chocolate
(#D2691E)
Coral
(#FF7F50)
CornflowerBlue
(#6495ED)
Cornsilk
(#FFF8DC)
Crimson
(#DC143C)
Cyan
(#00FFFF)
DarkBlue
(#00008B)
DarkCyan
(#008B8B)
DarkGoldenRod
(#B8860B)
DarkGray
(#A9A9A9)
DarkGrey
(#A9A9A9)
DarkGreen
(#006400)
DarkKhaki
(#BDB76B)
DarkMagenta
(#8B008B)
DarkOliveGreen
(#556B2F)
DarkOrange
(#FF8C00)
DarkOrchid
(#9932CC)
DarkRed
(#8B0000)
DarkSalmon
(#E9967A)
DarkSeaGreen
(#8FBC8F)
DarkSlateBlue
(#483D8B)
DarkSlateGray
(#2F4F4F)
DarkSlateGrey
(#2F4F4F)
DarkTurquoise
(#00CED1)
DarkViolet
(#9400D3)
DeepPink
(#FF1493)
DeepSkyBlue
(#00BFFF)
DimGray
(#696969)
DimGrey
(#696969)
DodgerBlue
(#1E90FF)
FireBrick
(#B22222)
FloralWhite
(#FFFAF0)
ForestGreen
(#228B22)
Fuchsia
(#FF00FF)
Gainsboro
(#DCDCDC)
GhostWhite
(#F8F8FF)
Gold
(#FFD700)
GoldenRod
(#DAA520)
Gray
(#808080)
Grey
(#808080)
Green
(#008000)
GreenYellow
(#ADFF2F)
HoneyDew
(#F0FFF0)
HotPink
(#FF69B4)
IndianRed
(#CD5C5C)
Indigo
(#4B0082)
Ivory
(#FFFFF0)
Khaki
(#F0E68C)
Lavender
(#E6E6FA)
LavenderBlush
(#FFF0F5)
LawnGreen
(#7CFC00)
LemonChiffon
(#FFFACD)
LightBlue
(#ADD8E6)
LightCoral
(#F08080)
LightCyan
(#E0FFFF)
LightGoldenRodYellow
(#FAFAD2)
LightGray
(#D3D3D3)
LightGrey
(#D3D3D3)
LightGreen
(#90EE90)
LightPink
(#FFB6C1)
LightSalmon
(#FFA07A)
LightSeaGreen
(#20B2AA)
LightSkyBlue
(#87CEFA)
LightSlateGray
(#778899)
LightSlateGrey
(#778899)
LightSteelBlue
(#B0C4DE)
LightYellow
(#FFFFE0)
Lime
(#00FF00)
LimeGreen
(#32CD32)
Linen
(#FAF0E6)
Magenta
(#FF00FF)
Maroon
(#800000)
MediumAquaMarine
(#66CDAA)
MediumBlue
(#0000CD)
MediumOrchid
(#BA55D3)
MediumPurple
(#9370DB)
MediumSeaGreen
(#3CB371)
MediumSlateBlue
(#7B68EE)
MediumSpringGreen
(#00FA9A)
MediumTurquoise
(#48D1CC)
MediumVioletRed
(#C71585)
MidnightBlue
(#191970)
MintCream
(#F5FFFA)
MistyRose
(#FFE4E1)
Moccasin
(#FFE4B5)
NavajoWhite
(#FFDEAD)
Navy
(#000080)
OldLace
(#FDF5E6)
Olive
(#808000)
OliveDrab
(#6B8E23)
Orange
(#FFA500)
OrangeRed
(#FF4500)
Orchid
(#DA70D6)
PaleGoldenRod
(#EEE8AA)
PaleGreen
(#98FB98)
PaleTurquoise
(#AFEEEE)
PaleVioletRed
(#DB7093)
PapayaWhip
(#FFEFD5)
PeachPuff
(#FFDAB9)
Peru
(#CD853F)
Pink
(#FFC0CB)
Plum
(#DDA0DD)
PowderBlue
(#B0E0E6)
Purple
(#800080)
RebeccaPurple
(#663399)
Red
(#FF0000)
RosyBrown
(#BC8F8F)
RoyalBlue
(#4169E1)
SaddleBrown
(#8B4513)
Salmon
(#FA8072)
SandyBrown
(#F4A460)
SeaGreen
(#2E8B57)
SeaShell
(#FFF5EE)
Sienna
(#A0522D)
Silver
(#C0C0C0)
SkyBlue
(#87CEEB)
SlateBlue
(#6A5ACD)
SlateGray
(#708090)
SlateGrey
(#708090)
Snow
(#FFFAFA)
SpringGreen
(#00FF7F)
SteelBlue
(#4682B4)
Tan
(#D2B48C)
Teal
(#008080)
Thistle
(#D8BFD8)
Tomato
(#FF6347)
Turquoise
(#40E0D0)
Violet
(#EE82EE)
Wheat
(#F5DEB3)
White
(#FFFFFF)
WhiteSmoke
(#F5F5F5)
Yellow
(#FFFF00)
YellowGreen
(#9ACD32)

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:

rgb(255,128, 64, .5)
rgb(255,128, 64, 50%)
rgb(255 128 64 / 50%)
rgb(255 128 64 / .5)
rgb(100% 50% 25% / 50%)

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.

Chapter contents

Chapter 3 Contents

3.1 CSS Basics Cheat Sheet

A cheat sheet covering the basics of CSS.

3.2 What is CSS

A brief look at what CSS is and how it came to be.

3.3 Setting up Style Sheets

A look at the three different ways to add style to your document.

3.4 Blocks, Spans, and Selectors

Setting the style for different types of elements.

3.5 Classes

An easy way of having multiple styles on the same element type and across different elements.

3.6 Colours

The use of named colors, the RGB color model, and creating RGB colors.

3.7 Hexadecimal color codes

Using hexadecimal color codes and other color models.

3.8 Fonts

Controlling what text looks like.

3.9 Box Model

The box model controls how elements are positioned within their layout box.

3.10 Link styles

Anchor element states and turning a link into a button.

Christmas Bonus

Hunt the Santa logo
A total conversion of Hunt the Webbus with a Christmas Theme.

3.11 Styling lists

Lists can have style applied to their layout, placement, and bullet.

3.12 Styling tables

Tables have a grid as well as rows and columns that can be controlled.

3.13 Webbus project

The project for this chapter is a variation of a classic text game

3.14 Webbus solution

My solution for the Webbus project

3.15 Christmas Total Conversion

Converting the Webbus game into a Christmas game.

← previous section
Classes
next section →
Hexadecimal Color Codes
Table of Contents