Quick HTML

RGB colours

Colours are defined in RGB code as combination of Red, Green and Blue.

Decimal code

In Decimal code, the quantities of red, green and blue are numbers from 0 to 255. For example:
BODY { background: rgb(51,153,255); color: rgb(102,255,255); }

Hexadecimal code

In Hexadecimal code, the same quantities are hexadecimal numbers from 00 to FF. For example:
BODY { background: #3399FF ; color: #66FFFF ; }

Look this comparative table:

Name RGB code HEX code Colour
Black (0,0,0) #000000  
Silver (192,192,192) #C0C0C0  
Grey (128,128,128) #808080  
White (255,255,255) #FFFFFF  
Maroon (128,0,0) #800000  
Red (255,0,0) #FF0000  
Purple (128,0,128) #800080  
Fuchsia (255,0,255) #FF00FF  
Green (0,128,0) #008000  
Lime (0,255,0) #00FF00  
Olive (128,128,0) #808000  
Yellow (255,255,0) #FFFF00  
Navy (0,0,128) #000080  
Blue (0,0,255) #0000FF  
Teal (0,128,128) #008080  
Aqua (0,255,255) #00FFFF  

Colour palette

A real palette has at least 216 colours (below):

Web colours palette

There are the equivalents decimal palette and hexadecimal palette.

Tip: use the RGB palette values as a starting reference; then adjust them step by step,
according to taste and needs.

Try this:
  1. Copy and paste the following style sheet:
    BODY { background: rgb(255,255,204); color: rgb(204,0,0); }
  2. save it as example.css, replacing the previous version;

  3. open again test.htm and see the changes;

  4. modify example.css taking two colours from the RGB table and see the result;

  5. modify both values as much as you like and see the result.

Text and background colours

Text and background colours should be always declared together;
the resulting colour combination should assure a good readability.

A background without a particular colour should be declared transparent.

Using a transparent background, we may superimpose a text over another background.
DIV.color1 { background: rgb(255,51,51); color:rgb(0,0,0); }
P.color2 { background: transparent; color: rgb(255,255,255); }
<DIV class="color1"> A red background...
<P class="color2">A paragraph with transparent background.</P>
A red background...

A paragraph with transparent background.

Next page :

how to define the appearance of the borders of a section of the page.

|   Back   |   Index   |   Next   |