How to Choose Colors for Your HTML5 and CSS3 Based Web Pages

By Andy Harris

Colors can seem overwhelming when working with HTML5 and CSS3 web pages. With a little bit of practice, and a little bit of patience, you’ll be managing colors with style.

Start with web-safe colors

The webSafe.html program works by letting you quickly enter a web-safe value. To make red, press the FF button in the red column. The blue and green values have the default value of 00, so the background is red.

The web-safe colors give you a lot of room to play, and they’re very easy to work with. In fact, they’re so common that you can use a shortcut. Because the web-safe colors are all repeated, you can write a repeated digit as a single digit. You can specify magenta as either or as and the browser understands, giving you a headache-inducing magenta.

To make a darker red, change the FF to the next smallest value. If you want it darker yet, try . Experiment with all the red values and see how easy it is to get several different types of red. If you want a variation of pink, raise the green and blue values together. is a dusty pink color; is a bit brighter; and is a very white pink.

How to modify your colors

The web-safe palette is convenient, but it gives you a relatively small number of colors (216). Two hundred and sixteen crayons in the box are pretty nice, but you might need more. Generally, it’s to safe start with web-safe colors and then adjust as you go. If you want a lighter pink than , you can jump off the web-safe bandwagon and use or any other color you wish!

In the webSafe.html program, you can use the top and bottom button in each row to fine-tune the adjustments to your color.

How to apply colors on your own pages

The point is to make things look good on your pages. To add color to your pages, do the following:

  1. Define the HTML as normal.

    The HTML shouldn’t have any relationship to the colors. Add the color strictly in CSS.

  2. Add a tag to the page in the header area.

  3. Add a selector for each tag you want to modify.

    You can modify any HTML tag, so if you want to change all the paragraphs, add a selector. Use the tag name without the angle braces.

  4. Add and attributes.

  5. Specify the color values with color names or hex color values.

How to change CSS on the fly

The Chrome web browser has an especially cool trick when it comes to CSS coding. You can look at the CSS of any element on a web page and change it, seeing the results in real time!

Here’s how it works:

  1. Build the page in the normal way.

    Use your text editor to build the basic page.

  2. Add CSS selectors.

    Specify the CSS for the elements you intend to change. The emptyCSS.html page on the website shows a very simple example. You can put any values you want in the CSS, or you can simply leave the CSS blank for now. If you want to experiment, take a look at emptyCSS.html on the website. It has empty selectors for the three elements described on the page.

  3. Load your page in Chrome.

    The other browsers are starting to develop tools like Chrome, but it’s clearly the leader, so start with Chrome.

  4. Inspect an element.

    Right-click any element and choose Inspect element from the resulting pop-up menu.

  5. Gasp in wonderment at the awesome developer tools.

    Keep it in the Elements tab for now.

  6. Change the HTML code!

    You can double-click the code in the code viewer and modify the contents. This is fun, but not permanent or especially helpful.

  7. You can also modify the CSS.

    If a style selector has been defined, it appears under the tab in the section. You can add new style rules or change the existing ones, and you’ll be able to see the results on the fly.

  8. You can even use a fancy color selector.

    When a color rule has been defined, you’ll see a little color swatch. Click on that color to get a nice color selector you can use.

  9. Select different parts of the page to modify other rules.

    You can modify the CSS of any element as long as some sort of rule has been saved.

  10. Copy and paste any style rules you want to keep.

    Modifications made in the web developer toolbar are not permanent. If you find colors or other style rules you like, you can copy them from the developer window and paste them into your code.

    image0.jpg