AtoZ CSS Screencast: CSS Color Syntax

Loading the player…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

The web would be a pretty dull place without a splash of color.

There are a number of different properties that take a color value and there are four different color syntaxes in CSS and that’s what we’ll be focusing on in this video. Those formats are color keywords, hex, RGB and HSL.

.box-white {
  color: white;
  color: #fff;
  color: #ffffff;
  color: rgb(255,255,255);
  color: rgba(255,255,255,1);
  color: hsl(0,0%,100%,1);
  color: hsla(0,0%,100%,1);
}
.box-black {
  color: black;
  color: #000;
  color: #000000;
  color: rgb(0,0,0);
  color: rgba(0,0,0,1);
  color: hsl(0,0%,0%,1);
  color: hsla(0,0%,0%,1);
}

Let’s take a look at each of them in turn.

Keywords

There are 147 named colors in CSS3.

There are actually only 140 different colors as 7 of them are duplicates just with different spellings of gray.

Here they are as colors, and here they are as a list of keywords.

I personally find this list pretty useless – there are lots to choose from, but it’s hard to remember what they all look like.

What is palevioletred? How pale? How violet? How red?

What is gainsboro?

How about burlywood or goldenrod?

These aren’t that useful, but fortunately there are more options.

RGB

In CSS, colors are defined in the standard Red Green Blue color space or sRGB where colors are defined through 3 channels: Red, Green, and Blue.

One way of defining color in CSS is using the RGB syntax. Here the values range from 0 to 255 for each of the three components. In this case specifying 255 for each of the components, gives us the color white.

.box {
  color: rgb(255, 255, 255); /* white */
  color: rgba(255, 255, 255, 0.5); /* semi-transparent white */
}

We can also make semi-transparent colors with RGBA. Here, a fourth value, known as Alpha, determines the opacity of a color. This value is a decimal ranging from 0 to 1 where 0 is completely transparent, and 1 is completely opaque.

The transparent keyword is represented as rgba(0,0,0,0).

.box {
  color: transparent;
  color: rgba(0, 0, 0, 0); /* transparent */
}

Hex

Probably the color format I use most often is hex. Hex is short for hexadecimal which is a base 16 numeral system. Most people are more familiar with decimal – or base 10 – like the metric system.

A hex color is broken down into three couplets that specify the red, green and blue components of a color. The values of the couplets are in base 16 and range from 00 to FF. You can think of 00 as no color and FF as full color. FF is actually the decimal number 255 in base 16.

In this case we have full red, full green and full blue which combine to make white.

In this second example we have no red, full green and no blue which gives us green.

When both values in each of three couplets are the same, the hex value can be abbreviated to a short-hand 3 digit format.

.box {
  color: #00ff00; /* green */
  color: #0f0; /* green in shorthand */
}

HSL

HSL stands for Hue, Saturation and Lightness.

Hue is specified in degrees from 0 to 360 – and corresponds to a position around the color wheel. 0 degrees represents red and then colors blend through oranges, yellows, greens, blues, purples, pinks and back to red again at 360 degrees.

Saturation determines how vivid a color is from 0% – monochrome – to 100% – vivid.

Lightness is also set as a percentage and determines the overall amount of luminance.

HSL has the corresponding HSLA version which allows for alpha transparency.

.box {
  color: hsl(0, 0%, 100%); /* white */
  color: hsla(0, 0%, 100%, 0.5); /* semi-transparent white */
}

Usage

So, how do we use these colors?

The color property only effects text – so it allows us to set the text color of an element.

But there are lots of other properties that accept a color. background-color, for example, or color stops in a gradient. We can also set border-color or the color component of box-shadow or text-shadow. We can even change the fill color of an SVG path or polygon.

.box {
  background-color: #000;
  background-image:linear-gradient(to right, #000, #fff);
  border-color: #000;
  box-shadow: 0 0 10px #000;
}
.text {
  text-shadow: 0 0 10px #000;
}
.svg path {
  fill: #000;
}

CurrentColor

There is one last color keyword that has a unique if not entirely useful purpose. currentColor is a special keyword that links the value of the color property to other properties that accept a color value like border-color, box-shadow and text-shadow. Let’s have a look at a quick demo.

We can create a box with a border and a drop shadow as follows and pass in the color values as a keyword, hex, rgb or hsl. If instead of a color value, we use currentColor, the color of the border and drop shadow is black – which is the default value for the color property.

If we now set the color to hotpink, this will be used in place of currentColor instead. This allows us to remove the color value from the border and box-shadow properties. Which maybe saves you a few keystrokes.

.box {
  color: hotpink;
  padding: 50px;
  border: 10px solid; /* border-color is hotpink */
  box-shadow: 0 0 100px; /* shadow color is hotpink */
}

Watch out for our Quick Tip article coming soon!