CSS Colors, Practices, and Theories

Posted on June 27, 2008 by Jared

CSS Color Theory ImageCSS 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.
[ad name=”468×60″]

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.

Common Colors and their Associations

White Purity, clean, precision, innocence, sterilty
Black Power, sophistication, mystery, fear, death
Gray (or Silver) Futuristic, Intelligence, modesty, sadness
Brown Comfort, reliability, earth, endurance
Violet Royalty, religion, mystery
Yellow Hope, optimism, philosophy, cowardice
Orange Fun, happiness
Green Earth, nature, health, renewal, jealousy
Blue Trust, secure, order, clean, conservative
Red Energy, love, power, passion, aggression

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.

Influences of Color in Gender and Cultures

 Color  Influence in Culture and Gender
White Purity, chastity in Western society. Mourning and death in many Asian cultures.
Black Mourning, death in most Western cultures (and many others).
Brown Usually a neutral color in most cultures and in gender.
Violet In Europe, associated with mourning, but is also associated with alternative religions (so it could be controversial).
Yellow A sacred, imperial color in Asian cultures. Women often prefer yellow to orange and associate it with optimism and warmth.
Orange Most men prefer orange to yellow. Orange can have a strong emotional tie to the Irish, as it represents Protestantism.
Green Associated with money and wealth in the United States. Green has strong emotional ties in Ireland, as it represents Irish Catholic. Most women can identify more named shades of green than men.
Blue In many Eastern countries, blue is the color of immortality. It is also the color of holiness for the Jews and represents Krishna in Hinduism. It is revered throughout the world and is probably the most globally safe color. Most men prefer blue to red.
Red Red is the color of good luck in China and is intensified when mixed with white. Most women prefer red to blue.

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. I’ve listed a few references below that will help you with your colors as well as CSS in general. Also, if you’re new to CSS and want a good introduction to the subject, see my other article: CSS Basics – The First 5 Steps Towards Mastery


Other Helpful Color Sites

Keep Reading!
Add to Technorati Favorites


8 Responses to “CSS Colors, Practices, and Theories”

  1. Tutorials Room on July 5th, 2008 5:20 pm

    Good Tutorial! It was chosen for the main page of
    Please submit all of your future quality tutorials in there.

  2. Rome on February 11th, 2009 5:27 pm

    Thank you. This was very clear and easy to understand.

  3. CSS Colors, Practices, and Theories : infoeduindia multimedia collection on March 9th, 2009 10:41 pm

    […] View Tutorial […]

  4. CSS Colors, Practices, and Theories - Tutorial Collection on June 9th, 2009 7:00 pm

    […] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Wednesday, June 10th, 2009 at 5:30 am and is filed under Css Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  5. at 32 weeks pregnant on November 24th, 2010 7:26 pm

    I love this article!! I have been reading this blog for quite sometime now, and this is my first comment. I would like to tell you that I enjoy reading this blog, and that I love thought provoking articles like this!

  6. Big savings plans on December 4th, 2010 1:39 am

    I like this post, enjoyed this one thankyou for putting up.

  7. nad morzem on December 4th, 2010 6:22 am

    I notice myself coming to your web log more and more infrequently to the point where my visits are near each day today!

  8. Big Savings Plans on December 6th, 2010 9:45 am

    Perfect just what I was searching for! .

Got something to say?