Color Tools and Theme Support for Compass and Sass
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Compass Colors

This compass extension provides support for working with colors in Sass and generating color themes for use on your website.


sudo gem install compass-colors

To install a theme into your existing compass project, add the following to your compass configuration file:

require 'compass-colors'

Then run this command:

compass install colors/<Theme Name>

Where <Theme Name> is one of: basic, complementary, triadic, split_complement, analogous

The _theme.sass partial can then be imported into your stylesheets and the color constants can be used.

@import theme.sass    

Supported Color Themes

With all of these themes, you must pick a base color and the theme takes it from there:

  • Basic/Monochromatic (basic)
  • Complementary (complementary)
  • Triadic (triadic)
  • Split Complementary (split_complement)
  • Analogous (analogous)

Sass Functions Provided

  • lighten(color, percentage) - Create a color lighter by the percent amount provided.
  • darken(color, percentage) - Create a color darker by the percent amount provided.
  • saturate(color, percentage) - Increase the saturation of a color by the percent amount provided.
  • desaturate(color, percentage) - Decrease the saturation of a color by the percent amount provided.
  • hue(color) - Extract the hue from the color in degrees (0-360). Suitable to be passed as the first argument of hsl.
  • saturation(color) - Extract the saturation from the color in percent (0-100). Suitable to be passed as the second argument of hsl.
  • luminosity(color) - Extract the luminosity from the color in percent (0-100). Suitable to be passed as the third argument of hsl.
  • mix(color1, color2, percentage) - Create a new color by mixing two colors together. Percentage (0-100) is optional, and indicates how much of color2 should be mixed into color1.
  • grayscale(color) - Create a gray color by mapping the color provided to the grayscale.
  • adjust_hue(color, degrees) - Add the number of degrees provided to the hue of the color keeping luminosity and saturation constant. Degrees can be negative.
  • complement(color) - Returns the compliment of the color provided.