HTML Colors

Colors are the most important part of any webpage. We can specify colors in our webpage by using:

  • Color names
  • An RGB value
  • A HEX codes.

Let’s discuss these methods one by one.

Html Colors – Color Names

We can specify a color by direct using a color names:

Color Name
  Black
  Blue
  Yellow
  Cyan
  Red
  Purple

Example:

<html>
<body>
<div style=”background:blue”>
Div with Background-color Blue
</div>
<div style=”background:red”>
Div with Background-color Red
</div>
<div style=”background:green”>
Div with Background-color Green
</div>
<div style=”background:yellow”>
Div with Background-color Yellow
</div>
<div style=”background:cyan”>
Background-color set by using Cyan
</div>
</body>
</html>


Html Colors – RGB Value

We can also specify a color as an RGB value, this property takes 3 values red, green and blue, each parameter defines the intensity of color between 0 and 255.

Color RGB Value
  rgb(255,0,0)
  rgb(0,0,0)
  rgb(0,255,0)
  rgb(0,0,255)
  rgb(192,192,192)
  rgb(255,255,255)

Example:

<html>
<body>
<div style=”background:rgb(255,0,0)”>
Div with Background-color Red
</div>
<div style=”background:rgb(0,255,0)”>
Div with Background-color Green
</div>
<div style=”background:rgb(0,0,255)”>
Background-color set by using Blue
</div>
</body>
</html>


Html Colors – Hex Codes

Hex Code is a 6 digit representation of color, specified with: #RRGGBB (RR- red, GG- green, BB- blue).

We can use upper case or lower case letters to specify hexadecimal values.

Color RGB Value
  #000000
  #E1E1E1
  #FFFFFF
  #808080
  #A1A1A1
  #FF55FF

Example:

<html>
<body>
<div style=”background:#000000″> </div>
<div style=”background:#E1E1E1″> </div>
<div style=”background:#FFFFFF”> </div>
<div style=”background:#808080″> </div>
</body>
</html>


Leave a Reply