CSS Colors

CSS allows you to set colors for text, backgrounds, borders, and more. Colors can be defined using names, HEX, RGB, RGBA, HSL, or HSLA.

1) Color Names


p {
  color: red;
}

There are 140 predefined color names in CSS like red, blue, green, black, white.

Red Blue Green

2) HEX Colors


h1 {
  color: #ff0000;
}

HEX values start with # followed by 6 characters (0–9, A–F). Example: #ff0000 = red.

3) RGB Colors


div {
  color: rgb(0, 128, 0);
}

RGB uses values between 0–255 for red, green, blue. Example: rgb(0,128,0) = green.

4) RGBA (with transparency)


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

RGBA adds an alpha channel (0–1) for transparency. Example: 0.5 = 50% transparent red.

5) HSL Colors


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

HSL = Hue (0–360), Saturation (%), Lightness (%). Example: hsl(240,100%,50%) = blue.

6) HSLA (with transparency)


p {
  color: hsla(120, 100%, 25%, 0.5);
}

HSLA is just HSL with alpha for transparency.

Quick Notes:

  • Use color for text color.
  • Use background-color for background color.
  • HEX, RGB, and HSL all define the same colors, just in different formats.
  • RGBA & HSLA allow you to add transparency.