You can specify the color of an object in a number of ways.
| Color Specification | Example |
|---|---|
| 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%) |
There are basic and extended keywords for a wide variety of colors. See www.w3.org/TR/css3-color/#svg-color for additional details.
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".
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 |
|---|---|
| Hue | indicates 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%)"