Building a Color Scheme Generator

After reading Practical Color Theory for People Who Code, I immediately thought that the process of generating the color scheme can be automated. This blogpost describes how it is done and how you can use it. The code can be found on Github.

In this blogpost I’ll describe how the color scheme generator works, if you just want to use it, head over to the Github repository, where this is described in the readme.

Prerequisites

I’ll assume you already have npm and the gulp-cli package installed. If you don’t know how to do that, read the section A short Introduction to npm from my previous post Learning Gulp for Website Minification.

Goal

My goal was to create something where I can input the main color, and all the other colors would be automatically calculated based on Natalya Shelburne’s blogpost, and rendered somewhere.

I tried to understand the described process as well as I could, but I’m not sure if I got it all correct. So if you have a different understanding of it, please tell me so that I can improve on it.

Goal Color Scheme

Base Approach

Basically, what I did, was

1) creating an HTML file with divs for all colored areas
2) adding classes to them
3) add CSS for the layout
4) taking the SCSS described in Practical Color Theory for People Who Code and putting it all into one file
5) add classes for each unique color to the SCSS that set the background
6) compile it into CSS
7) and add triggers that do the whole process on every file change

Automating the Creation Process

The most interesting piece is how the automation works. The HTML and CSS for the layout are fairly basic, just some divs and a bit of flexbox magic.
Almost all of the work is done by Gulp plugins.

I edited the SCSS to contain classes, which set the background-color for each unique generated color. This is necessary for using those colors in HTML, otherwise we will have a SCSS with variables containing the colors, but they will never end up in the CSS file.

For some reason, I converted the SCSS provided by Natalya Shelburne to SASS, don’t ask me why.

The first step is to actually compile the SASS, to get a CSS file that the browser can interpret. For this I use the Gulp plugin gulp-sass. The task is defined as follows:

gulp.task("compile-sass", function () {
    return gulp.src("*.sass")
        .pipe(sass())
        .pipe(gulp.dest(""));
});

The result is a CSS file containing many classes that set the background-color.

The first step of the automation is done. Now, if you change the value of $main-color in the first line of colors.sass, then execute the task compile-sass with gulp compile-sass, and refresh the browser you’ll see the updated color scheme.

The next step is automating these steps too, so that if you change the value and then save the file, the browser automatically shows the new color scheme.
This can be achieved with Browser Sync. The basic principle of it is injecting a bit of Javascript code, which automatically refreshes the website if a change occurred. There is a Gulp plugin for it, which I’ll be using.

BrowserSync needs to be initialized. This can be done by a dedicated task:

gulp.task("browser-sync", function () {
    browserSync.init(["css/*.css", "js/*.js"], {
        server: {
            baseDir: "./"
        }
    });
});

Next, we have to trigger the SASS compile on file change. This can be solved by yet another Gulp task.
It watches the matching files, and if something changes, executes the given tasks, in this case compile-sass.
BrowserSync needs to be initialized beforehand, so it is added as dependency.

gulp.task("compile-sass:watch", ["browser-sync"], function () {
    gulp.watch("*.sass", ["compile-sass"]);
});

The last thing that needs to be done is telling BrowserSync that something has changed and the site needs to be reloaded. This, of course, should happend after the changed files were written to disk. This is why the reload command of BrowserSync is called after the changed CSS file is written to disk.
Here the adapted compile-sass task:

gulp.task("compile-sass", function () {
    return gulp.src("*.sass")
        .pipe(sass())
        .pipe(gulp.dest(""))
        .pipe(browserSync.reload({ stream: true })); //<-- this line tells browser sync to reload the page
});

Thats it. To run it, execute gulp compile-sass:watch. BrowserSync will start up a webserver, hosted at localhost:3000. It will also automatically open that page. If it does not, just open it in your favorite browser.

To finish up that post, a marvellous GIF of me playing around with the color schemes.

Color Schme Change Animation