The color property allows you to specify the color of text inside an element. You can specify any color in CSS in one of three ways:
- rgb values :These express colors in terms of how much red, green and blue are used to make it up. For example: rgb(100,100,90)
- hex codes : These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash # sign. For example: #ee3e80
- color names : There are 147 predefined color names that are recognized by browsers. For example: DarkCyan
CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box.
When picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible. : (High,Medium,low) Contract
CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity).
CSS3 introduces an entirely new and intuitive way to specify colors using hue, saturation, and lightness values.
- Hue : Hue is the colloquial idea of color. In HSL colors, hue is often represented as a color circle where the angle represents the color, although it may also be shown as a slider with values from 0 to 360.
- saturation : Saturation is the amount of gray in a color. Saturation is represented as a percentage. 100% is full saturation and 0% is a shade of gray
- lightness : Lightness is the amount of white (lightness) or black (darkness) in a color. Lightness is represented as a percentage. 0% lightness is black, 100% lightness is white, and 50% lightness is normal. Lightness is sometimes referred to as luminosity.
The hsl color property has been introduced in CSS3 as an alternative way to specify colors. The value of the property starts with the letters hsl, followed by individual values inside parentheses for:(HUE,Saturation,Lightness,Alpha)