Chapter 1.3☕ 14 min read

Colors & Backgrounds

Charminar ke rang — hex, rgb, gradients tak. Every visual starts with color.

01Color Formats — How to Write Colors in CSS

CSS supports six color formats. Each has its use case.

Hex — #f97316, #fff — Most common. 6 chars for full, 3 for shorthand.
RGB / RGBA — rgb(249,115,22) / rgba(249,115,22,0.5) — Red, Green, Blue with optional alpha.
HSL / HSLA — hsl(25,95%,53%) / hsla(25,95%,53%,0.5) — Hue, Saturation, Lightness.
Named Colors — tomato, rebeccapurple — 147 named colors supported in CSS.
CurrentColor — color: currentColor — Inherits the current text color.
Gradients — linear-gradient(...) — Smooth color transitions.

/* Hex — most common format */
.heading { color: #f97316; }
/* RGB with alpha transparency */
.overlay { background: rgba(249, 115, 22, 0.3); }
/* HSL — intuitive for color picking */
.cta { background: hsl(25, 95%, 53%); }
/* Named colors */
.error { color: red; }

#f97316Hex — most common. 6 chars = full color

rgba(249,115,22,0.5)RGB + Alpha — 50% transparent

hsl(25,95%,53%)HSL — intuitive for color picking

tomatoNamed color — 147 options

#f97316 rgb(16,185,129) hsl(270,72%,58%) rgba(239,68,68,0.7) tomato

02Background Properties

Background is not just a color — you can use images, control size, position, and repeat behavior.

Property Description

background-color Solid color fill — most basic background

background-image URL to an image or a gradient function

background-size cover (fills area), contain (fits inside), or exact px/%

background-position Where the image sits: center, top, bottom, 10px 20px

background-repeat repeat (default), no-repeat, repeat-x, repeat-y

background Shorthand — combine all in one line

.hero {
  /* Individual properties */
  background-color: #f97316;
  background-image: url('charminar.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Shorthand — same as above */
  background: #f97316 url('charminar.jpg') center/cover no-repeat;
}

Pro Tip: background-size: cover fills the area without distortion — use it 90% of the time. contain fits the whole image inside.

03Gradients — No Image Needed

CSS gradients create smooth color transitions without any image file. Two main types: linear (direction) and radial (circle/ellipse).

/* Linear — straight line transition */
.hero {
  background: linear-gradient(135deg, #f97316, #ef4444);
}

/* Radial — circular from center */
.sun {
  background: radial-gradient(circle, #fcd34d, #f97316);
}

/* Multiple color stops */
.sky {
  background: linear-gradient(
    to bottom,
    #1e3a5f 0%,
    #f97316 50%,
    #fcd34d 100%
  );
}

/* Repeating gradient */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f97316 0px, #f97316 10px,
    #fff7ed 10px, #fff7ed 20px
  );
}

💡

Try this: Change gradient direction to to top, add a third color stop, or try radial-gradient(circle, ...).

04Opacity vs Alpha Transparency

Two ways to make things transparent — each behaves differently:

opacity: Affects the ENTIRE element including text & children. opacity: 0.5; makes everything 50% transparent.
RGBA/HSLA alpha: Only affects the color, text stays fully visible. rgba(249,115,22,0.5) — background 50% transparent, text 100%.

.overlay {
  /* Only background becomes transparent — text stays solid */
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

.fade-out {
  /* Everything becomes transparent — including text and children */
  opacity: 0.5;
}

/* Visual comparison */
.bg-alpha  { background: rgba(249, 115, 22, 0.5); }  /* BG only faded */
.bg-opacity { opacity: 0.5; }                          /* Everything faded */

Rule of thumb: Use alpha (rgba/hsla) for backgrounds. Use opacity only when you want the whole element including text to fade.

05Exercise — Colors Playground

Write CSS below and see instant preview. Experiment with colors, gradients, and backgrounds.

Open VS Code. Create colors-practice.html.

Use the starter code and practice different color formats:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colors Practice</title>
  <style>
    .box {
      padding: 40px;
      border-radius: 16px;
      text-align: center;
      font-family: Georgia, serif;
      color: white;
      font-size: 20px;
    }
    .box1 { background: linear-gradient(135deg, #f97316, #ef4444); }
    .box2 { background: radial-gradient(circle, #fcd34d, #f97316); }
    .box3 { background: linear-gradient(to right, #1e3a5f, #3b82f6, #10b981); }
  </style>
</head>
<body>
  <div class="box box1">🔥 Linear Gradient</div>
  <div class="box box2">⚪ Radial Gradient</div>
  <div class="box box3">🌈 Multi-stop Gradient</div>
</body>
</html>

Try these experiments:

Change hex color to RGB format — see the difference Add background-size: cover with an image URL Try radial-gradient(ellipse, ...) instead of circle Add opacity: 0.7 to a box — see how text also fades Use background: rgba(0,0,0,0.5) — only background fades

Done — Key Points:

✅ 6 color formats: hex, rgb, rgba, hsl, hsla, named colors (147 available)
✅ background-size: cover fills area without distortion — use it 90% of the time
✅ linear-gradient(direction, c1, c2) — direction = degrees or to-right, to-bottom
✅ radial-gradient(circle, ...) for circular, radial-gradient(ellipse, ...) for oval
✅ Alpha transparency (rgba) only affects color — opacity affects everything including text & children
✅ Shorthand: background: #fff url(img.jpg) center/cover no-repeat

Previous1.2 — Selectors & Specificity 📋 All Chapters Next Chapter1.4 — Typography & Fonts →