In CSS color, a color can be specified by using a color name. Generally, these are used to set a color either foreground of an element or else for the background of the element. Also you can used to set the color of borders and other decorative effects.
CSS uses color values to specify a color. Following are the color values in various formats.
- RGB values
- HEX values
- HSL values
- RGBA values
- HSLA values
CSS Color RGB Value:
This color can be specified as an RGB value. It takes three values, one each for red, green, and blue. Each value (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255) and the others are set to 0.
For white color, all color parameters must be set to 255, like this: rgb(255, 255, 255).
For black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
CSS Color HEX Value:
A hexadecimal value is a another type of representing the color. It is a 6-digit representation.
This hexadecimal value is represented by #RRGGBB.
The starting two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
CSS Color HSL Value:
Colors can be defined the HSL values (hue-saturation-lightness) using the hsl() functional notation. Hue is the degree on the color wheel from 0 to 360. (i.e. the rainbow represented in a circle).
Saturation and lightness are represented as percentages. 100% saturation means full color, and 0% means shade of gray. Whereas, 100% lightness is white, 0% lightness is black, and 50% lightness is normal.
CSS Color RGBA Value:
Colors also can be defined in the RGBA model (red-green-blue-alpha) using the rgba() functional notation. RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity of a color.
The alpha parameter has a value from 0.0 (fully transparent) to 1.0 (fully opaque).
CSS Color HSLA Value:
CSS colors can be defined in the HSLA model (hue-saturation-lightness-alpha) using the hsla() functional notation. HSLA color model is a HSL color model with an alpha channel — which specifies the opacity of a color.
The alpha parameter has a value from 0.0 (fully transparent) to 1.0 (fully opaque).