Home arrow Style Sheets arrow Page 4 - Learn CSS, Manipulating Colors

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
  1. · Learn CSS, Manipulating Colors
  2. · Keywords
  3. · Using RGB Color Values
  4. · Haxadecimal Color Values
  5. · CSS Comments

print this article

Learn CSS, Manipulating Colors - Haxadecimal Color Values
(Page 4 of 5 )

There are numbers systems that have been used by programmers for a long time, like binary, the decimal system and the hexadecimal system. This article is about CSS (not programming) so I will just briefly explain the hexadecimal system.

The hexadecimal system which has a base of 16 and it uses the numbers 0 to 9 and the letters A, B, C, D, E and F to express values. I know it needs a little explanation if you didn't work with it before, to understand the Hexadecimal system let's take a look at the Decimal system.

The decimal system which we often use has a base of 10. This means that a value represented in the decimal system carries out values from 0 to 9, which is 10 digits. Also it carres values multiplied by 10 to the next decimal place. In other words, the value 23 in the decimal system has the value 3 in the first place because this place carries values from 0 to 9. The second place has the value 2, meaning twenty and also meaning 2 times of the maximum value of the previous place.

The hexadecimal system uses this notation, but instead of the 10 base it uses 16. If we have a hexadecimal value of 11, it doesn't mean eleven because it uses the base 16 and not the base 10. Actually, the hexadecimal value 11 means 17 in the decimal system let's see why that is. The first value is 1, and the first place carries values from 0 to 15 (0 to 9 as numbers and it uses A as 10, B as 11, C as 12, D as 13, E as 14 and F as 15). The value 1 in the first place means 1. The value 1 in the second place means 16, to understand why, think about the decimal system; the value 11 for example, the second place carries 10s, so we have 1 ten and if it's 3 then we have 2 tens which means 30. Apply the same rule to the Hexadecimal system so its base is 16 and 1 in the second place means 16, and if it was 2 then it means 32 in the decimal system (16 * 2 = 32).

Ok what about the number 111 in the Hexadecimal system? Apply the same rule; the first place is 1, the second place is 16, and the third place is 256 (16 * 16 = 256, much like 10 * 10 = 100 in decimal). So, 111 means 273 in the decimal system.

The value FF in Hexadecimal means that the first place carry the maximum value, which is 15 and the second place carry out the maximum value of the first place which is 15 multiplied by the base which is 16. So 240 + 15 = 255 in the decimal system.

You can use the Hexadecimal value so instead of writing RGB values like (255,255,255) you can write it like #FFFFFF and it's a better concise form. Note that we concatenate (put the values together in one word or string) the 3 color channels into one value. Every 2 digits represent the color channel because the maximum decimal value 255 can be represented in hexadecimal as FF so we have 2 digits only. So the above example can be written like this:

  font-family: Tahoma;
  color: #FF0000;
  color: #00FF00;
  color: #0000FF;
  color: #FFFF00;
  color: #00FFFF;
  color: #FF00FF;
  color: #000000;

There's another form to writing the hexadecimal value if each color channel has the same digits. For example, the color black which is represented in Hexadecimal value as #000000, it has (00 00 00) repeated digits for each channel so we can write it as #000, which takes each digit and repeats it to get the value. So, a color like #334455 can be written as #345. A color that doesn't have repeated digits can't use this short form.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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