Find file
Fetching contributors…
Cannot retrieve contributors at this time
63 lines (42 sloc) 2.5 KB

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

Set your base color (before you import the theme file):

$base_color: green   

The _theme.sass partial, using your declared <$base_color> can then be imported into your stylesheets, and the color constants can be used.

@import theme.sass

Using the Basic theme as an example, you will have access to color constants like these:


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.