# Using Colors in CSS

Colors can be specified in CSS in a variety of ways:

## Color Keywords

These are used less frequently, but are handy for basic colors like `black`

and `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 `#`

sign.

Thus `#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 `#FFF`

, and `#000000`

(black) can be expressed as `#000`

. `#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.

In RGB, `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 Colors

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.

Thus, `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.

## HSL Colors

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 `240`

(blue).

**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 `#FF0000`

.

## HSLa Colors

As with RGBa, HSLa is exactly like HSL for the first 3 values, but takes a 4th alpha-channel value.

Thus, `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.