Learn Colors

Colors are displayed combining RED, GREEN, and BLUE light.

 

Color Names

With CSS, colors can be set by using color names:

Example
Color Name
Red
Yellow
Cyan
Blue
Magenta


 

CSS Color Values

With CSS, colors can be specified in different ways:

  • By color names
  • As RGB values
  • As hexadecimal values
  • As HSL values (CSS3)
  • As HWB values (CSS4)
  • With the currentcolor keyword

 

RGB Colors

RGB color values are supported in all browsers.

An RGB color value is specified with: rgb( RED , GREEN , BLUE).

Each parameter defines the intensity of the color as an integer between 0 and 255.

For example, rgb(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Example
Color RGB Color
rgb(255,0,0) Red
rgb(0,255,0) Green
rgb(0,0,255) Blue

Shades of gray are often defined using equal values for all the 3 light sources:

Example
Color HEX RGB Color
#000000 rgb(0,0,0) Black
#808080 rgb(128,128,128) Gray
#FFFFFF rgb(255,255,255) White


 

Upper Case or Lower Case?

You can use upper case or lower case letters to specify hexadecimal values.

Lower case are easier to write. Upper case are easier to read.

 

Color Names

CSS supports 140 standard color names.
In the next chapter you will find a complete alphabetical list of color names with hexadecimal values:

Color Name Hex Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4

 

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.

The border color of the following <div> element will be blue, because the text color of the <div> element is blue:

Example