Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Color Scheme Generator based on Practical Color Theory for People Who Code

This project automates the process outlined in the article above and generates HTML and CSS files that, together, show a page like this:

Color Scheme

How to use

First, you need to clone the repository:

git clone

Then you need to install the npm dependencies:

cd ColorSchemeGenerator

npm install

Note: This project assumes you have npm set up and gulp-cli installed globally. If you don't know how to do that, read A short Introduction to npm of my blogpost Learning Gulp for Website Minification.

The last step is to start the Gulp task that does the heavy lifting:

gulp compile-sass:watch

It boots up a local server and automatically opens the page in you default browser. If it does not, it is available under http://localhost:3000/.
The task watches all changes to colors.sass, and immediately updates the page when something changd. This is the resulting behavior:

Automatic Color Scheme Updates

I don't like immediate Changes

If you don't like this behavior, and rather update manually, you can do this by not running

gulp compile-sass:watch

and instead recompile the SASS using

gulp compile-sass

every time you want the color scheme updated. Keep in mind that after doing this, you have to refresh the page to see the updated page.