Web based School

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.


Previous Next