Types of Colors in CSS

Color is one of the most important aspects of web design. It is used to make the website look more attractive and appealing. It is also used to convey a message to the user.

Color values in CSS are used to specify colors to HTML elements. Here are some of the colors shown below.

Defining CSS color

There are three ways to define a color in CSS.

1. HEX
2. RGB
3. HSL
4. Color Name

1. RGB color

RGB color is defined using the rgb() function. It takes three parameters, red, green, and blue. Each parameter can have a value from 0 to 255.

For example, rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(0, 0, 255) is blue.

Let's see an example.

div {
    background-color: rgb(255, 0, 0);
    color: rgb(0, 0, 0);
}

You can choose colors of different values here.

2. HEX color

HEX color is defined using the hexadecimal notation. It is a six-digit code that represents the amount of red, green, and blue in a color, preceded by a # sign.

Color is defined as #rrggbb where rr represents the color red, gg represents the color green and bb represents the color blue.

For example, #ff0000 is red, #00ff00 is green, and #0000ff is blue.

div {
    background-color: #ff0000;
    color: #000000;
}

Note: The value of each character can be from 0 to 9 or from A to F in hexadecimal notation.

3. HSL color

HSL color is defined using the hsl() function. It takes three parameters, hue, saturation, and lightness.

1. Hue - It is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
2. Saturation - It is a percentage value, 0% means a shade of gray and 100% is the full color.
3. Lightness - It is also a percentage, 0% is black, 50% is neither light nor dark, and 100% is white.

For example, hsl(0, 100%, 50%) is red, hsl(120, 100%, 50%) is green, and hsl(240, 100%, 50%) is blue.

div {
    background-color: hsl(0, 100%, 50%);
    color: hsl(0, 0%, 0%);
}

4. Color Name

There are 147 predefined color names in CSS. You can use any of these color names in your CSS code.

Some of the most commonly used color names are:

• red
• green
• blue
• yellow
• orange
• pink
• purple
• brown
• black
• white
• gray

div {
    background-color: red;
    color: black;
}

Transparent Colors

Transparent colors are the colors we can see through. They are also called alpha colors.

There are 3 ways to define transparent colors in CSS.

• RGBA - It is defined using the rgba() function. It takes four parameters, red, green, blue, and alpha. Alpha is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
• HSLA - It is defined using the hsla() function. It takes four parameters, hue, saturation, lightness, and alpha. Alpha is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
• HEXA - It is defined using the #rrggbbaa notation. It is a six-digit code that represents the amount of red, green, and blue in a color, preceded by a # sign. The last two digits represent the alpha value. Alpha is a number between 00 (fully transparent) and ff (fully opaque).

.box-1 {
    background-color: rgba(255, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.5);
}

.box-2 {
    background-color: hsla(0, 100%, 50%, 0.5);
    color: hsla(0, 0%, 0%, 0.5);
}

.box-3 {
    background-color: #ff000080;
    color: #00000080;
}