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:
<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