CSS3 expands the color options available to web developers. Before CSS3, web developers has a few different color formats to choose from:
1- Hexadecimal Format
2- RGB Format (red, green, blue)
3- Named Colors
CSS3 extends the support for colors by offering support for defining colors in the following ways:
1- HSL – Hue, Saturation and Lightness
2- HSLA – (Hue, Saturation and Lightness, alpha transparency)
3- RGBA (Red, green, blue, alpha transparency)
Let’s explore them in more details.
Hexadecimal values
Color can be defined using hexadecimal values with values ranging from 00 to FF. It is defined by putting values for red, green, blue (in order) prepended by a hash (#).
Format #RRGGBB
e.g. - #ff00ff
RGB Format
RGB Format is similar to hexadecimal value format. We use base-10 values or percentages for defining the color. Also, unlike hexadecimal value format, we use encapsulate the color value in “rgb()”.
Format: rgb(RR, GG, BB) or rgb(rr%, gg%, bb%)
e.g.: rgb(255, 0,127), or rgb(100%, 0, 50%)
Note that we cannot club absolute values with percentages (e.g. rgb(100, 5%, 0) is not acceptable).
In addition to what we define in rgb format, we can also define alpha transparency in rgba format with CSS3.
Alpha transparency is a measurement of transparency which can be declared in absolute values which can range from 0 to 1.
Format: rgb (RR, GG, BB, A) or rgb(rr%, gg%, bb%, A)
e.g.: rgb(255, 0,127, 1), or rgb(100%, 0, 50%, 0.5)
HSL – Hue, Saturation, and Lightness
hsl is a new way to declare color in CSS3. The hsl format is based on selecting a hue as the base and tweaking the lightness/darkness and saturation of the hue.
hsl syntax is similar to rgb format. However, the difference is rgb is defined by specifying values for red, green and blue, whereas hsl is specified by specifying the degree of hue (ranges from 0 to 359), and percentages for saturation and lightness.
Here are some hue values for various colors:
- Red = 0
- Yellow = 60
- Green = 120
- Cyan = 180
- Blue = 240
- Magenta = 300
Lightness can vary from 0 to 100%, with 50% value implying the actual hue setting.
Format: hsl (hue, lightness, saturation)
e.g: rgb(300, 50%, 50%)
HSLA – Hue, Saturation, Lightness and Alpha Transparency
In addition to what we define in the hsl format, hsla also allows declaring alpha transparency.
Format: HSL (hue, lightness, saturation, alpha transparency)
e.g: rgba(300, 50%, 50%, 0)
Also in CSS3
- currentColor is a keyword introduced in CSS3 which accepts the values which apply to color property, and is very helpful to create bolder text on font using text shadows.
- transparent is another keyword which is used to declare transparency. It is a short form for writing rgba(0,0,0,0).
Summary
In this article, we learned about the various color based styling options available in CSS3 for web developers to use in web applications.
