CSS Colors

Color is the first thing people notice on a page, and CSS gives you several ways to set it. You can use named colors like red or blue, hex codes like #ff5733, or function forms like rgb(255, 87, 51) and hsl(). They all produce the same result, so pick the format that reads best in your code.

Every color value is really a number the browser renders. A hex code is three numbers written in base 16: two digits for red, two for green, two for blue. That is why #ff0000 is pure red. Knowing this helps you read colors without a color picker and spot typos, like a six-digit code missing a character.

The background-color property paints the area behind an element content, padding, and border. Text color, borders, and shadows accept the same color values. In this lesson you will set colors with each format and build a small palette you could use on a real site.

Reading a hex code

A hex code is three pairs of base-16 digits: RRGGBB. Each pair runs from 00 to ff, which is 0 to 255 in decimal. Take #0d9488: red is 0d (13), green is 94 (148), blue is 88 (136). The letter f means 15, so #ffffff is the maximum of every channel: white. Learn the pattern and you can estimate colors at a glance.

/* red 0d, green 94, blue 88 */
color: #0d9488;

/* same color in rgb form */
color: rgb(13, 148, 136);

Contrast is the real skill

Choosing a color is easy. Making it readable is the job. Dark text on a light background, or light text on a dark background, keeps contrast high. The most common mistake is pairing colorful text with a background of similar brightness, like yellow on white or dark blue on black. When in doubt, compare the two colors side by side and squint: if they blur together, they are too close.

.alert {
  background: #fef3c7;
  color: #92400e;
}

/* dark amber on pale cream: strong contrast, no strain */

Transparency with rgba()

rgba() takes red, green, and blue like rgb(), plus a fourth number for alpha, from 0 (fully transparent) to 1 (fully opaque). Use it for overlays, shadows, and hover tints where a solid color feels heavy. A common slip is writing rgba(99, 102, 241) and forgetting the alpha value, which the browser rejects and silently ignores.

background: rgba(99, 102, 241, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

Syntax

body {
  background-color: #0f172a;
  color: #f8fafc;
}

.accent {
  color: #22d3ee;
}

mark{ background:#ffeb3b; color:#000 }