HTML and CSS Reference
In-Depth Information
3. }
4. .count {
5. background: rgb(255, 255, 0) ;
6. }
RGB color values may also include an alpha, or transparency, channel by using the
rgba() function. The rgba() function requires a fourth value, which must be a number
between 0 and 1 , including decimals. A value of 0 creates a fully transparent color, mean-
ing it would be invisible, and a value of 1 creates a fully opaque color. Any decimal value
in between 0 and 1 would create a semi-transparent color.
If we wanted our shade of orange to appear 50% opaque, we would use an RGBa color
value of rgba(255, 102, 0, .5) .
We can also change the opacity of our maroon and yellow background colors. The fol-
lowing code sets the maroon background color to 25% opaque and leaves the yellow
background color 100% opaque.
Click here to view code image
1. .task {
2. background: rgba(128, 0, 0, .25) ;
3. }
4. .count {
5. background: rgba(255, 255, 0, 1) ;
6. }
RGB color values are becoming more popular, especially due to the ability to create semi-
transparent colors using RGBa.
HSL & HSLa Colors
HSL color values are stated using the hsl() function, which stands for hue, saturation,
and lightness. Within the parentheses, the function accepts three comma-separated values,
much like rgb() .
The first value, the hue, is a unitless number from 0 to 360 . The numbers 0 through 360
represent the color wheel, and the value identifies the degree of a color on the color wheel.
The second and third values, the saturation and lightness, are percentage values from 0 to
100% . The saturation value identifies how saturated with color the hue is, with 0 being
grayscale and 100% being fully saturated. The lightness identifies how dark or light the
hue value is, with 0 being completely black and 100% being completely white.
Returning to our shade of orange, as an HSL color value it would be written as hsl(24,
100%, 100%) .
Search WWH ::

Custom Search