CSS - Color

First Page
Next Page

CSS Color

CSS uses Hexadecimal or Numerical values to specify a color. These are used to set the color of the background or foreground of an Html element.

Colors in CSS can be specified in various formats. Following table tells you all possible formats −

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

These formats are explained in more detail in the following sections −

CSS Colors Hex Codes

  • A hexadecimal is a 6 digit representation of a color.

  • Last two digits(BB) represent a blue value.

  • First two digits(RR) represent a red value.

  • A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro or even using Advanced Paint Brush.

  • Next two digits(GG) represent a green value.

  • Each hexadecimal code will be preceded by a hash sign #.

  • Examples to use Hexadecimal notation. #66AA77, #4488DD

Syntax

background: #FFF000;

CSS Colors Short Hex Codes

  • A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro or even using Advanced Paint Brush.

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

  • Each hexadecimal code will be preceded by a pound or hash sign #.

  • Examples to use Hexadecimal notation. #6A7, #48D

Syntax

background: #FFF;

Color Names

For Example
Color Name HEX Color
Antique White #FAEBD7
Aqua #00FFFF
Black #000000
Blue #0000FF
Brown #A52A2A
CadetBlue #5F9EA0
DeepPink #FF1493

Background Color

You can set the background color for HTML elements −

Example

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Orange;">Hello World</h1>
<p style="background-color:DodgerBlue;">
CSS uses Hexadecimal or Numerical values to specify a color. These are used to set the color of the background or foreground of an Html element.</p>
</body>
</html>

Result

RGB Colors

The RGB color format is very similar to the hexadecimal color format. Each color is specified as a mix between red, green and blue. Instead of using hexadecimal numbers, you use decimal numbers betwen 0 and 255. Here is an RGB color example:

rgb(255, 0, 255);

This example sets the red (first) color nuance to 255, the green (second) color nuance to 0 and the blue (third) color nuance to 255. This will result in the same purple color as the one listed in the hexadecimal color example.

HSL Colors

HSL colors (Hue, Saturation, Lightness) are new in CSS 3.0. If you are a designer you might be more used to working with HSL colors than RGB colors. You can specify HSL colors like this:

hsl(0%, 100%, 0%);

The code hsl tells the browser that you are specifying an HSL color. The three components inside the parentheses are the Hue, Saturation and Lightness values (in that order).

First Page
Next Page