04/21/23 1

Color

Fall, 2010

Modified by Linda Kenney10/26/10

04/21/23 2

The RGB color modelComputers 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 othervisible colors can be generated.

04/21/23 3

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?

04/21/23 4

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

04/21/23 5

Hexadecimal Color Values

Examples:

#000000 black #FFFFFF white#FF0000 red #00FF00 green#0000FF blue

04/21/23 6

The Web Color PaletteA collection of 216 colors that display the same on both the Mac and PC platforms.

See the Color Chart at http://webdevfoundations.net/color/index.htm

04/21/23 7

Color namesSome colors can be referred to by their names.

A chart for these is shown below. http://webdevfoundations.net/color/index.htm

However, be aware that the W3C does not recommend the use of color names (use hexadecimal values instead).

04/21/23 8

Using colorCan 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?

04/21/23 9

Accessibility and colorNot all users can distinguish all colors.

See:http://www.vischeck.com/vischeck/vischeckURL.php

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.

04/21/23 10

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!

04/21/23 11

Common CSS color propertiesbackground-colorborder-colorcolor (text color)

Examples:

<h1 style=“color:#FF0000“> This is red. </h1>

<p style=“background-color:green; color:white; font-style:italic “> ….</p>

04/21/23 12

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)

04/21/23 13

<div> elementEarlier, we learned that the <div> container element can be used to create generic divisions within an XHTML document.

The <div> 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.

04/21/23 14

<span> elementThere’s a similarly generic inline element called <span>

The <span> 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.

04/21/23 15

Since both the <div> and <span> elements have no implied or default presentation, they are commonly used with CSS.

Although it’s by no means a requirement to use <div> and <span> elements with CSS, it is a very common and convenient mechanism.

Be careful, however, not to forget their end tags!

04/21/23 16

Some information used from:Web Developer & Design Foundations with

XHTML by Terry Felke-Morris