Learn CSS Back to Index
CSS

CSS Colors

Sponsor

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:

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:

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

RGB(A)

RGB colors can be denoted as follows:

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:

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
Johnny Simpson
Johnny Simpson

More from CSS

Subscribe for Daily Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email