A Color Pallet Icon The World Wide Web Consortium (W3C) has listed 16 valid color names for HTML and CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. There are also Extended Color names such as: darkblue, dodgerblue, mediumblue, skyblue, aquamarine, brown, beige, crimson, gold, hotpink, indigo, magenta, tan, violet…

Obviously, there is a limit to the number of possible color names. However, HTML can use either RGBRGB

RGB refers to the common color model where red, green, and blue are combined in various ways to produce millions of possible colors. This model is based on the three primary colors of red, green, and blue.
triplet values or HEXHEX

HEX is short for Hexadecimal which is also known as base 16, because it has 16 digits (as opposed to decimal, which is base 10 with 10 digits). In Hex, the symbols 0–9 to represent values zero to nine, and A, B, C, D, E, F to represent values ten to fifteen. Hexadecimal is also commonly used to represent computer memory addresses which are based on the size of a byte, which is comprised of eight bits.
triplet values to represent millions of colors:
Dec: base 10: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17... 253, 254, 255
Hex: base 16: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12 ... FD, FE, FF
RGB values can represent 255*255*255 colors, and likewise Hex values can represent FF*FF*FF colors. The first segment is used for red, the second segment is used for green, and the third segment or triplet is used to represent the blue value. The higher the number in the blue triplet, the brighter the blue. A value of 00 in the last triplet means that there is absolutely no blue present. The total number of values for each triple is actually 256 (0 through 255). And 256 raised to the power of 3 results in over 16.7 million possible colors that can be displayed in RGB or Hex notation with today's browsers.

The samples below show that you can use color names, hex values, or RGB triplets to set colors on a web page.

You could set both the background color and the font color of a web page with the following line of code:
<body style="background-color:yellow; color:#000080"> <!-- Navy Blue -->
<body bgcolor="yellow">
<!-- bgcolor has been deprecated -->

The following three in-line style statements all display the text "abc" in blue:
 
<h2 style="color:#0000FF">abc within an h2 tag</h2>
<!-- the above code uses a Hex value to represent the color blue -->
Or
<span style="color:blue">abc within a span tag</span>
Or
<p style="color:RGB(0, 0, 255)">abc within a p tag</p>
<!-- the above code uses an RGB triplet to represent the color blue -->

The line below uses inline styles to display multiple colors with both a <p> tag and a <span> tag:

<p style="color:blue">This is <span style="color:red">red</span></p>

Click here to see these 5 sample lines of color code live  (then right-click > View Source)

All <h1> tags for the entire website can be set to blue with the following Cascading Style statement:
h1 {color:#0000FF} /* blue */
Most Webweavers recognize #0000FF as blue. But if you use a color that you do not recognize, it is advisable that you add a comment that describes the color, as seen on the right in gray, in the stylesheet css code above.

CSS3 added an extra feature called RGBA - the A stands for Alpha, as in the alpha channel, which is used for opacity or transparency settings. An alpha channel value of 0 is fully transparent; a 1 is fully opaque. For instance, see the semitransparent example below (note the overlap), and its two lines of HTML code:

 Red 50% opaque
 Blue 50% opaque

<div style="background-color:rgba(255,0,0,.5);width:70%"> Red 50% opague</div>

<div style="background-color:rgba(0,0,255,.5); width:70%; position: relative; top:-12px; float:right"> Blue</div>

Below is a simple HTML color chart listing all of the HTML webpage safe color names (red, yellow, green, blue, purple...) and some of the extended names (FireBrick, GoldenRod, ForestGreen, DodgerBlue. When coding you can use either the actual color name, the Hex value, or the RGB value. Although color names may not provide the diverse palette available through Hex or RGB values, color names are self-documenting when you use them in code. Reading HotPink is a lot more informative to a human than #FF69B4. Note: however not all browsers will recognize the extended color names below. Older Web Safe color names would only use hex values of 0, 3, 6, 9, C and F.

Color Hex value RGB Value
Red #FF0000 RGB(255,0,0)
Crimson #DC143C  
Maroon #800000 RGB(128,0,0)
FireBrick #B22222  
HotPink #FF69B4  
Salmon #FA8072  
Pink #FAAFBE  
Yellow #FFFF00 RGB(255,255,0)
Gold #D4A017  
GoldenRod #DAA520  
Orange #FFA500  
Chocolate #D2691E  
Coral #F76541  
Brown #A52A2A  
SaddleBrown #8B4513  
Sienna #8A4117  
Khaki #ADA96E  
LemonChiffon #FFFACD  
LightGoldenRodYellow #FAFAD2  
Cornsilk #FFF8DC  
Beige #F5F5DC  
Tan #D2B48C  
Olive #808000 RGB(128,128,0)
Lime #00FF00 RGB(0,255,0);
Chartreuse #7FFF00  
LimeGreen #32CD32  
Green #008000 RGB(0,128,0)
ForestGreen #228B22  
Blue #0000FF RGB(0,0,255)
DodgerBlue #1E90FF  
Navy #000080 RGB(0,0,128)
DarkBlue #0000A0  
MidnightBlue #191970  
Teal #008080 RGB(0,128,128)
Turquoise #4EE2EC  
Aquamarine #7FFFD4  
Aqua or Cyan #00FFFF RGB(0,255,255)
PowderBlue #B0E0E6  
CadetBlue #5F9EA0  
CornflowerBlue #6495ED  
SkyBlue #87CEEB  
Lavender #E6E6FA  
Azure #F0FFFF  
Fuchsia #FF00FF RGB(255,0,255)
Magenta #FF00FF  
Purple #800080 RGB(128,0,128)
Indigo #4B0082  
Orchid #DA70D6  
Violet #8D38C9
Plum #B93B8F  
Black #000000 RGB(0,0,0)
White #FFFFFF RGB(255,255,255)
Ivory #FFFFF0  
HoneyDew #808000  
Silver #C0C0C0 RGB(192,192,192)
Gray or Grey #808080 RGB(128,128,128)
SlateGray #708090  

Note 1: There are other shades of gray:
#333333 or #666666 or #999999 or #CCCCCC

For a more detailed chart see the W3Schools link:
http://w3schools.com/html/html_colors.asp

Practice adding colors to the text of a practice web page. Use inline styles and cascading styles, use Hex and RGB values.

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements...
 your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps

Return to Menu   Top