Michael Gearon

CSS Colors

Michael Gearon

Last updated on

CSS3 Pseudo Element

There are plenty of ways to add a splash of color to your website with CSS. Typically we set a color for either the foreground of an element such as the text or a link or the background of an element. By default, the user agent stylesheet (the browser) renders the web page with a basic sets of colors for elements like links.

We have these properties:

All of them accept a color value, which can be in different forms. There are also a few ways to specify colors in CSS:

  1. Color keywords
  2. RGB
  3. RGBA
  4. HSL
  5. HSLA
  6. Hexadecimal

Hexadecimal

Probably one of the most commonly used ways to references colours until recently was through hexadecimals. Hexadecimals are 6 (also 3 but we’ll cover this later on) letters or numbers long starting with the “#”.

There are two main parts to the hexadecimals colours which are:

With this in mind let’s take a look at some examples:

3 digits

To confuse things a little more you can also write hexadecimal colours in 3 digits rather than 6. You can see the benefit in doing so as it’s more readable and maintainable.

The alpha channel

We can add the alpha channel by adding 1 or 2 more digits at the end, for example #00000033. Not all browsers support the shortened notation, so use all 6 digits to express the RGB part.

RGB and RGBa

RGB

You can use the rgb() function to calculate a color from its RGB notation, which sets the color based on its red-green-blue parts. From 0 to 255:

p {
color: rgb(255, 255, 255); /* white */
background-color: rgb(0, 0, 0); /* black */
}

RGBa

RGBa offers us the ability to control the alpha value as well as the red, green and blue channels. The alpha value represents the level of transparency the RGB color should have. It can be a value anywhere between 1 and 0 or in a percentage form 100% to 0%.

HSL

Hue, saturation, and lightness (HUE).

When we look at the hue value the best way to think of it is to imagine a color wheel. It goes from 0 degrees right around back to 360 degrees. Red starts at 0 degrees, green begins at 120 degrees and for blue it starts at 240 degrees.

Saturation is percentage based, with 100% being fully saturated which is the maximum intensity. At 0% it is then desaturated.

Lightness is again percentage based with 100% completely light and 0% being completely dark. 50% is the average lightness.

HSLa

HSLa is the same as above about hue, saturation and lightness but you have the additional alpha channel. It is value based from 0 (or in other words 0%) which is fully transparent all the way up to 1 (or 100%) which is fully opaque.

Color keywords

First, we have CSS keywords that define colors. CSS started with 16, but today there is a huge number of colors names:

There is also the values tranparent, and currentColor which points to the color property, for example useful to make the border-color inherit it. They are defined in the CSS Color Module, Level 4. They are case insensitive. Wikipedia has a nice table which lets you pick the perfect color by its name. Named colors are not the only option.

Michael Gearon

Written by
Michael Gearon

Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.