Since creating this site with Jekyll, I’ve endured the default color theme. Now I want to try something a little different. According to my friend and design guru Steve, a good way to get started is to pick a couple of complementary colors.

So I read a little about color theory, the idea that interesting color relationships are predicted mathematically. Complementarity is one such relationship, which describes pairs of colors that cancel eachother out. For paint pigments and websites, this refers to pairs of contrasting colours that produce black when mixed together (n.b. complementary colors of light cancel to produce white instead). This is illustrated strikingly by Johann Wolfgang von Goethe’s color wheel (below), which arranges colors so that complementary pairs are 180 degrees apart. There are other color wheels, but I like this one.

Goethe's Color Wheel

A newer color wheel can be found on Adobe Color CC, a great tool which lets you explore infinite combinations of related colors using different color rules. Using the complementary color rule, for example, you can pick 5 saturation points along any axis. I arrived at the following palette because it reminds me of a sandy beach.

Complementary colors

To apply my colors site-wide, I edited the Syntactically Awesome Stylesheets (or Sass) supplied by Jekyll. Sass is CSS language that that allows you to write drier stylesheets by, among other things, defining variables. As a side note, the original Sass syntax (which used files named .sass) has evolved into “Sassy CSS” (which uses the .scss extension). There are interesting reasons for Sass’ evolving syntax, but in any case, Jekyll uses SCSS.

So, I copied my 5 new colors into css/main.scss like this:

$color-a: #9E8C6D;
$color-b: #FDFDFD;
$color-c: #FFF2DD;
$color-d: #1D77D4;
$color-e: #C9E4FF;

Then I sprinkled references to my new colors into _sass/_base.scss and _sass/_layout.scss, producing the effect below:

My own site with new palette

Okay, it’s not spectacular, but it’s my minimum viable palette.