CSS Color, Use of Color, Types of Color

0
60
css color

CSS Color

In this session, we will know that how to apply a CSS color to your websites. CSS brings  2563 or 224 or 166 = 16,777,216 colors to your disposal. They can take the form of a name, an RGB(red/green/blue) value or a hex code.

These are used to set a color either for the foreground and background of the element. They can also be used to affect the color of borders and other decorative effects.

Background Color

You can set the background color for HTML elements and Body:

<p style="background-color:red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

 

body {
     background-color: #FFCC66;
     }
h1 {
    background-color: #FC9804; 
   }

Foreground color ( Text Color)

You can set the text color:

<h1 style="color:red">Hello World</h1>

Another example, imagine that we want all headlines in a document to be red. The headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.

h1 {
    color: red;
   }

Border Color

You can set the color of borders:

<h1 style="border:2px solid Tomato">Hello World</h1>

Color Value

Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(20%,50%,25%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(110,10,255);}
keyword red, aqua, black, etc. p{color:red;}

 

Hex Code

A hexadecimal is a 6 digit representation of a color. The initial two digits(RR) represent to a red value, the following two are a green value(GG), and the last is the blue value(BB).

Syntax : #rrggbb

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Color HEX Code Short Hex Code
#000000 #000
#ff0000 #f00
#00ff00 #0f0
#0000ff #00f
#ffffff #fff

 

This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.

RGB Values

This color value is specified using the RGB( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.

Color Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,255)

NOTE: All the browsers does not support rgb() property of color so it is recommended not to use it.

Building Color Codes

You can build millions of color codes using our Color Code Builder. Check our HTML Color Code Builder. To use this tool you would need a Java Enabled Browser.

LEAVE A REPLY

Please enter your comment!
Please enter your name here