Color, Alpha, and Opacity

color Property

Colors are more flexible in CSS than in HTML.
While pre-defined color names and hexadecimal values are still supported, CSS recognizes a shorthand for hexadecimal values. This shorthand reduces a 6-character hexadecimal to a 3-character hexadecimal:
- #cccccc becomes #ccc
- #ffffcc becomes #ffc
- #4d4d4d, however, cannot use the shorthand - it does not reduce down.
It is also possible to specify an RGB value in one of two fashions:
- An RGB value could be specified as a percentage of red / green / blue, such as: rgb(25%, 50%, 50%)
- Or the red / green / blue can be specified from 0 to 255, such as: rgb(0, 255, 0)

Property	Usage and Effect	Values	Replaces	Recommendations
color	Specifies the color to use for text inside an element.	One of the pre-defined color names A hexadecimal value (e.g., `#fff`) RGB value: `rgb(255, 0, 0)` or `rgb(0%, 50%, 25%)` HSL value: `hsl(0, 100%, 50%)`	Deprecated `<font></font>` tag	It is generally a good practice to have a background color specified along with the text color (the CSS validator may issue warnings if you do not). Users associate blue text with links, so making unlinked text blue is not a good usability choice.

See the Pen Color by Jason Withrow (@jwithrow) on CodePen.

The alpha level is the degree of transparency or opacity for each pixel.
On the web this all started many years ago with the opacity property, which had the disadvantage of altering the opacity of all colors involved, so both background color and text color would change for the element being styled. This made it an imperfect tool.
To provide more fine-tuned control that impacts just one color, there are now two ways to specify the alpha channel for RGB colors:
- If you are using rgb(), you can now use rgba(), with the fourth and final segment ranging from 0 to 1.
- If you are using a hexadecimal value, you can go from 6 characters to 8 characters, with the last two characters representing the alpha level, from 00 (fully transparent) to FF (fully opaque). If we wanted black with 50% opacity, it would be #00000080. Consult a hex opacity chart for additional values.
There is also a Hue / Saturation / Lightness (HSL) option, with an alpha channel available for that system. The table for these properties has more information.

Property	Usage and Effect	Values
opacity	Sets the opacity (transparency level / opaqueness level) for an element.	`0` (fully transparent) to `1` (fully opaque; this is the default)
rgba	Allows you to set color as well as transparency when setting a background (the 'a' represents 'alpha'); an alternative to the `opacity` property which uses the same values (0 to 1). The benefit of this approach is that `opacity` modifies the transparency of everything in the element (including text!), while this targets just the property where it is being applied, so you could adjust alpha for the background color without modifying the text color alpha (or vice versa).	Sample value: `background: rgba(255, 255, 0, 0.8)`
hsl	Color is based on HSL (Hue, Saturation, Lightness) values. Hue is a degree (number) on the color wheel: `0` or `360` is red `120` is green `240` is blue Saturation and lightness are percentages: `100%` saturation is the full color `0%` lightness is black/dark `100%` lightness is white/light	Sample value: `background: hsl(240, 100%, 50%)`
hsla	Allows you to set transparency as well as hue, saturation, and lightness (the 'a' represents 'alpha'); an alternative to the `opacity` property which uses the same values (0 to 1). Like `rgba()`, this targets just the property where it is applied, so you could style the background color alpha without modifying the text color alpha (or vice versa).	Sample value: `background: hsla(0, 100%, 50%, 0.6)`

See the Pen Opacity by Jason Withrow (@jwithrow) on CodePen.

See the Pen Untitled by Jason Withrow (@jwithrow) on CodePen.