Skip to content

chriseppstein/compass-colors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Compass Colors

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

Installing

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.

About

Color Tools and Theme Support for Compass and Sass

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages