Contents
[ hide ]
Web Design Colors
Colors are an important element to improve Web Design. To use colors efficiently it it recommended to get familiar with Color Charts and the Color Wheel as well as with the color codes used in Cascading Style Sheets. This series of posts will go through some basic issues related to Colors in general and the use of Colors in Web Design.
To start it is important to understand, that colors are expressed based on RGB (Red Green Blue) values.
Web Design Colors and CSS
A Color is expressed either as a keyword or a numerical specification. Color can be added to your design expressed wither as a color keyword or a color code (RGB or Hexadecimal).
United Colors of Benetton
What are Color Keywords
According to W3C Standards there is a list of keywords which browsers recognize and interpret as defined colors (exceptions for Netscape). The keywords are case insensitive.
Color Keywords
Black = #000000
Green = #008000
Silver = #C0C0C0
Lime = #00FF00
Gray = #808080
Olive = #808000
White = #FFFFFF
Yellow = #FFFF00
Maroon = #800000
Navy = #000080
Red = #FF0000
Blue = #0000FF
Purple = #800080
Teal = #008080
Fuchsia = #FF00FF
Aqua = #00FFFF
These color keywords can be used as is in your style-sheet.
Example 1
body {color: black; background: white;}
h1 {color: maroon;}
h2 {color: olive}
United Colors of Benetton
Numerical Color Values
The RGB model is used in numerical color specifications. The format of a RGB value in Hexadecimal notation is a # followed immediately by either three or 6 hexadecimal characters.
The expansion from a 3 digit code to a 6 digit code is done by replicating digits, not by adding zeros.
The 3 or 6 digits correspond to RGB values, the first 1 or two to the red value, the second to the green value and the third to the blue value.
Example:
#f00 = #ff0000
FF0000 is plain red, whereas we have the red value set to FF, the Green value to 00 and the Blue value to 00 as well.
The base values for Red Green and Blue are:
FF0000 = red
00FF00 = green
0000FF = blue
It means that on red , there is only red color and no green and blue mixed in. By increasing the blue value, you go towards purple.
If you understand this concept, then you understand the basics about how colors are defined.
RGB values are expressed in numbers from 0 to 255. Thus, f00 (or ff0000) means also red 255, green 0 and blue 0.
These RGB values can also be used in our style-sheet, expressed in either absolute numbers, like 255 for plain red, or in relative percentages, in this case 100% for 255.
This allows us to write color codes in different ways; the below expressions define all the same color:
Example 2
em {color: #f00;}
em {color: #FF0000;}
em {color: 255,0,0;}
em {color: 100%, 0%, 0%}
Opacity – RGBA Values
The RGB model is extended to RGBA to include ‘alpha’ to express opacity of a color.
The alpha value is expressed in decimals between 0 and 1. For example: 0.5 for semi transparent, 0.8 for 80% opacity and so on.
Example 3
semi-transparent solid blue
and
very transparent solid orange
p {color: rgba(0,0,255,0.5)}
p { color: rgba(100%, 50%, 0%, 0.1) }
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.
Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
One Comment
. . . interesting !
One Trackback
[...] likes and dislikes, but the rule of thumb when designing a site is to use no more that 3 colours. Colours should not clash nor be difficult to discern, for example using a pastel shade on a white [...]