CSS Colors

CSS provides different options to define colors for HTML Page.

  • CSS Color can be applied to text or fonts in HTML Tags
  • CSS Color can be applied to background areas of HTML Tags & page.
  • CSS Color can be applied to borders of various HTML Elements

CSS Colors value can be specified in various formats:

Format NameColor ValueCSS Example
Color Nameredp { color: red }
Hexadecimal (Hex)#RRGGBBp { color: #00FF00; }
Short Hex Code#RGBp { color : #F00; }
RGB %rgb(rrr%,ggg%,bbb%)p { color : rgb(255, 0, 0); }
RGB Absolutergb(rrr,ggg,bbb)p { color : rgb(255,0,0); }

Some Color Codes

All modern browsers support hundred of colors. You can combine different color values & create various color shades.

There are many online tools & websites available that provide a list of colors as well. For Example: www.w3schools.com has a long list of color codes and www.quackit.com also provides a tool to generate color codes by simply picking any color.

The following table provides a list of some common colors with code values that you can use for practice.

Color OutputRGB ValueHex CodeShort HexColor Name
Samplergb(0,0,0)#000000#000black
Samplergb(255,255,255)#FFFFFF#FFFwhite
 Samplergb(255,0,0)#FF0000#F00red
 rgb(0,255,0)#00FF00#0F0lime
 rgb(0,0,255)#0000FF#00Fblue
 rgb(255,255,0)#FFFF00#FF0yellow
 rgb(0,255,255)#00FFFF#0FFcyan
 rgb(255,0,255)#FF00FF#F0Fmagenta

Example of HTML Program using CSS Colors

We will create an HTML Program that will use different colors on different tags. Following example will use different CSS Color Values to apply colors.

<html>
<head>
<title> CSS Colors Format Examples </title>
</head>
<body style="background-color:black">

<h1 style="background-color:blue">Color Names Examples</h1>

<h2 style="background-color: red">
    Background Color is defined red using color name.
</h2>

<h2 style="color:yellow">
    This heading color name is set yellow.
</h2>

<h2 style="background-color:rgb(0,128,0)">
    RGB value of Green Color is (0,128,0). This background Color is set using RGB
</h2>

<h2 style="color:#FFA500">
   This heading color orange is defined by Hex value #FFA500.
</h2>

</body>
</html>

We will read CSS background-color & color properties detail in later chapters.


Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.