HTML and CSS Reference
In-Depth Information
RGB AND RGBA
RGB (actually available since CSS2) works in a similar way to hex values. You define
red, green, and blue channels, but you do it using numbers between 0 and 255, not
pairs of hexadecimal numbers:
rgb(255,0,0)
.
Equivalent to
#ff0000
or
red
rgb(255,255,255)
.
Equivalent to
#ffffff
or
white
RGBA takes this a step further, adding a fourth value that specifies the alpha
channel, or the opacity of the color. This value is between 0 and 1; 0 is completely
transparent, and 1 is completely opaque:
rgba(255,0,0,1)
.
Full red with full opacity
rgba(255,0,0,0.5)
.
ll d t 0 t t t
rgba(255,0,0,0.2)
.
ll d t 0 t t t
HSL AND HSLA
HSL—hue, saturation, and lightness—is a different way of defining a color, which
makes a lot of sense to many people, especially designers who are used to using
graphics editors. The syntax looks like this:
hsl(0,100%,50%)
.
Equivalent to
#ff0000
or
red
hsl(0,0%,100%)
.
i l t to
#ffffff
or
white
The first value—hue—takes a value between 0 and 360. It's basically a point
around a standard color wheel circle.
The second value—saturation—takes a value of 0-100% and refers to how
bright the color is; 100% is full color, and 0% is greyscale.
The third value—lightness—takes a value of 0-100% and refers to how light
the color is; 100% is completely light/white, and 0% is completely dark/black.
