Home arrow Style Sheets arrow Page 3 - Learn CSS, Manipulating Colors
STYLE SHEETS

Learn CSS, Manipulating Colors


In the thrid part of this series still covering CSS Basics, Michael Youssef discusses manipulating colors in CSS. He also takes a brief look at the hexadecimal number system and how it's useful with color values. He also defines the meaning of a keyword and the Hexadecimal number system.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 22
May 30, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, Manipulating Colors
  2. · Keywords
  3. · Using RGB Color Values
  4. · Haxadecimal Color Values
  5. · CSS Comments

print this article
SEARCH DEVARTICLES

Learn CSS, Manipulating Colors - Using RGB Color Values
(Page 3 of 5 )

You might know that the light spectrum consists of waves of energy. At one side of the spectrum is the color red, and at the other side is blue. Between them, there's green. Actually, this Red, Green, Blue (RGB) concept is very scientific and comes from outside the scope of CSS. It's enough to say that combining these colors can produce millions of colors. Computer monitors use RGB combinations to produce the colors you see in the screen. For example, when you mix the blue and the green colors you get cyan.

Let's use RGB combinations to get some colors. To use the CSS RGB color system you have 2 options: a percentage or a value range from 0 to 255. Uusing this range we can have millions of colors due to the fact that we have color combinations of 256 multiplied by 256 multiplied by 256. Note that we need to mix the colors to get a specific color so we use the following syntax to get the color:

rgb(the red color value, the green color value, the blue color value)

Let's take an example, copy the following CSS code into a file and save it as colors.css and copy the HTML code too and save it as colorsTest.html

body
{
  font-family: Tahoma;
}
.TheRed
{
  color: rgb(255,0,0);
}
.TheGreen
{
  color: rgb(0,255,0);
}
.TheBlue
{
  color: rgb(0,0,255);
}
.TheYellow
{
  color: rgb(255,255,0);
}
.TheCyan
{
  color: rgb(0,255,255);
}
.TheMagenta
{
  color: rgb(255,0,255);
}
.TheBlack
{
  color: rgb(0,0,0);
}

 

And here's the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" href="Colors.css" type="text/css">
    <title>Colors with CSS</title>
  </head>
  <body> 
    <h4 class="TheRed">This is a red text</h4>
    <h4 class="TheGreen">This is a green text</h4>
    <h4 class="TheBlue">This is a blue text</h4>
    <h4 class="TheYellow">This is a yellow text</h4>
    <h4 class="TheCyan">This is a cyan text</h4>
    <h4 class="TheMagenta">This is a magenta text</h4>
    <h4 class="TheBlack">This is a black text</h4>
  </body>
</html>

 

You will get the following result.

The first thing that you have to notice is the new css syntax, which is using a dot before the selector. I will talk about selectors in great detail in the next 2 articles, but for now just understand that this syntax is related to the class attribute in HTML. The first class selector (.TheRed Selector) set the value rgb(255,0,0), meaning it has a lot of red but no green or blue. With the other colors generated through combinations of multiple colors, the rule is different because we have to mix the colors to produce them. To produce yellow, you need to mix red and green like this: rgb(255,255,0);, leaving a zero in the blue channel.

We can write the RGB values using percentage instead of integer numbers, but you must use a percentage in all the 3 channels. In other words, you can't write an RGB value like this rgb(255, 40%, 90%). The next CSS code produces the same colors as the above RGB integer numbers values

body
{
  font-family: Tahoma;
}
.TheRed
{
  color: rgb(100%,0%,0%);
}
.TheGreen
{
  color: rgb(0%,100%,0%);
}
.TheBlue
{
  color: rgb(0%,0%,100%);
}
.TheYellow
{
  color: rgb(100%,100%,0%);
}
.TheCyan
{
  color: rgb(0%,100%,100%);
}
.TheMagenta
{
  color: rgb(100%,0%,100%);
}
.TheBlack
{
  color: rgb(0%,0%,0%);
}


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials