CSS Colors

Colors are one of the most visually impactful properties in CSS. CSS allows colors to be applied to text, backgrounds, borders, and many other elements. There are several ways to define a color value in CSS, each with its own syntax and use case.

CSS Color Properties

The two most commonly used color-related properties are:

• color – Sets the color of text content.
• background-color – Sets the background color of an element.

Ways to Define Colors in CSS

1. Color Names

CSS supports 140+ built-in color names that can be used directly by name. These are the simplest to use.

h1 {
    color: red;
}

p {
    background-color: lightblue;
}

Common color names include: red, blue, green, yellow, orange, black, white, gray, purple, pink, brown, navy, teal, coral, gold.

2. HEX Color Code

A HEX code is a six-character code starting with a # symbol. It represents a color using a combination of red, green, and blue values in hexadecimal (base 16) format.

The format is: #RRGGBB — where RR is red, GG is green, and BB is blue. Each pair ranges from 00 (none) to FF (full).

h2 {
    color: #ff0000;       /* Pure red */
}

div {
    background-color: #1a73e8;  /* A shade of blue */
}

HEX codes can also be shortened to 3 characters when both digits in each pair are the same: #ff0000 becomes #f00, and #ffffff becomes #fff.

3. RGB Color

RGB stands for Red, Green, Blue. Each value ranges from 0 to 255. Mixing different amounts of these three produces any color.

p {
    color: rgb(255, 0, 0);        /* Red */
    background-color: rgb(240, 240, 240);  /* Light gray */
}

• rgb(0, 0, 0) – Black (no light at all)
• rgb(255, 255, 255) – White (full light on all three)
• rgb(255, 165, 0) – Orange

4. RGBA Color

RGBA is the same as RGB but adds a fourth value — the alpha channel — which controls transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

div {
    background-color: rgba(0, 0, 255, 0.3);  /* Blue at 30% opacity */
}

This is useful for creating overlays, frosted glass effects, or semi-transparent boxes on top of background images.

5. HSL Color

HSL stands for Hue, Saturation, and Lightness. It is a more intuitive way to describe colors:

• Hue – The type of color (0–360 degrees on the color wheel). 0 = red, 120 = green, 240 = blue.
• Saturation – How vivid the color is (0% = gray, 100% = full color).
• Lightness – How light or dark the color is (0% = black, 50% = normal, 100% = white).

h3 {
    color: hsl(200, 80%, 40%);  /* A medium dark blue */
}

6. HSLA Color

HSLA works exactly like HSL but includes the alpha channel for transparency.

section {
    background-color: hsla(120, 60%, 50%, 0.5);  /* Semi-transparent green */
}

Applying Colors — Full Example

body {
    background-color: #f0f4f8;
}

h1 {
    color: #2c3e50;
}

p {
    color: rgb(80, 80, 80);
}

.warning {
    background-color: rgba(255, 0, 0, 0.1);
    color: #c0392b;
}

.success {
    background-color: hsl(145, 63%, 42%);
    color: white;
}

Choosing the Right Color Format

Summary

CSS provides six ways to define colors: color names, HEX codes, RGB, RGBA, HSL, and HSLA. HEX codes are the most widely used in professional web design. RGBA and HSLA are excellent when transparency is needed. All methods are valid — choosing the right format depends on the project's requirements and personal preference.