HTML & CSS
Article

AtoZ CSS Screencast: CSS Color Syntax

By Guy Routledge

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!

More:
  • Tracy-Gregory Gilmore

    The red, green and blue levels in the RGB and RGBA functions can also be provided as percentages. 0% no colour and 100% full colour, equivalent to 0 and 255, but you must append the values with the %age sign.

    • http://www.guyroutledge.co.uk Guy Routledge

      I’d not heard that one before and can’t seem to get it working with plain CSS. I wonder if it’s something that a pre-processor like Sass adds as syntactic sugar?

      • Tracy-Gregory Gilmore

        You don’t need a pre-processor, it has been part of the specification for as long as I can remember. You can’t mix and match so try using %ages for all three values of the rgb function. One advantage of using %ages is values can be precise to 2 decimal places 999.99%. Checking MDN, it might only work with rgb() and not rgba().

        • http://www.guyroutledge.co.uk Guy Routledge

          Nice one. I had mixed values but using `%` for everything works. You learn something new everyday!

  • http://deluxeastuce.com Henry Ford

    I can’t play the video. Am i the only one with this problem?

    • Angela Molina

      Have you been able to play it since?

  • http://zaksdg.com Ahmad Murey

    Nicely done

  • Dr Madvibe

    About the only time I use a ‘colour name’ is when I need to check how something is displaying on a page, and for this I use a temporary outline with rebeccapurple which see is actually missing from the list in the video. And yes I know it’s CSS4.

  • http://www.guyroutledge.co.uk Guy Routledge

    Nice find. I use the shorthand because it’s quicker to type but the fact that it’s also faster to render is even better!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.