CSS Colors Tutorial RGB, HEX, RGBA, HSL Explained with Examples

Colors

CSS (Cascading Style Sheets) provides multiple ways to apply colors to HTML elements, helping you style and beautify your web pages efficiently.

Types of Color Formats in CSS

CSS supports the following color formats:

1. Keyword Colors

2. Hexadecimal Notation

3. RGB and RGBA

4. HSL and HSLA

1. Keyword Colors

CSS provides a set of predefined color names that are easy to remember.

Examples:

blue

green

yellow

black

white

grey

purple

Syntax:

p {
  color: yellow;
  background-color: blue;
}

Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS color property</title>
    <style>
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>QUIPOIN</h1>
</body>
</html>

Output:

2. Hexadecimal Notation

Hex values are a popular way to define colors in CSS. They use a # followed by six characters (two for Red, Green, and Blue).

Examples:

#FF0000 - Red

#00FF00 - Green

#0000FF - Blue

3. RGB Color Format

RGB defines color using Red, Green, and Blue channels (values between 0–255).

Examples:

rgb(255, 0, 0) - Red

rgb(0, 255, 0) - Green

rgb(0, 0, 255) - Blue

Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS RGB color property</title>
    <style>
        h1 {
            color: rgb(0, 153, 0);
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Quipoin</h1>
</body>
</html>

Output:

4. RGBA Color Format

RGBA is just like RGB, but with an extra Alpha value (opacity).

Alpha ranges from 0 (transparent) to 1 (opaque).

Syntax:

color: rgba(R, G, B, A);

Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS RGBA color property</title>
    <style>
        h1 {
            color: rgba(0, 153, 0, 0.5);
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>QUIPOIN</h1>
</body>
</html>

Output:

5. HSL and HSLA Format

HSL: Hue, Saturation, Lightness

HSLA: HSL + Alpha (opacity)

Examples:

hsl(0, 100%, 50%) - Bright red

hsla(120, 100%, 50%, 0.5) - Semi-transparent green

Key Point

CSS supports both numeric and keyword-based color definitions.

Use RGBA/HSLA for advanced control including transparency.

CSS colors help enhance UI, UX, SEO, and responsiveness.