JavaScript Error

Color

One of the many different styles that is available through CSS is to specify an elements foreground color, by setting a Color value. The color value can be any type of HTML color value, such as HTML color names, Hex color codes, RGB, RGBa, HSL, HSLa, etc...

Named Color Values

HTML can and does use named color values, which most web browsers will translate into a standard color. Most web browsers support 140 standard color names (see Color Table below).

See examples below for examples on specifying a color using Named Color values.

HEX Color Values

Hexadecimal color values have the following syntax format: #rrggbb, which means that they always start with a hash tag ( # ), followed by two hexadecimal digit values for red, two hexadecimal digit values for green, and two hexadecimal digit values for blue.

Valid Hexadecimal digit values are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F, where 0 is the lowest value and F is the highest value. The Hex color digit values are not case sensitive.

The two digit color values can be substituted with one digit color values, but take note that they are not interchangeable. This means that you must use either all two digit values ( i.e. #rrggbb ), or all one digit values ( i.e. #rgb ) when specifying a Hex Color value.

A one digit color value is actually translated by the web browser as a two digit color value where it simply assumes that both digits of that two digit color value are the same value. For example, the one digit color value for red is #f00, which means highest amount of red with lowest amount of green and lowest amount of blue. Red's two digit equivalent is #ff0000.

The Hex Color #000 (for one digit) or #000000 (for two digit) results as black because it means lowest amount of red, lowest amount of green and lowest amount of blue. The Hex #fff (for one digit) or #ffffff (for two digit) results as white, and means highest amount of red, highest amount of green, and highest amount of blue. If the same value is used for red, green, and blue, (i.e. #fff, or #aaa, or #595959, or #888, or etc, etc, etc...) then the resulting color is actually a shade of gray because it has the same amount of red, green, and blue.

By using Hex color values instead of named color values, virtually any color can be generated.

See examples below for examples on specifying a color using Hex Color values.

RGB Color Values

RGB stands for Red Green Blue. The syntax format RGB(red, green, blue) is used to specify the RGB Color. Each parameter value for Red, Green, and Blue is specified using a number that ranges from 0 to 255, where 0 is the least amount and 255 is the highest amount, and all three values must be specified to make a color. Each value is separated by a comma, as in RGB(100,149,237), which means that the RGB Color has a Red value of 100, a Green value of 149, and a Blue value of 237, resulting in the color CornflowerBlue.

Just like with the Hex Colors, if all three values of RGB are the same number value (i.e RGB(100,100,100) for example), then the resulting color is a shade of Gray.

RGBA is the same as RGB but with an Alpha parameter specified as well, which ranges from 0.0 to 1.0. The Alpha parameter is used to specify a transparency level, where 0.0 is full transparency and 1.0 is not transparent at all. The syntax format RGBA(red, green, blue, alpha) is used to specify the RGBA color.

An example for specifying an RGB color is:

<h1 style="color:rgb(255,0,0);">Hello World!</h1>

Color Table:

The following is a list of known Color Names, along with their equivalent Hex Color Values and RGB Color Values.

Style Attribute

A simple and quick way to set an elements color value is by adding style="color:" attribute to that element, and then specify a color value. Applying the style attribute to an element will only affect that individual instance of that element.

The following example sets the foreground color of a header element to Green, resulting in its text to be displayed in green color:

<h2 style="color:green;">Hello World!</h2>

The output from the above code is:

If you don't want to use the default green, and lets say that you want to use a lighter shade of green, you can specify a HEX color value instead of using the colors name, for example:

<h2 style="color:#44FF77;">Hello Again!</h2>

The output from the above code is:

Style Script

If you need or want to apply a color style to all elements of a specific type then you can add a Style Script to the head or body section of the web page and target that element type. This makes it easier to apply styles page wide without having to touch the code of each individual target element individually.

The following example would target all h5 header elements (and only h5 header elements) within the web page:

<style>
h5 {
  color: Tomato;
}
</style>

Alternatively, this style script could be added to an external .css file and then simply included into the web pages head section. Such an approach is best used when applying the same styles to multiple web pages or to all web pages within your web site, so that you only have to write the style code once instead of having to repeat it in each web page separately.

HSL Color Values

Another way to specify color is with HSL, which stands for Hue, Saturation, and Lightness. The syntax format HSL(hue, saturation, lightness) is used to specify the HSL color.

• Hue (which is the color itself) is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation (which is the intensity of the color) is a percentage value. 0% means a shade of gray, and 100% is the full color.
• Lightness (which is the brightness) is also a percentage value. 0% is black, and 100% is white.

Shades of gray are often defined with HSL by setting the hue and saturation values to 0, and adjusting the lightness value from 0% to 100% to get darker/lighter shades.

HSLA is the same as HSL but with an Alpha parameter specified as well, which ranges from 0.0 to 1.0. The Alpha parameter is used to specify a transparency level, where 0.0 is full transparency and 1.0 is not transparent at all. The syntax format HSLA(hue, saturation, lightness, alpha) is used to specify the HSLA color.

An example for specifying an RGB color is:

<h2 style="color:hsl(0, 100%, 50%);">Amazing!</h2>

The output from the above code for specifying HSL color is:

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(1)		100%
	(0)