CSS Colors:
CSS uses color values to specify a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.
Result:
CSS Background Color:
You can set the background color for HTML elements:
CODE:
Result:
CSS Text Color:
You can set the color of the text:
CODE:
Result:
CSS Border Color
You can set the color of borders:
CODE:
Result:
CSS Color Values:
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
CODE:
Result:
CSS RGB Value:
In CSS, a color can be specified as an RGB value, using this formula: RGB(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
To display the color black, all color parameters must be set to 0, like this: RGB(0, 0, 0).
To display the color white, all color parameters must be set to 255, like this: RGB(255, 255, 255).
CODE:
Result:
CSS HEX Value:
In CSS, a color can be specified using a hexadecimal value in the form: #rrggbb
Where RR (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
CODE:
Result:
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: HSL(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
CODE:
Result:
Saturation:
Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray. 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color.
CODE:
Result:
Lightness
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
CODE:
Result:
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color. An RGBA color value is specified with RGBA(red, green, blue, alpha)
An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
CODE:
Result:
HSLA Value :
HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.
An HSLA color value is specified with HSLA(hue, saturation, lightness, alpha). An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
CODE:
Result:
You may also like : CSS How To