Using Colors in CSS
Colors can be specified in CSS in a variety of ways:
These are used less frequently, but are handy for basic colors like
white. There are quite a few of these, please consult the MSDN Documentation for a more complete list.
Hex Codes (RGB)
“Hex” values are so-called because they use hexadecimal, or base-16, to describe the color values for red, green, and blue. Each of the 3 color values is expressed by two hexadecimal digits, from
00 (no color) to
FF (full color), and are written in the order red, green, then blue, after an initial
#FF0000 is red (full red, no green, no blue),
#00FF00 is green (no red, full green, no blue),
#0000FF is blue (no red, no green, full blue).
#00FFFF is a blue-green.
Hex values can be abbreviated to only 3 digits if each digit is doubled. So
#FFFFFF (white) can be expressed more succinctly as
#000000 (black) can be expressed as
#FA6198, however, cannot be abbreviated without altering the color.
RGB Color Values
These express exactly the same range of colors as in Hex, but do so using decimal rather than hexadecimal, in this format:
rgb(0,0,0). The first value is red, the second green, the third blue – the same order as with Hex. Each value can range from 0 to 255, which expresses the same number of color steps as 00 to FF in base-16.
FF in base-16 is equivalent to 255 in base-10.
rgb(0,0,0) is black,
rgb(255,255,255) is white,
rgb(255,0,0) is red, etc.
White-space is allowed inside the parentheses, so
rgb(255, 0, 0) will do just as well.
RGBa works identically to RGB, expect that it takes a 4th value called the “alpha” or “alpha channel” value. This is a value between 0 and 1 which will be used to determine a color’s opacity on the page, with 0 being completely transparent, and 1 being solid. 0.5 or .5 is 50% opacity.
rgba(0,0,0,.25) is black at 25% opacity and
rgba(255, 255, 255, 0.8) is white at 80% opacity.
The alpha value can be in decimal form but cannot use a percentage. When a decimal is used, the leading zero is optional.
These use a similar notation to RGB values, but specify colors using hue, saturation, and lightness.
Hue is expressed as a degree angle measure, with red being at
0, green at
120, and blue at
240. Note that the degree unit is implied, and that the angle wraps around, so
360 also refers to red, and
-120 is the same as
Saturation is expressed as a percentage, with
100% being a fully saturated color, and
0% being a shade of gray (no hue).
Lightness is also expressed as a percentage,
0% being black, and
100% being white.
50% lightness is the “normal” color range: anything above
50% gives a white tint, anything below
50% gives a black shade.
As an example, red is
hsl(0, 100%, 50%), which is equivalent to
As with RGBa, HSLa is exactly like HSL for the first 3 values, but takes a 4th alpha-channel value.
hsla(240, 100%, 50%, 0.5) is a bright blue shown at 50% opacity.
Note that changing the opacity allows whatever colors are “behind” an element to shine through, which can alter the visible color significantly, especially at lower opacities.