CSS Colors

CSS colors are used to represent different colors. It is used to set either the foreground color of the element or the background color of the element. It is also used to specify the border and outline color of the element.

How To Assign Color

Colors are assigned to the element by predefined color names, or RGB, HEX, HSL, RGBA, and HSLA values.

Assigning Color Using Predefined Color Names

There are following predefined colors name that is used to specify the different color name. These are aqua, black, blue, green, lime, fuchsia, gray, maroon, navy, silver, teal, olive, purple, red, white, yellow, orange, and indigo.

       
h1 {
    color: red;
   }
 p {
   color: purple;
    }
   
  

Note: CSS color is applied to the HTML element by following methods such as predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Example

Source Code

          h1 {
 color: red;
}

p {
 color: purple;
}

Try it now

Code Explanation

Note:In this example CSS predefined color name is used to assign different color to the HTML element.

CSS HEX Colors

Hex color is the most commonly used method for defining color on the web.It is specified by has code followed by six digit code like #RRGGBB,where the RR stands for red,GG stands for Green and BB stands for blue color.

Please keep in mind that hex color code #rrggbb where rr(red), gg(green), and bb(blue) are the hexadecimal value that varies between 00 to ff or (in decimal, it varies between 0 - 255).

Example

General Syntax

      CSS hex color concept
It is preceded by hash code followed by six digit code.

Try it now

Source Code

          h1 {
 background-color: #0c4271;
 color: #fffff;
 padding: 10px;
}
h2 {
 background-color: #000000;
 color: #fffff;
 padding: 10px;
}

Try it now

Code Explanation

Note: In this example, the CSS hex color concept is used. Basically, it is preceded by a hash code followed by six digit code.

Short Hex codes

It is a short form of hexadecimal code.Basically it is 3 digit code preceded by hash code like #rgb where r stands for red,g stands for green and b stand for blue color.

How To Write Short Hex Code

When hex color code values(RR, GG, and BB) are the same for each component then select one color code value from each pair(RR, GG, AND BB) and put has code before the color. Now, it generates short hex code.

Let us take an example of a hex color code like #ff00cc. Now compare it to the #rrggbb standard code. You can see that r,g, and b components are the same hence select one code from r,g, and b and put hash code before it like #rgb means #f0c(short hex code).

General Syntax

      body{
 background-color: #fc9; /* same as #ffcc99 */
}
h1{
 color: #f0f; /* same as #ff00ff */
}
p{
 color: #b58; /* same as #bb5588 */
}

Try it now

Source Code

          body{
 background-color: #fc9; /* same as #ffcc99 */
}
h1{
 color: #f0f; /* same as #ff00ff */
}
p{
 color: #b58; /* same as #bb5588 */
}

Try it now

Code Explanation

Note: In this example, short form of hexadecimal code is used.It is three digit code preceded by hashcode like #rgb.

RGB Color Value

RGB color can be defined by RGB() function that takes three commas separated color components like red, green, and blue. Each color component(red, green, blue) values are specified between 0 to 255 where 0 represents no color and 255 represents a full color.

Please keep in mind that rgb() fucntion also takes three color component value in percentage form like rgb(0%,100%,0%);

General Syntax

      h1{color: rgb(255, 165, 0);}
p{color: rgb(0, 255, 0);}

Try it now

Source Code

          h1{
  color: rgb(255, 165, 0);
}
p{
  color: rgb(0, 255, 0);
}

Try it now

Code Explanation

Note: In this example, RGB color concept is used to assign color to the HTML element.It is a function that takes three component like red,green and blue.

Online Test / Quiz

Question set 1

CSS Colors

How To Assign Color

Assigning Color Using Predefined Color Names

Example

CSS HEX Colors

Example

CSS hex color concept

It is preceded by hash code followed by six digit code.

Short Hex codes

How To Write Short Hex Code

RGB Color Value

Online Test / Quiz

Web Tutorials