Prev Next

HTML Colours

Colouring adds life to html documents. Colors can be added to a lot of html components to beautify it. So let’s go ahead learning the type of colours.

The three basic types of specifying a colour in HTML are

  1. Constant value : These are pre defined values like red, green etc
  2. Hexa values : Hexa is a combination of 0 to 9 and A to F alphanumeric characters.
    The hexa vales is give like #FFFFFF
    The # is mandatory
    The six characters can then be divided into two characters each. The first two characters signify Red colour. The next two characters signify GREEN colour and the last two characters signify the BLUE colour.

    Following are a list of some simple colours
    #FFFFFF : white
    #000000: Black
    #FF0000:Red
    #00FF00: Green
    #0000FF: Blue
  3. RGB : stands for Red Green Blue. It defines any valid colour by this format
    rgb(number,number,number)
    eg. (255,255,255)

Example of background colour

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Example of Text colour

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Example of Border colour

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Example of colour codes

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:green;">...</h1>