CSS: Using Colors in Website Design and Web Templates

Web templates come with pre-defined colors, which can work for or against you. If you need to customize the colors throughout your website, put Cascading Style Sheets (CSS) to use.

In CSS, colors are often written as:

• Hexadecimal values (which include three sets of two-digit numbers/letters, where each set represents a color) or
• RGB values (a combination of reds, greens, blues)

By using hexadecimal and RGB values, you can specify the exact color/hue you wish to use on your website. The color "red" is written as #FF0000 in hexadecimal code and as rgb(255,0,0) in RGB code.

Unfortunately, not all colors appear the same on the web. So, it's a good idea to use web safe colors. Web safe colors are colors that remain the same no matter which computer you're using. There are 216 web safe colors.

Thankfully, you can select colors that won't change after your website is designed. The majority of computers now include millions of colors, allowing you to expand your color options (even if they are not web safe).

You can use this color wheel generator to find hexadecimal values for your website. It opens in a new window, so you'll need to enable pop-ups to view it.

 

If you have a specific color you want to use on your website or template, take a look at the color wheel below. It displays which colors work well together (also known as color harmonies).


First find the primary/main color for your web page using the color wheel generator. Then find other colors that work with the main color you want to use.

Color harmonies include:

• Monochromatic - Colors that have the same hue, but a slightly different shade/tint on the color wheel (ex., the blue family)
• Complementary - Colors directly opposite each other on the color wheel
• Analogous - Any three colors adjacent to one another on the color wheel
• Triad - Colors that are evenly spaced from each other on the color wheel

As you design your web page, try not to place text on busy backgrounds. This makes words difficult (if not painful) to read. Instead, use light-colored text on dark backgrounds and dark-colored text on light backgrounds.

Once you've selected the colors for your web template or website, simply add the CSS code to the HTML file. You can apply the code to an external style sheet (CSS file), header style or inline style.

To learn more about the different types of CSS styles, check out the CSS and Web Templates web design tutorial.

The following is an example of how you can use CSS code to create "blue" headings with a 14 point font size for your web page:

h1 {
          color: #0000FF;
          font-size: 14pt;
}

 

If you'd prefer to use RGB values, replace the #0000FF hexadecimal code with rgb(0,0,255) for the color, "blue."

Following is an example of how the exact code above would look with RGB values:

h1 {
          color: rgb(0,0,255);
          font-size: 14pt;
}

 

Following is an example that lets you change the background color of your website to light-gray:

body { background-color: #CCCCCC; }

 

Not only can you change the colors of your page background and text, but you can change the color of borders as well. This is true for images, tables and boxes within your website.

The following CSS code applies a dark-gray border to images on a web page:

 

img { border: 1px solid #999999; }

 

The following adds a one-pixel border to <H1> headings and gives the border a dark-gray color:

 

h1 { border:1px solid #999999; }

If you've found this web design tutorial informative or helpful, please spread the word by linking to Dollar Templates and Fonts. Thank you.


Return to Resources