Tutorials Tonight
Follow Us

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.

Blue Violet
Dark Cyan
Indian Red

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);
▶ 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.


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.


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:


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.


.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