HTML color usage
Knowing how to set color is one thing, but doing it correctly as well as choosing the right color is another thing. Using color correctly both for yourself (in your code) and for your visitors (on the actual webpage) is an integral part of web development.
This lesson focuses on:
- Color naming convention
- Color schemes
Color naming convention
In the lesson on HTML colors, we discussed how you can set a color in three different ways -- by color name, RGB value, or hexadecimal value.
While it is possible to set a color by color name or RGB value, the best way to do it is by hexadecimal code. If you set colors by hexadecimal code:
-
Your pages will always validate with an HTML validator
While there are a set of 16 colors that you can set by name and still have a page validate with an HTML validator as discussed on the HTML colors page, there are millions that will result in a page not validating if you set them by name. And if you set a color by RGB value, there are some browsers that do not support that. You should get used to setting color with a hexadecimal value all the time so that your pages will always validate with an HTML validator. -
Your work will look professional
Using color names or RGB values is considered outdated and anyone who does it is looked at as someone who is not up to date. You don't want to be one of those people, do you?
Hexadecimal color naming shortcut
When declaring the hexadecimal color value for an element, instead of using the full 6 digit value, you can shorten it down to three, that is if the color code consists of three pairs of repeating digits.
Example:
can be shortened to:
Color schemes
When creating a color scheme, you should always make sure that the background color goes good with the text color and images on a page as well as the general appearance of the page (everything has to work together). The general rule in web design is dark text on a light background and you will see this combination on the majority of websites out there. There are some websites that do have light text on a dark background, and to their credit, they do a good job at it as well. So it is possible to make a webpage look good with both dark text on a light background or light text on a dark background but you should stick to light text on a dark background as that is what people are used to seeing and that is the general rule on the web.
Examples of good background/text color combinations:
Choosing a good color scheme can sometimes be a difficult and tricky process. To help you with this, check out the website colorblender.com. You choose a color or colors, and it will tell you in real-time what color(s) go good with it.
