18 - HTML-Colors

Colors add life to any scene, so color up your web page. To do that, you have to learn few things. Here they are,

Primary Colors- Red, Blue, Green

  • Red, blue and green are primary colors.
  • These colors when added in various ways give out a broad array of colors.
  • All the colors we see are a subset of the combination of these three colors.
  • We can use these colors to give a good look to our web page.

Adding colors to a web page

We can add colors to our web page using CSS. We can set colors to the background, text, tables etc. Some of the examples are

Adding colors to a paragraph

    <p style= "color: green ;"> Colors!!!!</p>

Using CSS

<style>
 body
 {
   background-color : yellow;
 }
</style>

Adding color to the background:

   <body style="background:#FFBFFF">

Adding color to a link:

   <a style="color:#0CBFFF">

We can specify a color name in 3 ways

  1. Using Hexadecimal Triplet( hex codes)

Example:

<body style="background:#80BFFF">

  1. Specifying the name of the color like green, blue , black etc

Example:

<body style="background:blue">

  1. Specifying the RGB triplet

Example:

<body style="background:rgb(0,0,255)">

Concept behind Hex color codes

Hex color code is defined using hexa-decimal representation starting with pound ‘#’ sign. Each code is a combination of letters (A-F) and numbers (0-9).

  • The first two letters represent the intensity of Color Red (starting from 00 to FF, 00 being the lighter version of red and FF is the most intense)
  • The second two letters represent the intensity of the color Green (starting from 00 to FF, 00 being the lighter version of Green and FF is the most intense)
  • The last two letters represent the intensity of the color Blue. (Starting from 00 to FF, 00 being the lighter version of Blue and FF is the most intense)

Let us see few examples

#FF0000 - represents Red color

#00FF00 - represents Green color

#0000FF - represents Blue color

#FFFF00- represents Yellow color (Red + Green= Yellow)

Combine the various intensities of these three colors and get the desired color.

Each color can have 256 values ranging from 00 to FF (In decimal 255).  We can have 256x256x256 various combinations using these three colors.

Web Safe Colors

In the past, the designers were encouraged to use the 216 web safe colors determined by the W3C standards as these are displayed same across all the display units which run on 256 color palettes. These colors vary from 000000 to FFFFFF.

The hex codes of these colors are simple and easy to remember.

With the advent of advanced display units this concept is of no use now.

The following are the web safe colors:-

000000

000033

000066

000099

0000CC

0000FF

003300

003333

003366

003399

0033CC

0033FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

330000

330033

330066

330099

3300CC

3300FF

333300

333333

333366

333399

3333CC

3333FF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

660000

660033

660066

660099

6600CC

6600FF

663300

663333

663366

663399

6633CC

6633FF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

FF0000

FF0033

FF0066

FF0099

FF00CC

FF00FF

FF3300

FF3333

FF3366

FF3399

FF33CC

FF33FF

FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

 

Like us on Facebook