Sass Color Library with Real-World Variable Names
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Sassy Swatches -

Join the chat at

Bitdeli Badge Analytics

Color library for the Sass css preprocessor. Currently featuring over 200+ unique colors with memorable real-world variable names. Also featuring a "Brand Colors" section with 50 colors from popular web brands.

Follow @sassyswatches

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+'://';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


##1. Setting Up

If your familiar with Sass, this should be a piece of cake. Make sure the main sassyswatches.scss file is imported at the very bottom of your _main.scss file so it will overwrite any similar color variables you may have in your project from other frameworks, etc.

@import "/path/to/sassyswatches.scss"

####1a. Optonal - Bower Install If your current project uses Bower, you can install Sassy Swatches by using the following command:

bower install sassy-swatches

##2. Using the Colors

Now here's the fun part. If you want to use a color all you need to do is type in it's variable name. Sassy Swatches was built using memorable, real-world variable names for its colors like $Denim, $LawnGreen, $LightSalmonPink, etc.

		background-color: $DarkChestnut;

You can use the Sassy Swatches color library with all existing Sass Color Functions and Mixins.

Example Functions/Mixins

####Darken & Lighten

These two adjust the Lightness of the color’s HSL values. Sass will parse the hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100.

darken($Jade, 10%)
lighten($WineDregs, 10%)

####Saturate, & Desaturate

These functions adjust the Saturation of the colors HSL values, much like Darken and Lighten adjusted the Lightness. You need to give a percentage value to saturate and desaturate.

saturate($TigersEye, 20%)
desaturate($Amber, 20%)


This adjusts the hue value of HSL the same way all of the others do. Again, it takes a percentage value for the change.

adjust-hue($OliveDrab, 20%)

####Adding Alpha Transparency

Using our hex color we can do a few things to get it to be a little transparent. We can call hsla, rgba, opacify, and transparentize. All of them accomplish the same thing, just in different ways. I stick to rgba as it comes most naturally to me which takes a color and a value from 0 to 1 for the alpha.

rgba($AppleGreen, .7)

Contact me on twitter and let me know what you end up using this on and if you have any questions.


Creative Commons License Sassy Swatches is licensed under a Creative Commons Attribution 4.0 International License.


v1.1.0 Brand Colors section is added with 50 colors from popular web brands

v1.0.3 Fixed $Chartreuse variable name typo

v1.0.2 Fixed typo & cleaned up code

v1.0.1 Fixed $Lemon variable typo

v1.0.0 Sassy Swatches is released on Github.