🎨 Color Definitions in CSS

Colors play a major role in web design and user experience.

In CSS, colors are used for:

• Text
• Backgrounds
• Borders
• Shadows
• Gradients
• UI elements

CSS provides several different ways to define colors.

The four most common color systems are:

• 1.Named Colors
• 2.RGB and RGBA
• 2.HSL and HSLA
• 2.Hexadecimal Colors

CSS includes many predefined color names that you can use directly.

These are simple and beginner-friendly.

p {
  color: red;
}

h1 {
  background-color: blue;
}

div {
  border-color: green;
}
                

Some popular named colors include:

• red
• blue
• green
• black
• white
• gray
• orange
• purple

Named colors are easy to use, but they provide limited color variety.

RGB stands for:

• Red
• Green
• Blue

Each color value ranges from:

0 → 255

By combining these values, you can create millions of colors.

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

p {
  color: rgb(0, 0, 255);
}
                

• rgb(255, 0, 0) → Red
• rgb(0, 0, 255) → Blue

RGBA adds an alpha channel for transparency.

Alpha values range from:

0.0 → fully transparent
1.0 → fully opaque
                

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

p {
  color: rgba(0, 0, 255, 0.7);
}
                

💡 This creates semi-transparent colors.

HSL stands for:

• Hue
• Saturation
• Lightness

This system is often easier for humans to understand and adjust.

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

p {
  color: hsl(120, 100%, 50%);
}
                

• hsl(0, 100%, 50%) → Red
• hsl(120, 100%, 50%) → Green

HSLA adds transparency support.

div {
  background-color: hsla(0, 100%, 50%, 0.5);
}
                

💡 Creates a semi-transparent red color.

Hex colors are one of the most widely used color systems in CSS.

They use hexadecimal values to represent RGB colors.

#RRGGBB

Each pair represents:

• RR → Red
• GG → Green
• BB → Blue

Values range from:

0–9 and A–F

div {
  background-color: #ff0000;
}

p {
  color: #00ff00;
}

h1 {
  border-color: #0000ff;
}
                

• #ff0000 → Red
• #00ff00 → Green
• #0000ff → Blue

Different color systems can be used together in the same element.

div {
  background-color: #3498db;

  color: rgba(255, 255, 255, 0.8);

  border: 2px solid hsl(200, 80%, 40%);
}
                

Hex colors can also use shorthand notation.

Different color systems can be used together in the same element.

div {
  background-color: #3498db;

  color: rgba(255, 255, 255, 0.8);

  border: 2px solid hsl(200, 80%, 40%);
}
                

• Background uses Hex
• Text uses RGBA
• Border uses HSL