Colors in CSS
Colors play a very significant role in designing a webpage. In CSS colors are most frequently used to color the background, text, and border. Here the point is how to set/define the color in CSS?
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
Example
Let’s say we have an
element and we want to style its text color using predefined color values:
HTML
CSS
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.
Example
The below-given lines will set the green background color to
element using hexadecimal values:
HTML
CSS
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.
Example
The following piece of code specifies the RGB value to set the gray text color of the paragraph:
HTML
CSS
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.
Example
Let’s add the alpha parameter in the above example.
HTML
CSS
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.
Example
Let’s color the background of
element using HSL color values.
HTML
CSS
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.
Example
Let’s extend the previous example a little bit and add the alpha parameter as well:
HTML
CSS
The above code will show the following output:
Conclusion
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.
About the author
Anees Asghar
I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.