CSS Colors, Practices, and Theories
Posted on June 27, 2008
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.
[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
Color
|
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.
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
References
- Stylin’ with CSS: A Designer’s Guide by: Charles Wyke-Smith
- The Zen of CSS Design by Dave Shea and Molly E. Holzschlag
Other Helpful Color Sites
Good Tutorial! It was chosen for the main page of http://www.tutorialsroom.com
Please submit all of your future quality tutorials in there.
Thank you. This was very clear and easy to understand.
[…] View Tutorial […]
[…] 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. […]
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!
I like this post, enjoyed this one thankyou for putting up.
I notice myself coming to your web log more and more infrequently to the point where my visits are near each day today!
Perfect just what I was searching for! .