Cascading Style Sheets/Colors
From WikiKnowledge
There are two main ways to specify a color using CSS. The first and easiest way is to simply look for the color you want in the list of colors and choose that. Examples of this method are shown below in the Keywords section.
The second main way is to mix your own colors. You do this by telling the computer how much of the three primary colors you want (red, green and blue). Remember that the primary colors in computers work differently to the primary colors in paint, so yellow is not a primary color. To mix yellow, you would tell the computer to use lots of green, and lots of red but no blue. CSS provides several different ways to mix colors, which are shown in the sections below.
Contents |
[edit] Keywords
The easiest way to specify a color is my simply naming it using a keyword such as black or blue etc. CSS3 has 147 colors to choose from. You can view a list at Cascading Style Sheets/List of colors.
| HTML | Example |
|---|---|
| <span style="color: red;">Blah, blah, blah.</span> | Blah, blah, blah. |
| <span style="color: blue;">Blah, blah, blah.</span> | Blah, blah, blah. |
| <span style="color: fuchsia;">Blah, blah, blah.</span> | Blah, blah, blah. |
[edit] Hexadecimal
Hexadecimal numbers is a base 16 number system. Numbers go from 0 to F, and using 6 digits you can make 16.7 million plus numbers, which is the number of colors available to choose from. The first two digits are for the amount of red, the next two are for Green, and the last two are for blue. Hexadecimal numbers start with the hash (#) symbol. (#rrggbb)
| HTML | Color | Example |
|---|---|---|
| <span style="color: #ff0000;">Blah, blah, blah.</span> | Red | Blah, blah, blah. |
| <span style="color: #0000ff;">Blah, blah, blah.</span> | Blue | Blah, blah, blah. |
| <span style="color: #ff00ff;">Blah, blah, blah.</span> | Fuchsia | Blah, blah, blah. |
[edit] shorthand
If you wish, instead of giving all six digits, you can shorten the color to three digits #rgb.
- #ff0000 = #f00
- #00ffff = #0ff
- #ff00ff = #f0f
- #cc22aa = #c2a
[edit] RGB
You can select any of the 6.7 million plus colors by giving the red, green and blue colors separately. Red, green and blue are the three primary colors which can be mixed to give any color. An example:
background-color: rgb( 255, 0, 0 );
The values can be anywhere from 0 to 255. You can also use percentages, so
background-color: rgb( 100%, 0%, 0% );
is the same as the rule above.
[edit] RGBA
| IE | Opera | Safari | Firefox |
|---|---|---|---|
| NO | NO | 3+ | NO |
- CSS 3
This is similar to RGB above, except it also includes an alpha channel. This lets you control how transparent, or "see-through", a color is. The alpha can be anywhere from 0, completely transparent to 1, completely opaque.
rgba(255, 0, 0, 0.5)
This rule will create the color red which is 50% transparent.
Browsers which do not support RGBA, will ignore it completely. Therefore you may want to use the older RGB property to make things red, then use the RGBA to make things red with the transparency effect in browsers which support this. For example:
rgb(255, 0, 0) rgba(255, 0, 0, 0.5)
