CSS is often thought of as a way to layout a website or position your page elements. However, CSS is just as useful in controlling the style or design of your site with the use of color. But before I get into the technicalities of it all, let’s use our imaginations for just a moment.

When it comes to websites, it is said (correctly, in my opinion) that content is king. Well, imagine if content were a real, living, breathing, king. Our king is standing high on a balcony addressing his people. The sort of speech he is giving is up to you; he may be an evil king tightening his grip on his subjects or a benevolent king spreading good news and cheer. Imagine either, both, or anything in between, and tell me one thing: what color are the king’s robes?

Humans apply style and design to just about everything. Furthermore, humans associate color with moods and ideals, and these moods and ideals may vary depending on culture and gender. The colors you choose to use with your website should align itself with the sort of audience that you want to attract. First, let’s look at how to apply colors to page elements and then a closer at how colors are associated with moods and ideals across gender and culture.

Applying Color to Page Elements with CSS

There are several different methods of assigning colors in CSS. Some of these methods are easier to read and understand while others offer more flexibility (and are used more often).

Using Color Names
You can assign a color simply by using one of the 16 color names in your CSS definition. The colors are: white, black, silver, gray, red, maroon, purple, fuchsia, blue, navy, teal, aqua, yellow, green, lime, and olive. You assign them in the following manor:

color: red;

If you were assigning them to a paragraph tag, you would do it like this:

p {color: red;}

Using RGB Values by Percentage
You can assign a color by defining the RGB (Red Blue Green) values separately with percentages. For example, this would give you a shade of purple:

color: rgb(90%, 48%, 90%);

Using RGB with Literal Values
This option allows you to use the literal RGB values to assign a color. The following code results in a pretty orange color:

color: rgb(245, 178, 17);

Using Hexadecimal Values
Hexadecimal values have been around for a long time and are used in other applications and programming languages. If you use Photoshop or do any programming, you’ve probably seen these before. Using hex values seems to be the most popular, so I’ll spend a little more time explaining it.

Hex values use the following format: #RRGGBB, which defines a pair of digits for Red, Green, and Blue. Unlike base 10 (which is how most humans make measurements), hexadecimal is base 16. The values range from 0 to 9, and then A to F (which simply take the place of 10 to 15). Since hexadecimal uses a pair of base 16 numbers to represent a number, 256 (16 x 16) separate values are possible for each color, and 16,777,216 (256 x 256 x 256) combinations. That’s a lot of colors!

To make the point clear, #FF0000 is pure red, #00FF00 is pure blue, and #0000FF is pure green.

Here’s a tip for hex colors if color values are in pairs. You can use a shorthand format to reduce a value like #44FF22 to #4F2 by using only the first value in each pair.

Color Associations Among Cultures and Gender

People associate colors with different feelings or ideals and these can vary between genders and across cultures. Numerous studies have been done to see which colors are interpreted in what ways. The table below lists common colors and their associations.

Colors can have different meanings to different people depending on their culture and gender. This next table lists common colors and their significance to different cultures as well as their preference among men and women.

I hope this has helped you to learn the different ways to style your site with colors in CSS, as well as the impact color choices can have on your audience.