CSS Colors
CSS uses color values to specify colors for various elements, including foreground (text color), background, borders, and decorative effects.
Note: The color property usually inherits the color value from its parent element, except in the case of anchor (<a>) elements. For example, if you specify a color for the body element, it will be automatically applied to headings, paragraphs, and other elements within the body.
Setting Color Property
The color property is used to set the text color (foreground color) of an element. For example, when the color property is specified in the body selector, it defines the default text color for the entire page.
Input:-
Output:-
Defining Color Values
Color values in CSS are commonly specified in the following formats:
-
Color Keywords: These are predefined color names such as "green", "red", "blue", "transparent", and many others.
-
HEX Values: These are six-digit hexadecimal codes that represent colors. For example, "#ff0000" represents red, and "#00ff00" represents green.
-
RGB Values: These are specified using the RGB color model and consist of three values representing the amounts of red, green, and blue respectively. Each value ranges from 0 to 255. For example, "rgb(255, 0, 0)" represents red.
CSS3 has introduced additional color formats that support alpha transparency:
-
HSL (Hue, Saturation, Lightness): It uses the hue, saturation, and lightness values to define a color. For example, "hsl(120, 100%, 50%)" represents pure green.
-
HSLA (Hue, Saturation, Lightness, Alpha): It is similar to HSL but includes an additional alpha value for transparency. The alpha value ranges from 0 (completely transparent) to 1 (fully opaque). For example, "hsla(120, 100%, 50%, 0.5)" represents a semi-transparent green.
-
RGBA (Red, Green, Blue, Alpha): It is similar to RGB but includes an additional alpha value for transparency. The alpha value is specified as a decimal between 0 and 1. For example, "rgba(255, 0, 0, 0.5)" represents a semi-transparent red.
Built-in Color
CSS provides a set of built-in color keywords that allow us to specify color values conveniently.
The basic color keywords are:
These basic color keywords are - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive.
Input:-
Output:-
Modern web browsers however practically support many more color names than what is defined in the CSS standard, but to be on the safer side we should use hex color values instead.
HEX Color
Hexadecimal (HEX) color values represent colors using a six-digit code preceded by a hash character, like #rrggbb. The "rr" represents the red component, "gg" represents the green component, and "bb" represents the blue component of the color.
Each component value can range from 00 (no color) to FF (full color) in hexadecimal notation, or 0 to 255 in decimal equivalent notation. For example, #ffffff represents white, and #000000 represents black. HEX color values are widely used for defining colors on the web.
Input:-
Output:-
Tip: If a hexadecimal color code has pairs of identical values, it can be written in shorthand notation with only three values after the hash. For example, #ffffff can be written as #fff, #000000 as #000, #00ff00 as #0f0, #ffcc00 as #fc0, and so on.
RGB Color
Colors can be defined using the RGB (Red, Green, Blue) model with the rgb() functional notation. The rgb() function accepts three comma-separated values that specify the amount of red, green, and blue components of the color. The values are commonly integers ranging from 0 to 255, where 0 represents no color and 255 represents full color.
Note: The RGB color format is not supported in all browsers, so it is not recommended to rely on it extensively.
Input:-
Output:-
RGBA Color
RGBA color format is similar to RGB, but it includes an additional "A" (Alpha) component that specifies the transparency of the element. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
HSL Color
HSL (Hue, Saturation, Lightness) is a color model that provides a more intuitive way to define colors.
- Hue: It represents the degree on the color wheel, ranging from 0 to 360. Red is at 0 degrees, green at 120 degrees, and blue at 240 degrees.
- Saturation: It is expressed as a percentage and represents the intensity of the color. 100% is fully saturated (no shades of gray), 50% is partially saturated, and 0% is fully unsaturated (completely gray).
- Lightness: It is also expressed as a percentage and represents the brightness of the color. 0% is black (no light), 50% is neither dark nor light, and 100% is white (full lightness).
Input:-
Output:-
HSLA Color
HSLA color format is similar to HSL, but it includes an additional "A" (Alpha) component for transparency. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
