Color Name

You can use the color's name directly, such as "red", "blue", "green", etc. This is the simplest way to specify colors, but it's limited to a set of predefined colors.

body {
  background-color: red;
}

RGB and RGBA

RGB (Red, Green, Blue) is a color model that uses three values (0-255) to represent the intensity of red, green, and blue light. RGBA (Red, Green, Blue, Alpha) is an extension of RGB that adds an alpha channel (0-1) to control the opacity.

body {
  background-color: rgb(255, 0, 0);  /* Red */
  background-color: rgba(255, 0, 0, 0.5);  /* Semi-transparent red */
}

Hex and HeXA

Hexadecimal color codes are another way to specify colors. They use a six-digit code (e.g., #FF0000 for red) that represents the intensity of red, green, and blue light. HeXA (Hexadecimal with Alpha) is an extension of Hex that adds an alpha channel (0-F) to control the opacity.

body {
  background-color: #FF0000;  /* Red */
  background-color: #FF000080; /* Semi-transparent red */
}

HSL and HSLA

HSL (Hue, Saturation, Lightness) is a color model that uses three values to represent the color's hue (0-360), saturation (0-100%), and lightness (0-100%). HSLA (Hue, Saturation, Lightness, Alpha) is an extension of HSL that adds an alpha channel (0-1) to control the opacity.

body {
  background-color: hsl(0, 100%, 50%);  /* Red */
  background-color: hsla(0, 100%, 50%, 0.5);  /* Semi-transparent red */
}

Summary

• You can specify colors in CSS using color names, RGB/RGBA, Hex/HeXA, or HSL/HSLA.
• Each method has its advantages and disadvantages, so choose the method that best suits your needs.
• Use CSS variables to define and reuse color values.
• Prioritize accessibility and choose colors that are easy to read.