eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
Defining Colors by Name  
  • You can see that coloring your background is pretty easy. But what colors are available to use for coloring?

  • As you saw in the example above, basic colors are predefined by your web browser. Thus, you can access colors like "white", "black", and "yellow" by simply using the names of the colors themselves. Specifically, all the same colors that are available to the <FONT> tag are available in the <BODY> tag.

  • Below is a table put together by Lynda Weinman that outlines the color names that you can use to color your text and background when displayed in Netscape Navigator.

aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgrey
darkgreen
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrod yellow
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

Defining Custom Colors

  • However, you are certainly not limited to the colors defined by a browser. Rather than specifying a color name, it is perhaps better to define a color by its RGB value and use that.

  • RGB values give you greater control over the color and also protect you from differences in color support between browsers.

  • The RGB color scale works as follows...

  • The color of a pixel on your monitor is made up of a mixture of three colors: red, green and blue. When these colors are mixed together, you can get any other color because of how the physics of color works.

  • Typically, you will specify how much of each primary color you want mixed into a final color. This process is sort've like a painter blending colors on his easel.

  • Each color amount is specified by a hexadecimal value from "zero" to "F". Zero means that there is none of that color represented in the mixture and "F" means that there is quite a bit of that color mixed in.

Hexadecimal numbering is another weird computer thing. But actually it is very easy if you take a minute to understand it. Basically, the hexadecimal system starts at zero and counts to F as follows 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The process is a lot like counting a deck of cards that goes ACE, 2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King. Just think of A as being like 10, B being like 11 and so on.

  • An entire color is defined by a six digit hexadecimal code such that the amount of red is first, the amount of green is second, and the amount of blue is last.

  • The following table shows how to make some common colors:
CODE COLOR
FF0000 Bright Red
660000 Dark Red
00FF00 Bright Green
0000FF Bright Blue
FF00FF Magenta (Red and blue mix)
FF00FF Purple (Red and blue mix with extra blue
BBBBBB Light Gray
000000 Black
FFFFFF White

Previous Page | Next Page