Colour is an integral part of designing a website. Proper colour usage makes a user's experience grow!

Named colours

CSS has provided us with named colours. There are plenty of these and they can be used by simply using their names.

div {
  color: red;
  background-color: violet;
  border-color: black;
}

Here's a list of them: CSS Named Colours

Hex Values

Hex values are probably the most common colour format you've seen. The hex value starts off with a hash symbol (#) followed by 6 characters each ranging from 0 to F. Each pair corresponds to the intensity of red, green, or blue.

div {
  color: #FF0000; /* Red */
  background-color: #FF00FF; /* Violet */
  border-color: #000000; /* Black */
}

rgb

The RGB value is similar to hex values. Where you specify the intensity of the red, green, and blue to create a colour. The main difference, aside from structure, is it goes from 0 to 255.

div {
  color: rgb(255, 0, 0); /* Red */
  background-color: rgb(255, 0, 255); /* Violet */
  border-color: rgb(0, 0, 0); /* Black */
}

rgba

RGBA is exactly the same as RGB but you can now specify the opacity of the colour where 0 is transparent and 1 is fully opaque.

div {
  color: rgba(255, 0, 0, 1); /* Red fully opaque */
  background-color: rgba(255, 0, 255, 0.5); /* Violet 50% transparent */
  border-color: rgba(0, 0, 0, 0); /* Black fully transparent */
}

hsl

HSL stands for hue, saturation and lightness. This is typically the least popular way to add colour as it's difficult to understand.

Hue[0-360]: The angle of where your target colour is in a colour wheel.
Saturation[0%-100%]: The amount of saturation
Lightness[0%-100%]: The amount of brightness

div {
  color: hsl(300, 100%, 50%); /* Red */
  background-color: hsl(354, 100%, 50%); /* Violet */
  border-color: hsl(0, 0%, 0%); /* Black */
}

hsla

HSLA now adds opacity to the regular HSL where 0 is fully transparent and 1 is fully opaque.

div {
  color: hsla(300, 100%, 50%, 1); /* Red fully opaque */
  background-color: hsla(354, 100%, 50%, 0.5); /* Violet 50% transparent */
  border-color: hsl(0, 0%, 0%, 0); /* Black fully transparent */
}