Logobeben.jpg (28941 bytes)

Sandra's Backyard home

HTML tutorials
©2003 by Kati Petit

Color

Wanting a purdy background for your newly written page? Not a problem. To make the background of the page black, use this within the body tag:

<BODY BGCOLOR="#000000">

For a bit of explanation: HTML uses something called "hex codes" to tell it which color to display on the screen. Sometimes, you can get away with just writing the color...

<BODY BGCOLOR="black">

...as you certainly could with basic black. Most of your basic colors can be done this way--black, white, red, blue, etc. Here's a list of those:

Aliceblue Antiquewhite Aqua (Cyan)
Aquamarine Azure Beige
Bisque Black Blanchedalmond
Blue Blueviolet Brown
Burlywood Cadetblue Chartreuse
Chocolate Coral Cornflowerblue
Cornsilk Crimson Cyan (Aqua)
Darkblue Darkcyan Darkgoldenrod
Darkgray Darkgreen Darkkhaki
Darkmagenta Darkolivegreen Darkorange
Darkorchid Darkred Darksalmon
Darkseagreen Darkslateblue Darkslategray
Darkturquoise Darkviolet Deeppink
Deepskyblue Dimgray Dodgerblue
Firebrick Floralwhite Forestgreen
Fuchsia (Magenta) Gainsboro Ghostwhite
Gold Goldenrod Gray
Green Greenyellow Honeydew
Hotpink Indianred Indigo
Ivory Khaki Lavender
Lavenderblush Lawngreen Lemonchiffon
Lightblue Lightcoral Lightcyan
Lightgoldenrodyellow Lightgreen Lightgrey
Lightpink Lightsalmon Lightseagreen
Lightskyblue Lightslategray Lightsteelblue
Lightyellow Lime Limegreen
Linen Magenta (Fuchsia) Maroon
Mediumauqamarine Mediumblue 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 Slategray
Snow Springgreen Steelblue
Tan Teal Thistle
Tomato Turquoise Violet
Wheat White Whitesmoke
Yellow YellowGreen

But if you want a color that's not so common (a particular shade of seafoam green, for example) you'll have to use the hex code.

Hex codes are composed of 6 numbers and/or letters, and they denote color. Any time you use them within a tag, they must be preceded with the # sign. Don't ask me why, you just have to. Also remember: Never ever forget to use =" in front and " behind any information in a tag like this one. It's used in pretty much every tag you'll see.

Some things to remember when creating a page's background:
• Make sure that the text color you choose can be read against it. Nothing gets on peoples nerves like a white background with yellow text.
• Make sure that it's a color that won't destroy your viewer's eyes--colors like bright neon green should probably be avoided.
• You may want to make sure it's a non-dithering color. This simply means that no matter what monitor it's viewed on, and no matter what browser it's viewed with, the color will look the same. This is necessary if you think people with outdated systems may be viewing your page. There are a total of 216 non-dithering colors. They are needed because some older browsers aren't capable of showing every color, so when a color comes up that the browser can't show, it tries to mix colors and come up with the closest approximation it can. This can make your page look grainy and, on occasion, impossible to read.

Here's a list of them for you: 

FFFFFF FFFFCC FFFF99 FFFF66

FFFF33

 FFFF00 CCFFFF
CCFFCC CCFF99 CCFF66 CCFF33 CCFF00 99FFFF 99FFCC
99FF99 66FFFF 99FF66 99FF33 66FFCC FFCCFF 99FF00
33FFFF FFCCCC 33FFCC 00FFFF 66FF99 FFCC99 66FF66
66FF33 00FFCC 66FF00 33FF99 FFCC66 FFCC33 CCCCFF
33FF66 33FF33 00FF99 FFCC00 33FF00 00FF66 00FF33
00FF00 CCCCCC CCCC99 99CCFF CCCC66 CCCC00 CCCC33
99CCCC FF99FF 99CC99 66CCFF FF99CC 99CC66 66CCCC
99CC33 00CCFF 33CCFF 99CC00 FF9999 66CC99 FF9966
66CC66 33CCCC CC99FF 00CCCC FF9933 FF9900 66CC33
66CC00 33CC99 00CC99 CC99CC 33CC66 00CC66 CC9999
FF66FF 33CC33 33CC00 CC9966 00CC33 9999FF 00CC00
CC9933 CC9900 FF66CC 9999CC FF6699 999999 6699FF
FF6666 CC66FF 999966 6699CC 999933 FFCC33 FF6600
FF33FF 3399FF 999900 669999 CC66CC 0099FF FF33CC
3399CC CC6699 669966 FF00FF 339999 669933 669900
FF3399 0099CC 9966FF CC6666 009999 CC6633 CC6600
339966 FF00CC FF3366 009966 CC33FF FF3333 339933
009933 9966CC FF3300 FF0099 339900 009900 6666FF
CC33CC FF0066 996699 FF0033 FF0000 CC00FF CC3399
996666 6666CC 996633 996600 3366FF CC3366 CC00CC
9933FF 0066FF 666699 CC3333 CC3300 3366CC CC0099
9933CC 666666 666633 0066CC 9900FF 666600 CC0066
336699 993399 CC0033 6633FF 336666 006699 CC0000
993366 9900CC 336633 006666 336600 6633CC 3333FF
006633 993333 993300 6600FF 990099 006600 0033FF
663399 009966 3333CC 663366 6600CC 990033 0033CC
990000 3300FF 663333 663300 660099 0000FF 333399
3300CC 003399 333300 660066 333333 003366 0000CC
660033 333300 660000 330099 003333 003300 000099
330066 330033 000066 330000 000033 000000

Back to HTML tutorials