Colour

So far we have only used named colours: yellow, gray and fuchsia etc. This is limited to 16 colours when there are billions available. The best way is to use the Hexadecimal colour pallet. Hexadecimal means numbers 0-15 instead of 0-9 and is used a lot in basic programming. Hexadecimal from low to high:

0123456789ABCDEF

RR,GG,BB

RGB colours are made up of six hexadecimal numbers: two for red, two for green and two for blue. A hash sign is used to start the colour code:

  #FF0000 - bright red

  #00FF00 - bright green

  #0000FF - bright blue

  #000000 - black

  #FFFFFF – white

Combining RGB values

Science tells us that yellow light is made from red and green. So the hex code for bright yellow is:

  #FFFF00 - bright yellow

Creating shades

Darker shades of these colours can be created by reducing the bright colour, or softer shades created by increasing the dark colours, here are various blues:

  #000099 - Mid blue

  #9999FF - Pastel blue

  #000033 - Very dark blue

Complex colours

The safest values for consistency across computers are 0, 3, 6, 9, C, F

More complicated colours can be created by not pairing up the two numbers for each colour:

  #6FA1D9 - A sky blue

You'll need a paint program to find out these values, there is no obvious method. These may look inconsistent across older computers so pairing up the RGB values is recommended, but often you'll need to use these complicated values to get the exact shade you want.

Shorthand Colours

Finally, hex colours can be abbreviated in CSS to three numbers (red, green and blue) making them quicker to write and adjust:

  #F00 - bright red

  #0F0 - bright green

  #00F - bright blue

You can't achieve complicated colours this way.

Make the site look more professional with new colours

That's the theory now in the CSS file change the colours on your site to hex colours starting with the Container background:

#container {  
  width: 760px;  
  background-color: #e2e2e2;  
  border-width: 1px;  
  border-style: solid;  
  border-color: gray;  
  margin-top: 10px;  
  margin-bottom: 10px;  
  margin-left: auto;  
  margin-right: auto;  
  text-align: left;  
}      

#navigation {  
  width: 180px;  
  height: 200px;  
  background-color: #e2e2e2;  
}

#content {  
  background-color: #eeeee6;  
  padding: 10px;  
  border-left: 1px solid #666;  
  margin: -200px 0px 0px 180px;  
}