Can you imagine a website design without colors?
Colors are an integral part of any website design. We can specify the background and foreground color of an element using CSS colors.
Colors help visitors navigate the website easily, focus on key points, and provide a good overall user experience.
Now that we know the importance of CSS colors, wouldn’t it be great to know how colors can be applied to design websites?
In this article, you will learn about CSS colors, their types, functions and ways to specify colors. We will cover the options present in CSS to use colors effectively and when these options should be used.
There are different data types in CSS, like numbers and strings. One of these is CSS colors which use other data types like numbers to get specified.
We can define the color of an element numerically in the following different forms:
Hex is a shorthand syntax for RGB.
The values of R, G and B are hexadecimal integers in the range 0-F.
It assigns a numeric value to the three colors: red, green and blue. They get translated to the RGB numerical ranges, i.e. 0-255 when used in a six-digit sequence.
For example - the hex code #0000FF is used for blue because the values of red and green are 0, and blue is assigned the highest value, F.
The alpha value can also be added to the hex code. An alpha value defines the percentage of transparency. So, in a six-digit hex code, you need to add 2 more digits to specify the alpha value.
Black in hex code is #000000.
If you need to add 50% transparency to this, then the hex code becomes - #00000080
Some of the key transparency and their alpha values are:
- 0% alpha - 00
- 50% alpha - 80
- 75% alpha - BF
Illustration of the above example -
RGB (Red, Green, Blue)
RGB stands for red, green and blue.
The parameters red, green and blue specify the intensity of the respective color in the range 0-255.
So, if you set red and blue to 0 and green to 255, the resulting color will be green.
Let us see some of the examples below:
RGBA stands for red, green, blue alpha. It is an extension of RGB with an additional parameter - alpha which specifies the opacity of the color. Alpha ranges between 0.0(fully transparent) to 1.0(fully opaque).
Syntax: rgba(red, green, blue, alpha)
This is an illustration in which the values of r,g and b are kept constant, and only alpha varies. It clearly shows the variation in opacity of color with the change in alpha.
HSL (Hue, Saturation, Lightness)
Hue specifies the degree on the color wheel in the range 0 to 360, where 0 means red, 120 means green and 240 means blue.
The value of saturation is defined in percentage. 100% saturation means fully saturated, i.e. no grey shades, 50% saturation represents 50% grey, and 0% saturation means fully unsaturated, which is completely grey.
Lightness defines the amount of light to be added to the color.
- 0% no light (black)
- 50% represents neither dark nor light
- 100% represents full lightness (white)
Syntax: color:hsl(hue, saturation, lightness)
HSL Color Wheel Example
We also have HSLA, an extension of HSL with an additional parameter alpha that defines the opacity of the color. The value of alpha varies between 0.0(fully transparent) to 1.0(fully opaque).
Syntax: hsla(hue, saturation, lightness, alpha)
These are the collections of predefined colors that can be referred to by their names, such as black, red, white, blue etc. and to give you a figure there are 148 named colors in CSS.
Syntax : color: color-name
Some of the CSS colors names, along with their hex codes and RGB codes, are as follows:
Frequently Asked Questions
1.What is A in RGBA?
A in RGBA is alpha which is basically an opacity factor.
2. What is the HSL color code?
HSL stands for hue, saturation, and lightness.
3. Among RGB and HSL, which is more human-understandable? Why?
HSL is more human-understandable because it is more intuitive and it mimics the real world. At the same time, RGB and HEX are more machine-readable.
4. What is the difference between HSL and HSLA?
HSLA is an extension of HSL with an added factor: alpha which defines opacity.
In this article, we learnt different ways to specify CSS colors like HEX, RGB, RGBA, HSL etc., along with their syntax and examples.
If you want to master front-end development, check out the 10 Best HTML & CSS books for developers in 2021.
To learn more about CSS fundamentals, check out Introduction to CSS, CSS Selectors, CSS Box Model and CSS Margins.
Also, read CSS Interview Questions which contains the most important conceptual questions asked in interviews for front-end roles.