Chapter 04, Learn how to use CSS colors to style various elements

---

CSS supports wide variety of colors, like HSL Colors, rgb() Colors, Hexadecimal Colors. In this chapter we will learn how to use these colors to style various elements.

---

CSS HSL Colors
.light-blue { background-color: hsl(200, 70%, 50%); } HSL color system contains three values: hue which is the color value , saturation or intensity, and lightness.
Hue values range from 0 to 360 while saturation and lightness values are represented as percentages.

CSS rgb() Colors
.hot-pink { color: rgb(249, 2, 171); } .green { color: rgb(0, 255, 0); } rgb() system is represented with three values corresponding to red, green, and blue. These values range can from 0 to 255.

CSS Hexadecimal Colors
.red { color: #fa0000; } .short-blue { color: #00d; } Hexadecimal digits can represent sixteen different values using 0-10 and a-f.
Hexadecimal colors are composed of 6 characters–each group of two represents a value between 0 and 255 for red, green, or blue. For example #ff0000 is all red, no green, and no blue.

When both characters of all three colors are repeated, hex colors can be abbreviated to only three values, so #0000ff could also be represented as #00f.

CSS Color Alpha Values
.midground { background-color: rgba(0, 255, 0, 0.5); } .foreground { background-color: hsla(34, 100%, 50%, 0.1); } .transparent { color: transparent; } Alpha values determine the transparency of colors in CSS. Alpha values can be set for both RGB and HSL colors by using rgba() and hsla() and providing a fourth value representing alpha. Alpha values can range between 0.0 (totally transparent) and 1.0 (totally opaque). The CSS transparent value can also be used to create a fully transparent element.

CSS color name keywords
h1 { color: blue; } li { color: white; } Color name keywords can be used to set color property values for elements in CSS.

---