Web Color Basics

1
Web Color Basics

• WWW 131

2
Advantages of Using Color

• Color can give a more polished and professional
  look to a Web site.
• Colors can evoke certain feelings and moods in
  people browsing the site.

3
HTML Color Attributes

• There are attributes to HTML tags that can change
  the colors used on the Webpage itself including
  adding spotcolor to text, changing the background
  color and the color of links.
• The font and basefont tags have color value
  attribute
• We have seen how to add color to sections of text
  using these tags

4
Spot Color

• Using the font tag and its color attribute, we
  can change the color of text in a web page at
  very precise areas.
• We call this applying spot color

5
Spot Color

• ltfont color red gtStoplt/fontgt the
  presses.
• Throw ltfont color FFFF00gtcaution
• lt/fontgt to the wind.
• ltfont color 00FF00gtGOlt/fontgt FOR IT!

6
Spot Color
7
Further Color attributes

• The body tag has these attributes
• bgcolor
• text
• link
• vlink and
• alink

• These allow us to set the color of
• page background
• All text on the page
• Unvisited hypertext
• Visited hypertext
• Hypertext on which the mouse is clicked

8
Further Color attributes

• ltbody bgcolor FFFFFF
• ltbody text bluegt
• ltbody link redgt
• ltbody vlink 00FF00gt Visited Links
• ltbody alink0000FFgt Active as you click

9
Further Color attributes

• Remember, each HTML document should have only one
  body tag
• So if you use more than one of these attributes,
  put them all into that one body tag!
• ltbody bgcolor white text blue link
  FF00FF vlink purple alink
  FFB5C5gt

10
Specifying Colors

• There are two ways of specifying color values for
  the HTML attributes
• 1) Specify one of the 16 predefined color names
  recognized by popular browsers.
• 2) Specify the color by its hexadecimal number
  according to the RGB color model (2 digits for
  red, 2 digits for green, and 2 digits for blue
  components)

11
1) Predefined Colors

• There are 16 Windows palette colors that can be
  specified by their names

White Cyan Silver Navy Red Magenta Gray Lim
e Green Yellow Maroon Olive Blue
Black Purple Teal
12
Why Red, Green, Blue?
Color Models
C
M

• Print Media Colors
• CMYKCyan, Magenta, Yellow, BlacK
• (Mix these colors together for color of ink)

K
K
Y
13
RGB Color Model
RR
GG

Display Media Colors RGBRed, Green, Blue (Mix
these colors together for the colors of light)
BB
14
RGB Color Model

• RGB color codes in HTML are specified by the
  sign followed by six digits that consist of three
  hexadecimal numbers
• two for the amount of red
• two for the amount of green
• two for the amount of blue

15
Hexdecimal Numbers in the RGB Color Model

• All red FF0000 (max intensity of red)
• All green 00FF00 (max intensity of green)
• All blue 0000FF (max intensity of blue)

16
Hexdecimal Numbers in the RGB Color Model

• You must use zeros, not capital Os!
• There must be no spaces in your RGB values
• When you are using a value like 5 for red, it
  must be written with the leading zero 05

17
Hexdecimal Numbers in the RGB Color Model

• Hexadecimals are numbers written in base 16
• In base 10, we write 0-9 before writing a 1 in
  a 2nd column
• 10 indicates we have one 10 and zero 1s
• In base 16, we write 0-9, then A-F before writing
  a 1 in a 2nd column
• The letters A through F represent 10 through 15
• 10 indicates we have one 16 and zero 1s
• A indicates we have 15 1s
• 1A indicates we have 1 16 and 10 1s 26

18
Hexadecimal Numbers

• Base 16
• 1 ( 160 )
• 9
• A
• C
• F
• 10 (161)
• 11 (161 1)
• 14 (161 4)
• 1F (161 15)
• 20 (161 161)

• Base 10
• 1
• 9
• 10 (101)
• 12
• 15 (101 5)
• 16 (101 6)
• 17 (101 7)
• 20
• 31
• 32

19
Hexadecimal Numbers

• Base 10
• 10
• 20
• 30
• 40
• 50
• 60
• 70
• 80
• 90
• 100
• 150
• 200
• 220
• 240
• 255
• 256

• Base 16
• A (10 x 160)
• 20 (1 x 161 4 x160 )
• 1E (1 x 161 14 x160 )
• 28 (2 x 161 8 x160 )
• 32 (3 x 161 2 x160 )
• 3C (3 x 161 12 x160 )
• 46 (4 x 161 6 x160 )
• 50 (5 x 161)
• 5A (5 x 161 10)
• 64 (6 x 161 4)
• 96 (9 x 161 6)
• C8 (12 x 161 8)
• DC (13 x 161 12)
• F0 (15 x 161)
• FF 15 x 161 15 x 160
• 100
• (1 x 162 0 x 161)

20
Hexadecimal Numbers

• Base 10
• 16
• 32
• 48
• 64
• 80
• 96
• 112
• 128
• 144
• 160
• 176
• 192
• 208
• 224
• 240
• 256

• Base 16
• 10 (1 x 161 0 x 160)
• 20 (2 x 161)
• 30 (3 x 161)
• 40 (4 x 161)
• 50 (5 x 161)
• 60 (6 x 161)
• 70 (7 x 161)
• 80 (8 x 161)
• 90 (9 x 161)
• A0 (10 x 161)
• B0 (11 x 161)
• C0 (12 x 161)
• D0 (13 x 161)
• E0 (14 x 161)
• F0 (15 x 161)
• 100 (1 x 162)

21
Once-ImportantHexadecimal Numbers

• Base 10
• 0
• 51
• 102
• 153
• 204
• 255

• Base 16
• 00
• 33 (48 3)
• 66 (96 6)
• 99 (144 9)
• CC (192 12)
• FF (240 15)

These numbers were considered important for
creating browser-safe colors. Since
practically all colors are now safe in browsers
on modern PCs, the numbers above are less
important than they once were.
22
Hexdecimal Numbers in the RGB Color Model

• Each of the red, green and blue hex numbers can
  have 256 values
• From 0 to 15 1s 0 - F
• From 0 to 15 16s 0 F
• From 00 to FF (from 0 to 255, or 256 values)
• Thus, we can have 256 x 256 x 256 16.7 million
  colors possible!

23
Hexdecimal Numbers in the RGB Color Model

• RRGGBB
• 000000 (least of each color black)
• FFFFFF (max of each color white)
• Samples
• FF0000 00FF00 0000FF
• (Red) (Green) (Blue)
• 00FFFF FFFF00 FF00FF
• (Cyan) (Yellow) (Magenta)

24
Predefined Colors

• There are 16 Windows palette colors that can be
  specified by their names

White FFFFFF Black 000000 Silver
C0C0C0 Gray 808080
Red FF0000 Green 00FF00 Blue 0000FF Maroon
800000 Dark Green 008000 Cyan 00FFFF Purple
800080 Olive 808000 Teal 008080 Fuschia
FF00FF Yellow FFFF00 Navy 000080
25
Predefined Colors

• There about 130 additional colors which have
  names that the major browsers recognize
• For example alice blue, antiquewhite, azure,
  beige, bisque, blanchedalmond, blueviolet,
  deeppink, etc.
• A table of these color names appears at
  http//www.w3schools.com/tags/ref_colornames.asp

26
What color should I choose?!?

• So with 16.7 million colors to choose from, how
  do we choose the ones we want?
• You can take any of the following 4 approaches

27
Help with Hex Numbers (1)

• How do you know what the hex codes are for the
  colors you want to use?
• 1st way Select a color you like from a chart of
  common colors
• Appendix pages 11-12 in our text (browser-safe
  colors)
• http//www.lynda.com/hex.asp (excellent color
  resource)
• Lynda has charts of colors by hue and by RGB
  value both provide the RGB values needed.
• http//www.webmonkey.com/webmonkey/reference/color
  _codes

28
Help with Hex Numbers (1)

• Lynda.coms values chart

29
Help with Hex Numbers (1)

• These charts are to so-called browser-safe
  colors
• The concept of browser-safe colors is pretty
  outmoded
• It grew out of the fact that way back in 1996,
  when the Web was taking off, most computers had
  8-bit color cards in them, and so could not
  accurately display all 16.7 million colors

30
The result was dithering

• Whats dithering?
• When browsers on old PCs could not display a
  pure color, they would add in some pixels of
  different colors to approximate the RGB color
  requested.
• All modern PCs have no problem displaying all
  16.7 million colors
• But determine whether your target audience is
  expected to have new or old hardware.

31
Dont dither ! (if you can avoid it)
Non-dithered color
Dithered color Note the speckles
32
Avoiding dithering

• Colors that use any of the following hex values
  for red, green, and blue are recommended to avoid
  dithering
• 00, 33, 66, 99, CC, FF
• (Base 10 Values 0, 51, 102, 153, 204, 255)
• Is this a rule? NoMany lists of common colors
  do not follow this formula.
• However, it is recommended that you check your
  colors in various browsers.

33
Avoiding dithering

• Although the concepts of browser-safe colors and
  dithering are pretty obsolete, many developers
  still consider them important
• So its helpful to know what the concepts meant,
  and why they are no longer that important
• To read more http//www.lynda.com/hex.asp

34
Help with Hex Numbers (2)

• 2nd way Use a site like which allows you to
  generate the color you wish, and provides you
  with the RGB value for that color
• For example http//www.colorschemer.com/online.h
  tml
• http//www.geocities.com/colorchooser/

35
Help with Hex Numbers (2) Colorschemer.coms RGB
tool
1. Click a color you like
To
2. Your color appears here, with base 10 RGB
values and hex description below
3. Related colors considered harmonious with your
color appear in large blocks
36
Help with Hex Numbers (2) Colorchooserer.coms
RGB tool
1. Change numbers in boxes to values close to
what you want. These are base 10 numbers
37
Help with Hex Numbers (2) Colorchooserer.coms
RGB tool
2. Click the Calculate button
38
Help with Hex Numbers (2) Colorchooserer.coms
RGB tool
3. The color matching your number appears in the
bottom area, and the hexadecimal value appears in
the textbox!
39
Help with Hex Numbers (3)

• 3rd way Step 1. Choose the color desired
• A. Identify a color in Microsoft Paint, Adobe
  Photoshop
• These tools may provide only base 10 numbers

40
Help with Hex Numbers (3)

• 3rd way Microsoft Paint Color Tool
• To start Paint Start gt All Programs gt
  Accessories gt Paint
• In Paint, open the color tool menu item Colors
  gt Edit Colors
• In the Edit Colors window, click the Define
  Custom Colors button
• At the far right of the window, slide the arrow
  up and down next to the vertical color slide
• This generates RGB values

41
Help with Hex Numbers (3)Paint Color Editor tool
1. Click on a Basic Color close to what you want

• Microsoft Paint Color Tool

3. The base 10 RGB values appear in the Red,
Green and Blue boxes.
2. The basic color is displayed in the
ColorSolid rectangle
4. If you slide the arrow up and down, the tool
produces variations on the Basic Color, changing
the RGB values!
42
Help with Hex Numbers (3)

• 3rd Way, Step 2. Convert the RGB values from base
  10 to hexadecimal.
• Image editors, such as Microsoft Paint or Adobe
  Photoshop, will show the R, G, and B values from
  0 to 255
• Convert these values to their hex equivalent
  using a scientific calculator, chart, shareware
  or a website such as http//www.w3.org/MarkUp/Gui
  de/Style.htmlhexcolors

43
Help with Hex Numbers (4)

• 4th way Use an add-on (or extension) for the
  the Firefox browser
• There are many add-ons for this browser available
  here
• https//addons.mozilla.org/firefox/extensions
• The ColorZilla add-on is available here
• https//addons.mozilla.org/firefox/271/

44
Help with Hex Numbers (4a)The ColorZilla add-on
1. With the ColorZilla add-on activated, click
the tool. The mouse arrow changes into a cursor.

2. As you roll the around, the areas of colors
beneath the cursor are outlined in red
3. That color of the area beneath the cursor
appears behind the dropper in ColorZilla and
that colors RGB value in base 10! -- appears
next to the dropper.
4. The RGB value also appears in hex!
45
Help with Hex Numbers (4a)The ColorZilla add-on
1. Area selected by ColorZilla tool
2. Tan color appears behind dropper
3. RGB values in base 10
4. The RGB values also appear in hex!
46
Help with Hex Numbers (4b)

• The FireColour add-on is here
• https//addons.mozilla.org/firefox/3776

47
Help with Hex Numbers (4b)FireColour add-on
1. With the FireColour tool on, select the
browsers Tools menu item, then the
FireColour sub-menu item.
48
Help with Hex Numbers (4b)FireColour add-on
2. The Colour Picker-n-Converter opens up.
3. Click the rectangle showing a color. . .
49
Help with Hex Numbers (4b)FireColour add-on
4. This opens the Pick Colour tool
50
Help with Hex Numbers (4b)FireColour add-on
5. Click one of the Pre-Defined Colours.
6. That color appears here . . .
7. The colors RGB values in base 10 appear here.
. .
8. . . and the RGB value in hexadecimal appears
here!
51
Help with Hex Numbers (4b)FireColour add-on
9. Click within the horizontal color bar to get
lighter or darker versions of the color
Help with Hex Numbers (4b)FireColour add-on
10. The adjusted RGB values in base 10 appear . .
.
11. . . . as well as the adjusted RGB hex value!

52
Help with Hex Numbers (4c)

• 4th way Use add-ons for the the Firefox browser
• WebDeveloper https//addons.mozilla.org/firefox/6
  0
• Information gt View Color Information

53
Help with Hex Numbers (4c)WebDeveloper add-on
1. With the WebDeveloper on, select the tools
Information menu item, then the View Color
Information sub-menu item.
54
Help with Hex Numbers (4c)WebDeveloper plug-in

2. All colors present in the pages HTML (text,
borders, solid background colors are displayed
with their RGB value in hex.
55
16.7 million colors? Cmon, really??

• We said above there are 256 different amounts
  of each color that can be selected and that this
  means we can have 256 x 256 x 256, or 16.7
  million colors. Is that true?
• Well, on modern PCs, technically and
  practically -- yes!!

56
Final RemindersWhen Using Color

• Consider retaining standard link colors many
  users are accustomed to the defaults.
• Make sure the text is easy to read by creating
  enough contrast between the background color of
  the page and the text color.
• Make sure that a background pattern does not
  interfere with the text
• ltbody background mozilla.gifgt

57
Horizontal Rules

• We can also use horizontal rules to add some
  color to a page
• lthr /gt
• This tag of course gives us a horizontal divider
  across a page

58
Horizontal Rules

• But we can control the size and position of hrs
  as well
• lthr align left center right /gt
• lthr size 10 /gt pixels
• lthr width 100 /gt pixels
• lthr noshade noshade /gt
• gives a solid bar

59
Horizontal Rules

• And, although only MSIE used to support the color
  attribute for horizontal rules, now Firefox does
  as well
• lthr color blue /gt