Well! In CSS colors can be defined through various methods such as using predefined color names, hexadecimal values, etc. This write-up will discuss the following methods to set the background color, text color, and border colors:
- Predefined color names such as Red, Green, Orange, etc.
- Hexadecimal color values such as #RRGGBB, #00ff00, etc.
- RGB color values such as rgb(255, 0, 0); rgb(0, 255, 255), etc.
- RGBA color values such as rgb(255, 255, 0, 0.7), rgb(255, 0, 0, 0.1), etc.
- HSL color values such as HSL(0, 100%, 50%), HSL(240, 100%, 50%), etc
- HSLA color values such as HSL(0, 100%, 50%, 0.5), HSL(240, 100%, 50%, 0.2), etc
All the above mentioned color conventions will be discussed with examples. So, let’s start this journey with the predefined color names.
CSS Predefined Color Names
CSS provides numerous predefined color names for example red, yellow, green, etc. These color names can be used for styling the background, text, etc.
Let’s understand the concept of the predefined color names using the below-given example
Let’s say we have an <p> element and we want to style its text color using predefined color values:
Simply assign the color name to the color property and as a result you will get the following output:
CSS Hexadecimal Color
The Hexadecimal colors are defined by a “#” symbol with six digits code. It takes values from 0 to 15 however the 10 will be represented with A, 11 with B, and so on up to 15 which will be specified with F.
Since hexadecimal is a six-digit code i.e #e3e3e3, the first two slots for the red color, the next two for green, and the last two for blue color. The combination of these six digits specifies a new color e.g. #FFFF00 represents the yellow color.
The below-given lines will set the green background color to
element using hexadecimal values:
Above code provides following output:
CSS RGB Color
The RGB color is combination of red, green, and blue. The rgb() function takes values from 0 to 255. Specifying different values in the rgb() function results in various combinations of colors. For example rgb(255, 0, 0) will generate the red color.
The following piece of code specifies the RGB value to set the gray text color of the paragraph:
background-color: rgb(128, 128, 128);
The output sets the gray background color:
CSS RGBA Color
The transparency factor can be added to the RGB colors by adding the alpha value in it. The alpha parameter takes the values between 0 and 1. The lower value makes the color transparent while the higher value makes the color opaque. For example, adding 0.0 will make the color transparent, while 1.0 will make the color fully opaque.
Let’s add the alpha parameter in the above example.
background-color: rgba(128, 128, 128, 0.2);
In the above code 0.2 is added as the value of alpha parameter which makes the background color transparent:
CSS HSL Color
HSL is an acronym of Hue, Saturation, and lightness.
- The term hue defines the angel inside the color wheel.
- Saturation defines the color’s intensity.
- Lightness specifies the lightness levels.
Lightness and saturation will be represented by the % sign.
Let’s color the background of <p> element using HSL color values.
background-color: HSL(334, 80%, 56%);
The above code will set the pink background of the
CSS HSLA Color
The HSL color convention can be extended to the HSLA. The A represents the alpha parameter which is used to add the transparency effects on the color.
Let’s extend the previous example a little bit and add the alpha parameter as well:
background-color: HSL(334, 80%, 56%, 0.3);
The above code will show the following output:
CSS provide multiple colors and methods to set the color of an element like predefined color names, the combination of values between 0 to 255 within the rgb(), or the values for hue, saturation, and light can be used. Furthermore, an alpha parameter can be used with RGB and HSL to add the transparency effect on the color. This write-up presented a comprehensive and elaborated overview of the CSS colors and different methods to set the colors in CSS.