Instant Sass color palettes with Sassafras

If you’re like me, you start a new project every week. Often, this means surfing the web for a color palette generator and meticulously copying and pasting hex values into your text editor. As I was about to do just that yesterday, I decided it would be prudent to remove that burden entirely. Thus, Sassafras was born.

Color me crazy!

In case you’re unfamiliar with Sass (what a tragedy!), head over to the Sass documentation and educate yourself.

Installing Sassafras is a breeze thanks to Github’s RubyGems repository:

$ gem sources -a http://gems.github.com $ sudo gem install teejayvanslyke-sassafras

Once you’ve successfully installed the gem, let’s give our sweet new car a spin:

$ sassafras --base red # Generated by Sassafras # base !base_dark = #800000 !base_darker = #4d0000 !base_light = #ff8080 !base_lightest = #ffe6e6 !base_lighter = #ffb3b3 !base_mid = #ff0000 !base_darkest = #1a0000

Sassafras’s prescribed usage is to create new Sass stylesheet headers. So, in a new Rails project with Sass, execute this:

$ sassafras --base red > public/stylesheets/sass/theme.sass

Then at the top of your screen.sass, put the following:

@import theme.sass

Sweet! Now you have all of your Sassafras theme color variables available to you in screen.sass:

@import theme.sass


  body

    :background-color = !base_darkest

    :color = !base_lightest
  .button

    :background-color = !base

...

Observe something for a moment: we have placed all of our color variables in a separate file. This means that with a simple flick of our Sassafras wrist, we can gracefully change our entire color scheme:

$ sassafras --base blue > public/stylesheets/sass/theme.sass

Pretty neat, huh?

Generating a reference HTML file

Sassafras also includes a formatting option which allows you to generate a nifty HTML report showing your entire color palette, complete with hex codes and the original Sass markup. Simply pass the format option to Sassafras with ‘html’:

$ sassafras --base blue --format html > palette.html

5e25c2c7775a8ed169e2d9a6de8e2d1d98ffd110_1229359164_0

Theme Types

Sassafras supports several color arrangement schemes:

basic
complementary
analogous
triadic
split complementary
rectangle
square

I will save going into the theory behind each of these since the folks at Tiger Color have already done a wonderful job. To use another theme type, simply pass the type parameter to Sassafras:

$ sassafras --type split_complementary --base blue # Generated by Sassafras # complement1 !complement1_dark = #80002b !complement1_darker = #4d001a !complement1_light = #ff80aa !complement1_lightest = #ffe6ee !complement1_lighter = #ffb3cc !complement1_mid = #ff0055 !complement1_darkest = #1a0009


  # complement2

  !complement2_dark = #00802b

  !complement2_darker = #004d1a

  !complement2_light = #80ffaa

  !complement2_lightest = #e6ffee

  !complement2_lighter = #b3ffcc

  !complement2_mid = #00ff55

  !complement2_darkest = #001a09
  # base

  !base_dark = #000080

  !base_darker = #00004d

  !base_light = #8080ff

  !base_lightest = #e6e6ff

  !base_lighter = #b3b3ff

  !base_mid = #0000ff

  !base_darkest = #00001a