In CSS, colors can be represented in several ways:

• Named colors (e.g yellow, blue)
• RGB (e.g 60, 143, 82)
• HSL (e.g 136, 58%, 56%) (Hue-Saturation-Lightness)
• Hexadecimal (e.g. #3c8f52)

Ex:

/* Define a box filled in with color */
/* By Named colors */
.box {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

/* By RGB (range from 0~255) */
.box {
  width: 200px;
  height: 200px;
  background-color: rgb(75, 176, 44);
}

/* By RGBA ('a' short for Alpha, meaning transparency between 0~1) */
.box {
  width: 200px;
  height: 200px;
  background-color: rgba(75, 176, 44, 0.5);
}

/* By Hexadecimal */
.box {
  width: 200px;
  height: 200px;
  background-color: #4bb02c;
}

/* By hsl */
.box {
  width: 200px;
  height: 200px;
  background-color: hsl(106, 60%, 43%);
}

/* By hsla ('a' short for Alpha, meaning transparency between 0~1)*/
.box {
  width: 200px;
  height: 200px;
  background-color: hsla(106, 100%, 43%, 0.5);
}

Note: By convention, hexadecimal is the most popular way to use, but it doesn’t support Alpha channel. If you prefer to adjust the color shadow and brightness like me, then hsl is a better choice.

Tips: You can always google Color Picker to pick your ideal color.