CSS Color Values

Learn different ways to define colors in CSS using color names, HEX, RGB, and RGBA values.

What are CSS Color Values?

CSS allows us to define colors in different formats. These values can be used with properties such as color and background-color.

The most common color formats are: Color Names, HEX, RGB, and RGBA.

1. Color Name

CSS provides predefined color names such as red, blue, green, and orange.

h1 {
    color: red;
}

Output

2. HEX Color

HEX represents a color using hexadecimal values. A HEX color normally starts with #.

For example, #ff0000 represents red.

h1 {
    color: #ff0000;
}

Output

3. RGB Color

RGB stands for Red, Green, Blue.

Each value normally ranges from 0 to 255.

h1 {
    color: rgb(0, 128, 0);
}

Output

4. RGBA Color

RGBA is similar to RGB, but it also supports transparency using the Alpha value.

The Alpha value ranges from 0 to 1.

• 0 = completely transparent
• 0.5 = 50% transparent
• 1 = completely visible

div {
    background-color: rgba(255, 0, 0, 0.5);
    padding: 20px;
}

Output

Common CSS Color Formats