How to set color using CSS ?

The concept of CSS (Cascading Style Sheets) is that it allows us to separate page style from page content. CSS colors are defined by the combination of Red, Green, and Blue color values. Most HTML elements have two color properties, such as, a foreground color property and a background color property. We can control both of these properties using CSS. In CSS we can express the value of color propery in a number of ways. Named Colors , Hexadecimal Colors and RGB Colors are the popular ways to apply colors in CSS.

Named Colors

CSS named colors

Named Color is the easiest method to apply colors in CSS. It is a predefined color keywords like Red, Blue Green etc.

h1 {color: Lime ;}

There are 140 color names are defined in CSS and HTML, which are supported by all major browsers.

Hexadecimal Colors

CSS hexadecimal  colors

Hexadecimal Values represents six digit, 3 bytes hexadecimal number. It also results in the combination of red, blue and green colors in the form of #rrbbgg . The first rr corresponds to Red color , bb corresponds to Blue color and gg corresponds to Green color. In order to define a hexadecimal color , you can set range 00 to FF.

#000000 represents black color

#FF00FF represents dark purple color

h1 {color: #00FF00 ;} represents Lime color

It is important to note that there are no spaces, commas, or other separators between the three numbers.

RGB Colors

CSS rgb colors

Computers display colors by cobining various levels of Red, Blue and Green . These combination of colors is called RGB. We can set RGB values in decimal values or in percentage values. These values set in a RGB() function.

rgb(redvalue,bluevalue,greenvalue)

rgb(0,0,0) rgb set in decimal values

rgb(0%,0%,0%) rgb set in percentage values

h1 {color: rgb(0,255,0) ;} represents Lime color

Basic colors

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