CSS Color

CSS color uses color values to represent different colors.It is used to set either foreground color of element or background color of the element.It is also used to specify 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, HSLA values.

Assigning Color Using Predefined Color Names

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

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;
}

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).

Source Code

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

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

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 from #rrggbb standard code. You can see that r,g,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).

Source Code

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

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%);

Statement

Source Code

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

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS