This post will let you know all CSS colors by name, how to name CSS colors, how many CSS colors are there, what’s its importance and it can be useful for you. CSS allows you to use colors from a wide range to make your webpage more attractive, engaging, and colorful. In CSS, We use color names to specify a particular color, or we assign values related to the colors.
We will be using Brackets (software for Coding) from now onwards for all our examples. I recommend you to download this software for your further use, it’s free to download. It’s a bit easy and quite comfortable to use. To download Brackets, click here.
CSS Color Names and Values
Color names in CSS are generally assigned values and they are used in this way with pre-defined names of the colors. Commonly used values with pre-defined names of the colors are RGB, HEX, HSL, RGBA, HSLA. Let’s understand it in a better way:
RGB stands for RED, GREEN, and BLUE.
HEX stands for HEXADECIMAL value.
HSL stands for HUE, SATURATION and LIGHTNESS
RGBA stands for RED, GREEN, BLUE, and ALPHA
HSLA stands for HUE, SATURATION, LIGHTNESS and ALPHA
In RGBA and HSLA, “A” is representing the Alpha parameter, which is basically used for adding Transparent nature. It holds minimum value “0.o (zero)” and maximum value as “1.0”. Where “0.0” stands for fully transparent, while “1.0” stands for no transparent at all.
We will read each and every value in detail with examples on how to use them in different places and see their effects live on the browser.
CSS text Color:
You can change the text color with the help of CSS in the HTML document. Follow the steps as given in the example below:
CSS Background Color:
You can change the background color according to your need and text. Have a look at the following example:
CSS color Value:
As we have already discussed, names in CSS have their pre-defined values like RGB, HEX, HSL, RGBA, and HSLA. Instead of using color names, we can use values also so as to implement our code. Let’s understand this with the help of an example:
CSS colors: RGB Value
Colors in CSS can be specified by RGB value, where R stands for Red, G stands for Green and B stands for Blue.
The values assigned to these colors are put inside the brackets as per the place of the colors. Suppose RGB (x, y, z) is the value of the color assigned in RGB. Here “x” will represent the value assigned to the red color, while “y” represents the value assigned to the green color, similarly, “z” will represent the value assigned to the Blue color.
These values can be assigned in the limit from 0 to 255. Understand this with the example, suppose you want you to show blue color only, then you will assign values like this RGB(0, 0, 255). It means you are assigning the values of red and green color as zero, while the blue color is assigned the full value. Similarly, all the colors can be formed with the variations in the value of these colors. Let’s understand this with the help of the example:
CSS colors: HEX value
In the above paragraph, we see that we can produce colors by assigning RGB values. There is another method also to use colors in HTML. CSS colors can also be specified by assigning hexadecimal values. The formula for putting values looks like this: #rrggbb.
We can assign these values in the limit from “00” to “ff”, where “00” is the lowest value, while “ff” is the highest value (like (0-225).
For example, #00ff00 is displayed as green, because the value of green is set as highest, other colors’ values are set to the lowest. Let’s understand this with an example:
CSS colors: HSL Value
As we discussed earlier, HSL stands for Hue, Saturation, and Lightness. But, what are these terms, and how are they use in CSS? Let’s understand this.
- Hue represents the degree on the color wheel which is between 0 – 360. Where 0 is represented by RED, 120 is Represented by GREEN and 240 is Represented by BLUE colors respectively.
- Saturation is used in the terms of a percentage value, where 0% is displayed as a shade of grey, while 100% displayed as full color.
- Lightness is also represented in terms of percentage which is for black to white colors. 0% is black color, 50% is neither dark or light, while 100% is white.
Let’s understand this with the help of an example:
CSS colors: Saturation
CSS colors: Lightness
How to Create of Shades of Gray?
Shades of Gray with RGB
Shades of Gray with Light Sources:
Shades of Gray with Hue and Saturation:
CSS colors: RGBA Value
RGBA is an extention of RGB value with the addition of alpha parameter, which provides the option of transparent nature to the shades of color. This is basically a number between zero and one, where zero stands for fully transparent, one stands for no transparent at all.
Same thing you can do with HSLA, by keeping all the values same, and adjusting the values of alpha parameter.
If you want to explore more CSS colors by name, and HEX value, click here.