Web Design Tutorial Explains HTML Color Names
Putting together your first web page can be confusing enough, but then there are all those HTML color names and color codes.
How to determine which colors to use? Well if you’ve got an eye for art…. great!
But if you’re like the rest of us, you’ll have to use trial and error as well as grab ideas from other well designed sites.
But before you can add color to your web design, it’s good to know how website design colors work.
What is an HTML Color Name?
HTML colors have names just like the colors you see in everyday life – red, blue, yellow, black, white, green, orange, lavender and about a hundred other names!
The reason we attach the term “HTML” before color names is because we’re talking about colors created specifically for web page design use.
Since Internet language speaks in basic “HTML” and other programming terminology, specific color codes have to be assigned to HTML colors to get the desired outcome.
HTML color codes have six characters and might look something like this:
For this box –
the actual HTML code is written as
The # sign indicates that it is a color “number” or value of colors so the server can tell which color you’re signifying.
The six characters represent an RGB value (red, green, blue). There are two characters for each of these three colors.
The RGB value is the color that results from mixing red, green and blue.
When you blend various shades of these three colors, you can have hundreds of possible color outcomes.
Therefore, each web page color is a combination of these three colors in varying shades, and with a different HEX value given.
When selecting HTML color names for certain features of your web page, you’ll have to be careful not to use colors that some folks won’t be able to view correctly.
Every computer is different; some are older or have older browsers while others are brand new with all the latest features and colors installed.
For writing your copy, it’s always safe to use black lettering on a white or very light colored background.
This is easier on the eyes so your visitors won’t tire of trying to read your page.
*Hint: Internet users tend to be impatient and usually will not strain their eyes to read copy!
If using fancy coloring and HTML font styles, turn that section into a graphic so that it remains the same in every browser. Colors for links should also be easy to see.
The HTML color names vary so it’s good to view a chart so you can actually see what the colors and codes are before designing.
Try out various color combinations and look at other websites to get color ideas.
Make sure the navigation bar, graphic or logo and link colors all blend well to create a tight web page design.
Find out which colors are popular for your products/services…. certain colors seem to sell more products than others!
Also consider taking a web beginner course if you’d like to learn more in depth.
Filed under: Web Design