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
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
Be sure to watch the Sassafras GitHub repository for more updates. I look forward to your feedback!
11 Comments
That looks awesome. So much easier than trying to do all this by hand. Sweet!
Wicked!
This is so cool!
Unfortunately the gem won’t install via ‘gem install’ etc. Tried cloning the git repo and building .. failed with invalid README.txt
Am I missing something completely?
John,
Thanks for your comment. I’ve just cloned a fresh repository and fixed the issue. ‘sudo gem install teejayvanslyke-sassafras’ now appears to run without a hitch
Let me know if you have any more issues.
All sorted now. Thanks for the quick response.
Spoke too soon:
> sassafras –base blue > theme.sass ~/Development/Work/Rails/reports/app/views/stylesheets
/opt/ruby-enterprise-1.8.6-20081205/lib/ruby/gems/1.8/gems/teejayvanslyke-sassafras-0.1.0/bin/sassafras:54: uninitialized constant Sassafras::Theme (NameError)
Comments should be ordered by date. I am having the ‘uninitialized constant Sassafras (NameError). What I am missing?
Having install problems as well:
ERROR: Error installing teejayvanslyke-sassafras:
teejayvanslyke-sassafras requires color-tools (> 1.3.0, runtime)
I gem installed color-tools, but the latest published version of the color-tools gem (as far as I can tell) is 1.3.0. I believe the dependency in the gemspec for color-tools should be >= 1.3.0, rather than just >.
freaking fantastic tool … except I can’t get HTML to work. I am doing `sassafras -b blue -t basic -f html` which does not work, although `sassafras -b blue -t basic -f sass` works fine. ?
FYI The Compass colors plugin will soon be part of the SASS core. http://github.com/chriseppstein/compass-colors as per http://groups.google.com/group/compass-users/browse_thread/thread/342e35c49819eeae#