CSS

CSS Colors

CSS has many different ways to express colors. The main ways are:

  • hexadecimal - this is the familiar #000000 style color code found in image editors like photoshop and gimp.
  • rgb(a) - this is the red, green and blue value of the color, with an optional 'a' for alpha, or transparency.
  • hsl(a) - this is the hue, saturation and lightness value of the color, with again, an optional 'a' for transparency.
  • keywords - these are keywords which refer to a specific color, i.e. red, green, blue, orange, etc.

Note that all of these are just different ways of expressing a color, and all colors can be expressed in these formats. When picking colors, there are plenty of online tools. You can also use your image editor of choice.

Hexadecimal

Hexadecimal or hex is arguably one of the most common formats colors appear in, and is the color code most people would be familiar with. In CSS, hexadecimals also have an optional last 2 digits which refer to the opacity.

An example of a hexadecimal color code is shown below:

css Copy
p { color: #000000; /* A black text color */ }

As mentioned, you can also use an additional two digits for opacity, so you may see something like this as well:

css Copy
p { color: #0000004f; /* Black, but slightly transparent */ }

RGB(A)

RGB colors can be denoted as follows:

css Copy
p { color: rgb(255,255,255); /* White */ } a { color: rgba(0,0,0,0.5); /* Black with 50% transparency */ }

HSL(A)

HSL colors can be denoted as follows:

css Copy
p { color: hsl(0,100%,50%); /* Red */ } a { color: hsla(0,100%,50%,0.5); /* Red with 50% transparency */ }

Keywords

Colors can also be denoted by keyword, for example, green, red, or orange. CSS provides a number of keywords all of which can be viewed below:

Last Updated Saturday, 3 April 2021

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email