CSS has several options for defining colors of both text and background areas on your pages.
These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML.
For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With CSS, you can define an area to have a specific color without that area being part of a table.
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.
The <color> CSS data type represents a color in the sRGB color space. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its background.
You can specify your color values in various formats. Following table lists all the possible formats
Format
Syntax
Example
Hex Code
#RRGGBB
p{color:#00ff7f;}
Short Hex Code
#RGB
p{color:#6A7;}
RGB %
rgb(rrr%,ggg%,bbb%)
p{color:hsl(195, 100%, 50%);}
RGB Absolute
rgb(rrr,ggg,bbb)
p{color:rgb(66, 214, 47);}
keyword
aqua, black, etc.
p{color:teal;}
RGBA Colors
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.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example -
HSL Colors
As well as using Hexadecimal and RGB colors, CSS3 could also see the introduction of HSL (Hue, Saturation, Lightness) values.
HSL takes three values:
Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades.Saturation is a percentage value; 100% is the full colour.Lightness is also a percentage; 0% is dark (black), 100% is light (white), and 50% is the average.This gives a very wide spectrum of available colors and tones.So far, HSL has been implemented in Opera 9.5, Safari 3, Konqueror and Mozilla browsers.
HSLA Colors
As RGBA is to RGB, HSLA is to HSL; that is, it allows a fourth value, which sets the Opacity (via the Alpha channel) of the element.
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Opacity
The opacity property in CSS specifies how transparent an element is.
Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the "alpha" channel). When an element has a value of 0 the element is completely invisible; a value of 1 is completely opaque (solid).
The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Color Name
Hex Code
RGB
Decimal Code
RGB
Maroon
800000
12800
Red
ff0000
25500
Orange
ffA500
2551650
Yellow
ffff00
2552550
Olive
808000
1281280
Green
008000
01280
Purple
800080
1280128
Fuchsia
ff00ff
2550255
Lime
00ff00
02550
Teal
008080
0128128
Aqua
00ffff
0255255
Blue
0000ff
00255
Navy
000080
00128
Black
000000
000
Gray
808080
128128128
Silver
c0c0c0
192192192
White
ffffff
255255255
Css Color Chart - X11 Color Names
The colors in the following color chart represent the official X11 color names. Standardized by SVG 1.0, most of these colors are distributed with the X Windows System. These colors should be recognized by most modern browsers.