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.

Salmon
Blue Violet
Dark Cyan
Gold
Pink
Orange
Tomato
Indian Red
Aquamarine
Black

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.

Example

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

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.

Example

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

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.

Example

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

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:

Example

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

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.

Example

.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;
}
Try it