HTML5 Game - Canvas Color

Introduction

You can specify the color of an object in a number of ways.

Color SpecificationExample
Color keywords cornflowerblue
Hexadecimal values #6495ED
RGB (red, green, blue) rgb(100, 149, 237)
RGBA(red, green, blue, ALPHA) rgb(100, 149, 237,0.7)
HSL (hue, saturation, lightness) hsl(219, 58%, 93%)

Color keywords

There are basic and extended keywords for a wide variety of colors. See www.w3.org/TR/css3-color/#svg-color for additional details.

Hexadecimal values

Using a hexadecimal representation for red, green, and blue values allows the creation of more than 16 million different colors.

As an example, the extended color "cornflowerblue" has a hexadecimal value of "#6495ED".

RGB and HSL values

Colors can be defined by using numeric values for combinations of RGB (red, green, blue) or HSL (hue, saturation, lightness).

HSL is also referred to as HSV (hue, saturation, value).

RGB specifies numbers for the level of red, green, and blue in numbers from 0 to 255:

rgb(24,50,150) 

For example, to create a fillStyle using this color:

context.fillStyle = "rgb(24,50,150)" 

HSL specifies a number for hue and percentages for saturation and lightness:

hsl(30,50%,75%) 
Value Meaning
Hueindicates the position on a circular color wheel starting with red at the zero degree point and wrapping back to red at 360 degrees.
Saturation indicates the amount of color from 0% to 100%.
Lightness indicates the purity of color from 0% to 100%.

To create a fillStyle with the hsl format, use the following line:

context.fillStyle = "hsl(30, 50%, 75%)"