A useful facility within most CSS preprocessors is the ability to create new colors dynamically, we can do this either by adjusting a color channel, or applying a filter effect to the color, such as making it darker:

The benefit of this is simple, it allows us to reduce the number of base colors we assign by default; the remaining colors can be created automatically. If we need to change one of our base colors, then any colors created dynamically should still work.

Thankfully, we can achieve the same effects within PostCSS, to do this, we need to make use of the postcss-color-function plugin, available from https://github.com/postcss/postcss-color-function. We'll also be using the css-color-converter plugin, to help manage conversion between different color formats.

Let's explore this in more detail with a simple demo:

Try previewing the results within a browser, if the compilation was successful, we should see four boxes with different shades of red appear, as shown at the start of this exercise. The question is though, we've seen the results appear, but how does PostCSS know to create these colors?

It's a good question, the conversion process is very simple; the trick to it, though, lies not within compiling, but working out how to achieve the color! Odd as it may seem, choosing the color isn't as easy as it looks; let me explain more:

The compilation process is, like other PostCSS plugins, very easy to configure—we begin of course with creating a variable that defines the color-function plugin:

var colorfunction = require('postcss-color-function');

Next up, we add a reference to our principal gulp task, here we've used both autoprefixer and the color-function plugin together, but the former isn't strictly needed, as we're not adding any vendor prefixes:

gulp.task('autoprefixer', function() {
  return gulp.src('src/*.css')
    .pipe(postcss([  autoprefixer, colorfunction() ]))
    .pipe(gulp.dest('dest/'));
});

The real magic, though, is in the colors we assign within our style sheet—our first box is a control, with a standard red color:

#box0 { background-color: #ff0000; }

Next up, we're adding a tint of 60% to box1, which has the effect of turning it a light pink:

#box1 { background-color: color(red tint(60%)); }

Box2 goes the other way, even though we've used a lightness filter (where you might expect a similar result as box1), the negative number makes it a brown-red color:

#box2 { background-color: color(red lightness(-20%)); }

The final box, box3, continues the brown theme from box2, but makes it lighter. Note though, that in the comment, this shade is what would be produced if we had applied a sepia tone:

#box3 { background-color: sepia(red, 0.7);}

The question is, how would we know that this is indeed a sepia filter being applied?

At face value, it looks like we've selected red, then altered each channel by a specific amount to get the final result.

A drawback of using this plugin is that it doesn't have functions to support all of the equivalent CSS3 filters available today; it does mean we have to be resourceful, and calculate what the color should be directly. We will be able to change that in the next demo—there will be occasions when we need to create our own custom filters; a good example is sepia. It does mean more work upfront, but it allows us to then call a sepia() function by name, rather than approximate the final result.

If you struggle to find what a color should be once a filter is applied, take a look at http://jackiebalzer.com/color; this is a great site that allows us to choose a color and see what the results are when filters are applied. It is written for SASS, but the end result will be identical for PostCSS. A site such as ColorHexa.com (http://www.colorhexa.com) is a good help too, we can use it to verify what color values should be when a filter has been applied.

On we go. We discovered during our exercise that the postcss-color-function plugin doesn't cover all of the CSS3 filters that we can use in CSS; for the sepia example, we had to assign a calculated color value, rather than applying a filter effect. Let's fix that now. With a bit of upfront rework to our demo, we can create our own custom functions. It means that if, for example, we want a sepia effect, then we can call sepia(), rather than calculate what the final color should be!

In our previous demo, we took a look at programmatically changing colors—this is a function that has been present in most CSS processors (such as SASS or Less) for some time.

There may be occasions where we require a finer degree of control over changing colors, and that simply using existing functions provided by the postcss-color-function plugin isn't sufficient, or that the desired filter isn't available. If we're feeling inclined, we can create our own color functions; for this, we can use the postcss-functions plugin, available from https://github.com/andyjansson/postcss-functions, to expose the use of JavaScript functions in our task file.

It's worth noting, though, that if a CSS3 filter doesn't exist, then most can be created using a combination of different calculations (such as the sepia example from the previous demo). This may technically work okay, but it is easier to simply reference a sepia filter by name, rather than work out that #box3 has a sepia effect applied!

I feel a demo coming on, so without further ado, here's a screenshot of what we're going to create:

In short, we're using a standard shade of red (#ff0000, just to be clear!), and calculating various shades using a tint, darken, or sepia filter.

Let's take a look at how to create these colors in more detail:

If we take a look at the contents of the gulp task file in more detail, it will look larger than previous exercises; it might look like we're doing more, but in reality, a lot of it we've already seen before, in earlier demos. Let's take a look at it in more detail.

function darkenColor (value, frac) {
  var darken = 1 - parseFloat(frac);
  var rgba = color(value).toRgbaArray();
  var r = rgba[0] * darken;
  var g = rgba[1] * darken;
  var b = rgba[2] * darken;
  return color([r,g,b]).toHexString();
}

gulp.task('autoprefixer', function() {
  return gulp.src('src/*.css')
  .pipe(postcss([  autoprefixer, functions({
    functions: {
      tint: tintColor,
      darken: darkenColor,
      sepia: sepiaColor
    }
  })
  ]))
  .pipe(gulp.dest('dest/'));
});

Creating filters with PostCSS shouldn't be all boring though, we can absolutely have some fun with filters! A quick and easy way to apply some additional style to an image is through the use of Instagram filters—thankfully there is a pre-built plugin we can use for this purpose.

Enter the Instagram plugin, available from https://github.com/azat-io/postcss-instagram. Let's get stuck in and create a simple demo:

At this point, if we try to preview the results in a browser, we should see something akin to this screenshot:

The key to this is in the main CSS style sheet, we can apply the required filter using nothing more than this within the rule:

This applies the 1977 filter (one of the filters available with the plugin). If we take a look at the compiled code, we can see that the plugin has added some additional rules; one to take care of creating the filter, and two to take care of positioning the filter on top of the image.

If we take a look at the compiled code, we can see the changes made by the plugin:

If you really want to get into the depths, then it's worth taking a look at the source code for this plugin, at https://github.com/azat-io/postcss-instagram/blob/master/index.js. It is fairly complex, but if you look carefully, you can see signs of the filter code that is used to apply the effect to our images.