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 colors by name

css colors screen

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 colors by name: text color

CSS Background Color:

You can change the background color according to your need and text. Have a look at the following example:

css colors: changing Background color with css

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:

RGB , RGBA value

RGB value

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:

color value in RGB

css colors:  rgb value

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:

HEX value

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.

hue, saturation and lightness

Let’s understand this with the help of an example:

hsl coding

css colors: hsl

CSS colors: Saturation

css hsl saturation

css colors by name: saturation

CSS colors: Lightness

css hsl: lightness

hsl lightness

How to Create of Shades of Gray?

Shades of Gray with RGB

shades of gray

shades of gray hsl

Shades of Gray with Light Sources:

equal values of light sources

shades of gray with same light sources

Shades of Gray with Hue and Saturation:

same value of hue and saturation

CSS colors by name: shades of gray

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.

RGBA

CSS colors by name: RGBA

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.


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *