In this exercise, we're going to take a look at mixing colors; postcss-color-palette allows us to choose multiple colors by name (and not by number!), then converts them to HEX equivalent values. We can then either create gradient-type effects, or simply mix the colors together (using postcss-color-mix) to produce a new color.

Let's make a start:

Okay, the colors I've chosen clearly aren't going to win any style awards any time soon, but they help serve a purpose: it is very easy to use proper color names, if preferred, while still allowing PostCSS to compile them into valid HEX values. That aside, let's take a moment to consider the code we've used in this demo—it does raise a few key points, which we should cover, when using these plugins.

The demo we've created follows similar principles to most other demos we've built so far; we begin with declaring variables to store instances of our plugins, thus:

var palette = require('postcss-color-palette');
var colormix = require('postcss-color-mix')

The magic then happens in this task, within our gulp file:

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

Notice that we've specified a palette to use, the mrmrs option is the default, but we can equally use material or flatui as alternatives. All three reference the webcolors plugin from https://github.com/zaim/webcolors/; this package could be expanded to include other palettes if desired.

With the links to our two plugins in place, and the task set up, we can then begin to specify rules within our style sheet, which will use the plugins. We've created three, and all three use the postcss-color-palette to determine what the HEX value should be for each color; the third and final mixes the two colors together once HEX values have been assigned:

#box0 { background: linear-gradient(aqua, blue 50%, purple); }

#box1 { background: linear-gradient(to right, orange, red, yellow); }

#box2 { background: mix(teal, navy, 80%); }

Getting the mix of the color right for the third rule isn't easy, the key to a successful mix is to avoid using colors that are in the same spectrum; the closer they are, the less impact the mix will have!

If you want a quick way to gauge how well colors have mixed, then try http://jackiebalzer.com/color—this demo has a mix() option in it, which will compile them in the browser and avoid the need to run the compilation process manually.

We've covered some of the plugins that are likely to be more popular; there are more available via the PostCSS.parts directory, which may be of interest:

In the meantime, let's move on: we've explored using palettes to select our colors, before mixing them to create new ones. This is just scratching the surface of what is possible; how about creating different shades of colors, using functions such as darken(), tint() or lightness()? Such functions already exist in most preprocessors, such as SASS; let's explore how we can achieve the same results using PostCSS plugins.