If you are new to blogging or website design, color usage on a website can seem a little cryptic at first. This post delves into the very essence of how color works on the web. There are many, many sites with color selectors that discuss the finer points of color and web usage. The point of this post is to give newbies to web colors a strip-down jist of color to jump-start their blog tweaks.
Color basics are …basic, i.e. boiled down to three primary colors: Red, Green and Blue. This color mode is commonly referred to as RGB. RGB colors are the three colors used for electronic formats which coincide with visual color.
Additive Color
RGB colors are additive because the more of each value you add the brighter the color. Red, Green and Blue have a value each from 0 to 255.
| Colors | R | G | B |
| Black | 0 | 0 | 0 |
| Red | 255 | 0 | 0 |
| Green | 0 | 255 | 0 |
| Blue | 0 | 0 | 255 |
| White | 255 | 255 | 255 |
A mix of values create different colors and hues.
| Colors | R | G | B |
| Hot Pink | 255 | 0 | 204 |
| Lime Green | 0 | 204 | 51 |
| Light Blue | 102 | 255 | 204 |
Web colors use Hexadecimal Values
Hexadecimal is just a different numbering system from our common decimal system. Hexadecimal colors follow the range from 0 to 255. Hexadecimal values are from sixteen places: 0 through 9 and A through F. Red, Green and Blue have two hexadecimal digits for each color value.
For Example:
| Colors | R | G | B |
| Black | 00 | 00 | 00 |
| Red | FF | 00 | 00 |
| Green | 00 | FF | 00 |
| Blue | 00 | 00 | FF |
| White | FF | FF | FF |
| Colors | R | G | B |
| Hot Pink | FF | 00 | CC |
| Lime Green | 00 | CC | 33 |
| Light Blue | 66 | FF | CC |
Web colors add a # sign in front of the digits to indicate a color value i.e. #FFFFFF is the web color for white and #000000 is the web color for black.
Color Spectrum
This Color bar fundamentally is made up of the following colors in succession:
#FF0000 #FFFF00 #00FF00 #00FFFF #0000FF #FF00FF
The colors in between these values are gradations or variants.
Websafe Colors?
If you do much research on color usage on the web, "websafe" colors will show-up on some sites. As long as monitors vary as greatly as they do, there really is no such a bird as a websafe color. Primarily, web safe colors are considered primary colors with matching hex values, i.e. #FF00CC as apposed to #F206C3. Using these standard colors is a good idea, but one should not be limited to those color selections in design.
How to Choose Colors
- Find a color scheme from a website and capture the color values.
I don’t advocate cart blanche copying someone else’s design, but you may find a color selection that someone has developed that fits with the direction of your site. One simple way to use those color values is to right-click on the page and view source. - Use an online program. There are a number of good ones. Some of those are:
- Download a free program.
- Use a program installed on your machine. Look through your programs already installed on your machine. Professional programs like Photoshop and Illustrator have extensive color palletes for selection, but you will also find programs like Microsoft Word that have color selectors as well.
6 Comments
Vital basic information – everyone should look at a page like this early in their HTML life. The best chart I know of is probably the visibone one – http://html-color-codes.com/ which is part of the collection from http://www.visibone.com/ I have nothing to do with them but I do go there a lot.
Matt, thanks for the input. Good chart indeed. Basic is definitely the angle I’m going for here. There are a number of tutorials that I’m thinking of doing that would be a good help for folks like how URLs really work, how to do effective text treatments etc. I’ll try and knock one out a week or so along with other posts.
Hey Phil,
I’ve been messing around with Photoshop so am working on this color thing right now. Plus, I’m not sure I’m loving my blue tree. Well, I love the tree, but the grey font is too light, and my text is too small. So the timing of your post is perfect again. How did you know? I’ve been working on banners for my other site, and that’s okay now, so on to the next adjustment on my list. Thanks for your timeliness!
Kelly, that’s wonderful that it was helpful to you. Becoming excellent at something starts in knowing the basics, which many posts by-pass and many people don’t know or take the time to understand. You’ve got an intuitive and creative mind. I appreciate your dilligent efforts to work through technical issues and dig into learning new information.
I had noticed the “print” feature when I first read this post a while back and finally used it. It’s cool when you’re trying to do something to have a printed copy. I am fortunate to have a monitor large enough to have two open windows completely open, so that helps, too, but I love the option for the hard copy.
I’ll keep you posted. Now onto Photoshop!
Kelly, yeah it’s one of those features that should have been done by default IMHO. give me a holler if you need any hep as usual.