The page properties of an HTML page include the background (color or image), color for text, and colors for link text. Choosing a combination that is attractive and readable is a challenge.
The monitor lights up dots of red, green, and blue to different intensities to form all other colors. These three are the primary colors for emitted light. Most of us are more familiar with the primary colors for paints: red, yellow, blue.
In HTML code you identify a color with three pairs of numbers for the amount of red, green, and blue, written together in the form #rrggbb. The pairs range from 00 to FF, in hexadecimal numbers.
For example, the number #00FFFF sets the amount of red = 00 (which means none), green = FF and blue = FF, which is the maximum value. FF is the same as 255 in regular base 10 numbers. You can use either upper case or lower case letters.
Another way to identify colors by the amount of red, blue, and green is with the expression rgb(rrr,ggg,bbb) where the numbers are between 000 and 255 in base 10.
There are 16 named colors in the HTML 4.01 standard itself. You can safely use these names in your HTML code instead of the #rrggbb numbers.
There are 140 colors are named in the HTML and CSS specifications, the original 17 plus 123 more. All current browsers should understand these names but some really old browsers do not.
When you are writing your own code, it is certainly easier to remember Pink than "#ffc0cb"!
W3Schools.com: Table of additional named colors
On a computer monitor that can show only 256 colors (few and far between these days!), the browser-safe colors won't dither (using dots of other colors to fool the eye into seeing the color you really want). This is true for both Windows and Mac systems.
The hexadecimal color numbers for the browser-safe colors are combinations of only 00, 33, 66, 99, CC, and FF.
This hexagon of browser-safe colors is used in the color dialogs of a number of programs. Very handy and logical. How did they figure out to use a hexagon??
Step-by-Step: Page Colors
|What you will learn:||to use an internal style sheet to set page colors using color numbers for:
link colors - unvisited, visited, hover, active
background color for a:hover
to set color with color names
to use Paint to pick a custom color
to use the #rrggbb value of the custom color
Start with: , hector16-Lastname-Firstname.htm, resource files
You will create an internal style sheet to set the background color for the page, the text color, and the colors for links.
If necessary, open hector16-Lastname-Firstname.htm in your editor.
Copy and Paste: Don't try to copy and paste the code above. You may get unexpected results due to hidden characters!
Problem: Style code shows
in the browser
There was a coding error in the STYLE section of the page. In the example, the tag <style> was misspelled as <sstyle>
Problem: Page is blank
You left our a quote or closing bracket in part of the HEAD.
Problem: Part or all of the styles are not used
This is usually a typing problem or a failure to create or apply correctly.
If you did not try out the Color Picker during the previous lesson, try it now and pick out some combinations to try on your page.
You can use names for many colors. Then you may not need comments to tell you what the color is.
Tips for Styles: Do not use # with a color name, only with a color number. You still need a semicolon after a declaration with a color name, like color:green;
Delete the comments from the internal style sheet.
Switch to your browser and Refresh.
The signature image is still not transparent, of course. The look for the whole page is quite different with different colors.
The easy way to use colors in HTML is to pick a color from the chart of named colors! But, if none of those is quite right or you cannot get to a chart, you need the color number for exactly what you want. You don't want to spend a lot of time guessing what numbers to use to get that perfect shade of green!
An advanced HTML editor like Dreamweaver or an advanced graphics program like PaintShopPro or one of the Adobe graphics programs will have a tool for picking colors that shows you the #rrggbb number and probably also the RGB number.
We will work with Paint, which does not show the HTML version of a color's number, but does easily show the RGB version.
The Edit Colors dialog opens.
If necessary, in the Color dialog click on the button Define Custom Colors >> to expand the window to the right.
Larger numbers for Luminance move the pointer on the color column which way. How do the crosshairs move?
Dithered Colors: If you have your computer set to only 256 colors (Why??), some of the colors will look spotty. Windows dithers the colors by using dots of the colors it knows to create colors it cannot display directly. Rare these days! My monitor won't let me set the number of colors low enough to show this effect. I had to find an old screenshot. The light aqua is dithered with gray, if you look really carefully. Lots of obvious dithering in the rainbow box.
You often see the same effect when you save a screen shot as a GIF
file because that format only allows 256 colors. They are not the
SAME 256 colors in every image but photos, for example, need a lot
more than 256!
Graphics Programs: A more advanced graphics program will likely include the HTML color number also.
Edit your HTML code in the
STYLE section, up in the HEAD section, to replace the named color for the BODY
background-color with your RGB color values:
Next we will make Hector's signature image blend in with the page by changing its background color.