Color

Few artists may dispense with this most important ingredient. Even writers may refer to things in terms of their color. Such as that "soft, cinnamon fire, streaking across the amber blue sky" would be a way of describing a sunset.

Color may make or break a Web page. It is usually good to select a few, simple and stable colors, rather than floating across the rainbow, using colors that may surprise you in other browsers and systems.

In this tutorial, I will discuss the issues of color, and how it may be achieved, and used for the Web Pages you will build. The colors I am recommending are those that are stable in InterNet Explorer, as well as NetScape. Please understand, that colors are rendered differently on different browsers, operating systems, and monitors.

Color is a neural response that interprets light waves. This response relies first on the presence of light, then on the quality of the nerves, and the mind of the observer.

Visible light is a very small part of the electromagnetic spectrum. Events within the Universe may emit, absorb, refract, and re-emit light. And in doing so, may even change the qualities and properties of that light.

Computers project color through light, and so this tutorial will be applying the Light color wheel, which is different from the pigment color wheel in the set of primaries that exist.

The colors themselves are rendered in this tutorial in a six-digit hexadecimal arrangement. This is my personal favorite, as it is so easy to adjust the colors.

Warning: If you use Cascading Style Sheets to render the background color, or JavaScript to render the bgColor or fgColor, some browsers may not respond. This is often a proprietary issue.

Color definitions as they relate to eachother.

Glossary

Compliment: a primary hue, and a secondary hue made up of the other two hues are complimentary to each other. If you should blend the two in balanced saturation, you will get a white light.

Contrast: The difference in value between two colors. The foreground color on this page contrasts the background color. This allows for easier viewing.

Dithering: An attempt by a computer or browser to render a color it does not have. It does this by selecting the two colors that are closest to the desired one, and then rapidly switches between the two. A state of indecisive agitation.

Hexadecimal: A machine language written in a 16-base number system. In "Hex," the digits are 0 through 9, plus A, B, C, D, E, and F.

Hue: that property that differentiates one color from another, such as red from orange.

Primary: a hue that can be made only by itself, and no other. In light, there are three primary hues, red, green, and blue.

Saturation: [aka chroma] that property that identifies how much of a particular hue is present in the light.

Secondary hue: a hue that is made up of a balanced saturation of two primary hues.

Shade: a darker value of a hue.

Tertiary hue: a hue that is made up of an unbalanced blending of two or more primary hues.

Tint: a lighter value of a hue.

Tone: a medium value of a hue.

Value: the property that identifies the lightness or darkness of a particular hue. This is expressed in terms of tint, shade, or tone.

Physics

Color Wheel for Light

In light, White is found by rendering a full, and balanced saturation of all three primaries. If the balance is a little off, the color will begin to lean toward the color that dominates.

In light, black is found by the absence of visible light. Pigment absorbs the primary colors that it does not reflect. If you have a balanced saturation of pigments, then all the colors are absorbed, and none reflected. If none of the pigments absorb light, and reflect them all, then the color you will see will be white.

Programming

When programming for colors, Hexadecimal is always good. The numbers range from '00' for no color to 'ff' for full saturation. The arrangements of the numbers are set in groups of two, with the first two rendering red, the second rendering green, and blue with the last two. The color #ff0000 will produce red, where #00ffff will produce cyan. #ffffff will render white, as all the primary colors are at full saturation. #000000 will give you black, as no light is being emitted with that one. By adjusting the numbers in groups of two, you will be able to tweak your colors to suit your desires.

Warning: Not all colors render well. Some browsers will read colors differently, while some monitors or operating systems may not have the full 32-bit color scheme available. However, with Hexadecimal, you will find fewer surprises than you will with color names, and adjustment is easier that RGB percents.

This table will provide you with a list of colors. These basic colors are those most readily rendered in most all browsers and operating systems.

This list is exhaustive. There are 216 safe colors, and several others that may be used. These are not all of them, but are the named colors most often used. I recommend opening this page into each of the browsers you use, and seeing what they do with these color choices. These colors are rendered in Hexadecimal format. the names are provided to compare The Hue as represented in your browser Color Name Hexadecimal Code   black 000000   navy 000080   darkblue 00008B   mediumblue 0000CD   blue 0000FF   darkgreen 006400   green 008000   teal 008080   darkcyan 008B8B   deepskyblue 00BFFF   darkturquoise 00CED1   mediumspringgreen 00FA9A   lime 00FF00   springgreen 00FF7F   cyan 00FFFF   aqua 00FFFF   midnightblue 191970   dogerblue 1E90FF   lightseagreen 20B2AA   forestgreen 228B22   seagreen 2E8B57   darkslategrey 2F4F4F   limegreen 339933   mediumseagreen 3CB371   turquoise 40E0D0   seagreen 40E0D0   royalblue 4169E1   steelblue 4682B4   darkslateblue 483D8B   mediumturquoise 48D1CC   indigo 4B0082   darkolivegreen 556B2F   cadetblue 5F9EA0   cornflowerblue 660033   mediumaquamarine 66CDAA   dimgray 696969   slateblue 6A5ACD   olivedrab 6B8E23   slategray 708090   lightslategray 778899   mediumslateblue 7B68EE   lawngreen 7CFC00   chartreuse 7FFF00   aquamarine 7FFFD4   maroon 800000   purple 800080   olive 808000   gray 808080   skyblue 87CEEB   lightskyblue 87CEFA   blueviolet 8A2BE2   darkred 8B0000   darkmagenta 8B008B   saddlebrown 8B4513   darkseagreen 8FBC8F   lightgreen 90EE90   mediumpurple 9370DB   darkviolet 9400D3   palegreen 98FB98   darkorchid 9999CC   yellowgreen 9ACD32   sienna A0522D   brown A52A2A   darkgray A9A9A9   lightblue ADD8E6   greenyellow ADFF2F   paleturquoise AFEEEE   lightsteelblue B0C4DE   powderblue B0E0E6   firebrick B22222   darkgoldenrod B8860B   mediumorchid BA55D3   rosybrown BC8F8F   darkkhaki BDB76B   silver C0C0C0   mediumvioletred C71585   indianred CD5C5C   peru CD853F   chocolate D2691E   tan D2B48C   lightgray D3D3D3   thistle D8BFD8   orchid DA70D6   goldenrod DAA520   palevioletred DB7093   crimson DC143C   gainsboro DCDCDC   plum DDA0DD   burlywood DEB887   chocolate D2691E   lightcyan E0FFFF   lavender E6E6FA   darksalmon E9967A   violet EE80EE   palegoldenrod EEE8AA   lightcoral F08080   khaki F0D68C   aliceblue F0F8FF   honeydew F0FFF0   azure F0FFFF   sandybrown F4A460   wheat F5DEB3   beige F5F5DC   whitesmoke F5F5F5   mintcream F5FFFA   ghostwhite F8F8FF   salmon FA8072   atiquewhite FAEBD7   linen FAF0E6   lightgoldenrodyellow FAFAD2   oldlace FDF5E6   red FF0000   fuchsia FF00FF   magenta FF00FF   deeppink FF3333   orangered FF4500   tomato FF6347   hotpink FF69B4   coral FF7FA0   darkorange FF8C00   lightsalmon FFA07A   orange FFA500   lightpink FFB6E6   pink FFCC66   gold FFD700   peachpuff FFDAB9   navajowhite FFDEAD   moccasin FFE4B5   bisque FFE4C4   mistyrose FFE4E1   blanchedalmond FFEBDC   papayawhip FFEFD5   lavenderblush FFF0F5   seashell FFF5EE   cornsilk FFF8DC   lemonchiffon FFFACD   floaralwhite FFFAF0   snow FFFAFA   yellow FFFF00   ligntyellow FFFFE0   ivory FFFFF0   white FFFFFF