12/20/20151 Color Fall, 2010 Modified by Linda Kenney 10/26/10

12/20/20152 The RGB color model Computers use the RGB color model to produce the colors you see on the monitor. This is an additive color model that combines red, green and blue as the primary colors.  By mixing red, green and blue light all the other visible colors can be generated. Red alone produces red. Green alone produces green. Blue alone produces blue. Red and green produce yellow. Green and blue produce cyan. Blue and red produce magenta. Red, blue and green produce white. The absence of all produces black. By altering the relative amounts of red, green and blue, all the other visible colors can be generated.

12/20/20153 The RGB color model (cont.) The values of red, green, and blue vary from 0 to 255. The numbers are always listed in the same order – red, green, blue. The RGB value for the color red is (255, 0, 0). The RGB value for the color green is (0, 255, 0). What is the RGB value for the color blue?

12/20/20154 The Hexadecimal Color Model Hexadecimal numbers (base 16) are also used to represent colors. (See the example above.) Hexadecimal uses the characters 0 – 9 and A-F. Hex value pairs range from 00 to FF To specify color, use 6 characters. The first 2 characters represent the amount of red. The next 2 characters represent the amount of green. The last 2 characters represent the amount of blue

12/20/20155 Hexadecimal Color Values Examples: # black#FFFFFF white #FF0000 red#00FF00 green #0000FF blue

12/20/20156 The Web Color Palette A collection of 216 colors that display the same on both the Mac and PC platforms. See the Color Chart at

12/20/20157 Color names Some colors can be referred to by their names. A chart for these is shown below. However, be aware that the W3C does not recommend the use of color names (use hexadecimal values instead).

12/20/20158 Using color Can be used with the attributes (deprecated): bgcolor (background color) text (text color) link (color of hyperlinks) * vlink (color of visited hyperlinks) * alink (color of active hyperlinks) * * It’s “better” not to change the default link colors. Why?

12/20/20159 Accessibility and color Not all users can distinguish all colors. See: It’s best to choose background colors with a high amount of contrast. Avoid using the following colors next to each other – red, green, brown, gray, purple. White, black and shades of blue and yellow are easier to differentiate.

12/20/ Inline styles (CSS) Coded in the body of the web page as a style attribute of an XHTML tag. The style only applies to the particular tag that contains it as an attribute. Use inline styles instead of deprecated attributes!

12/20/ Common CSS color properties background-color border-color color (text color) Examples: This is red. ….

12/20/ Common CSS font properties font-family (font-family:Arial) font-size (font-size:small) font-style (font-style:italic) font-variant (font-variant:small-caps) font-weight (font-weight: bold)

12/20/ element Earlier, we learned that the container element can be used to create generic divisions within an XHTML document. The element is a block element that has no other meaning in the context of XHTML structure. A line break is placed before and after the division.

12/20/ element There’s a similarly generic inline element called The element has no implied structural meaning and therefore no default presentation associated with it. No line breaks are added. It is only used if you want to format an area contained within another, such as part of a paragraph.

12/20/ Since both the and elements have no implied or default presentation, they are commonly used with CSS. Although it’s by no means a requirement to use and elements with CSS, it is a very common and convenient mechanism. Be careful, however, not to forget their end tags!

12/20/ Some information used from: Web Developer & Design Foundations with XHTML by Terry Felke-Morris