CSS Color Basics

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

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

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.

1. #000000 represents black color
2. #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

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.

1. rgb(redvalue,bluevalue,greenvalue)
2. rgb(0,0,0) rgb set in decimal values
3. rgb(0%,0%,0%) rgb set in percentage values
4. h1 {color: rgb(0,255,0) ;} represents Lime color

Basic colors