learn2kode.in

Menu

CSS Tutorial

Menu

CSS Colors

CSS provides multiple ways to apply colors to text, backgrounds, borders, and other elements on a webpage. Colors help improve the visual appearance and readability of your design. CSS supports a wide range of color formats, giving developers flexibility based on their design needs.

1. Color Names

CSS includes around 140 predefined color names such as:

  • Red
  • Green
  • Blue
  • Yellow
  • Purple
  • Gray

Example

Copy Text 
p{
color:blue;
}

2. HEX Colors

HEX values represent colors using a hexadecimal code.

Example

Copy Text 
h1 {
  color: #ff5733; /* orange-red */
}

Short version (3 digits):

Copy Text 
h1 {
  color: #f53;
}

3. RGB Colors

RGB stands for Red, Green, Blue. Each value ranges from 0 to 255.

Copy Text 
p {
  color: rgb(120, 80, 200);
}

4. RGBA Colors

Similar to RGB, but includes an alpha (opacity) value (0.0 – 1.0).

Copy Text 
div {
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent */
}

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness.

Copy Text 
p {
  color: hsl(200, 70%, 50%);
}

6. HSLA Colors

HSL with an alpha transparency value.

Copy Text 
button {
  background: hsla(150, 60%, 40%, 0.6);
}

7. CurrentColor Keyword

This keyword uses the current text color for other properties.

Copy Text 
div {
  color: darkblue;
  border: 2px solid currentColor;
}

8. Transparent Keyword

Used to make an element fully transparent.

Copy Text 
.box {
  background-color: transparent;
}
CSS Backgrounds