Sass-color-schemes

This Compass extension makes it easy to use color schemes in your web pages by providing a collection of colors based on one (base-) color which is supplemented with additional colors to make the best visual impression.

Add this line to your application's Gemfile:

gem 'sass-color-schemes'

And then execute:

$ bundle

Or install it yourself as:

$ gem install sass-color-schemes

Import it into your main stylesheet:

@import 'sass-color-schemes';

Sass-color-schemes has 4 functions that all return an array of 5 color values (of 5 null's). Each function uses variables, such as $base-color, $variation, etc. for calculating the proper values.

See $sass-color-schemes variable for a description of the different types.

Returns an array of 5 colors, in which the first element is the base color and the rest are different shades of the base color. You need the Sass' nth function to access a specific color:

$color-primary-0: nth(scs-primary-colors(), 1);
$color-primary-1: nth(scs-primary-colors(), 2);
// ... etc.

.title {
  color: $color-primary-0;
}

.subtitle {
  color: $color-primary-1;
}

Returns an array of 5 colors, in which the first element is the complementary color of base color and the rest are different shades of this complementary color. You need the Sass' nth function to access a specific color:

$color-complement-0: nth(scs-complement-colors(), 1);
$color-complement-1: nth(scs-complement-colors(), 2);
// ... etc.

.call-to-action {
  background-color: $color-complement-0;
}

Note: The scs-complement-colors function only returns an array of colors when the $complement variable is set to true or the $scheme variable is set to triad. Otherwise an array with 5 null's is returned.

Some color schemes contain 2 additional colors. These functions each returns an array of 5 colors with, again, 5 different shades of a color. You need the Sass' nth function to access a specific color:

$color-secondary-1-0: nth(scs-secondary-1-colors(), 1);
$color-secondary-1-1: nth(scs-secondary-1-colors(), 2);
// ... etc.

$color-secondary-2-0: nth(scs-secondary-2-colors(), 1);
$color-secondary-2-1: nth(scs-secondary-2-colors(), 2);
// ... etc.

Note: The scs-secondary-1-colors and scs-secondary-2-colors functions only returns an array of colors when the $scheme variable is set to adjacent, tetrad or triad. Otherwise an array with 5 null's is returned.

You can (and might want to) configure sass-color-schemes to customize the color scheme. For this you need to define the $sass-color-schemes map variable, which contains one or more of the following keys:

• base-color
• scheme
• complement
• angle
• variation
• mode

$sass-color-schemes: (
  base-color: red,
  scheme: 'monochromatic',
  // ... etc.
);

The color used as a base color to calculate the shades and all other colors. This can be any Sass color.

Defaults to #ff0000 (red).

$sass-color-schemes: (
  base-color: red,
  // ... etc.
);

$sass-color-schemes: (
  base-color: hsl(0deg, 100%, 50%),
  // ... etc.
);

$sass-color-schemes: (
  base-color: #ff0000,
  // ... etc.
);

Sass-color-schemes supports 4 different color schemes:

• monochromatic - all the colors (tints, tones, and shades) of a single hue
• adjacent - groups of colors that are adjacent to each other on the color wheel
• triad - three colors equally spaced around the color wheel
• tetrad - four colors arranged into two complementary color pairs

Defaults to 'monochromatic'.

$sass-color-schemes: (
  scheme: 'monochromatic',
  // ... etc.
);

$sass-color-schemes: (
  scheme: 'tetrad',
  // ... etc.
);

If set to true, the scs-complement-colors function returns shades of the complementary color of the $base-color.

Defaults to true.

$sass-color-schemes: (
  complement: false,
  // ... etc.
);

The angle applied to the $base-color to calculate other colors in all schemes, expect monochromatic. This can be any value and can be set in degrees (deg) or radian (rad) units as well.

Defaults to 30deg.

$sass-color-schemes: (
  angle: 30,
  // ... etc.
);

$sass-color-schemes: (
  angle: 30deg,
  // ... etc.
);

$sass-color-schemes: (
  angle: 0.5236rad,
  // ... etc.
);

This will vary the tints, tones and shades of the colors returned by all functions. Currently Sass-color-schemes supports 24 variations:

• lightest pale pastel
• very light pale pastel
• lighter pale pastel
• pale pastel
• darker pale pastel
• dark pale pastel
• greyish darkest
• greyish medium light
• bright pastel
• very light pastel
• lighter pastel
• pastel
• darker pastel
• dark pastel
• greyish dark
• greyish lighter
• shiny
• full colors
• darker colors
• darker neon
• dark
• deep colors
• greyish medium dark
• greyish lightest

Defaults to default.

$sass-color-schemes: (
  variation: 'darker pale pastel',
  // ... etc.
);

$sass-color-schemes: (
  variation: 'shiny',
  // ... etc.
);

You can choose between:

• RGB (a.k.a. the light model)
• RYB

These modes are used internally when calculating colors. RYB is primarily used in art and design education.

Defaults to ryb.

$sass-color-schemes: (
  mode: 'rgb',
  // ... etc.
);

The scs-test mixin adds a bar to the top of your page displaying all the colors that your color scheme provides:

$sass-color-schemes: (
  base-color: #2980B9,
  variation:  'tetrad'
);

@include scs-test;

scs-test accepts the following arguments:

The height of the colored bar.

Defaults to 2em.

The selector that will contain the colored bar.

Defaults to body::after.

$sass-color-schemes: (
  base-color:         #6893A6,
  variation:          'shiny',
  scheme:             'adjacent',
  angle:              25
);

$color-primary-0:     nth(scs-primary-colors(), 1);
$color-primary-1:     nth(scs-primary-colors(), 2);
$color-primary-2:     nth(scs-primary-colors(), 3);
$color-primary-3:     nth(scs-primary-colors(), 4);
$color-primary-4:     nth(scs-primary-colors(), 5);

$color-complement-0:  nth(scs-complement-colors(), 1);
$color-complement-1:  nth(scs-complement-colors(), 2);
$color-complement-2:  nth(scs-complement-colors(), 3);
$color-complement-3:  nth(scs-complement-colors(), 4);
$color-complement-4:  nth(scs-complement-colors(), 5);

$color-secondary-1-0: nth(scs-secondary-1-colors(), 1);
$color-secondary-1-1: nth(scs-secondary-1-colors(), 2);
$color-secondary-1-2: nth(scs-secondary-1-colors(), 3);
$color-secondary-1-3: nth(scs-secondary-1-colors(), 4);
$color-secondary-1-4: nth(scs-secondary-1-colors(), 5);

$color-secondary-2-0: nth(scs-secondary-2-colors(), 1);
$color-secondary-2-1: nth(scs-secondary-2-colors(), 2);
$color-secondary-2-2: nth(scs-secondary-2-colors(), 3);
$color-secondary-2-3: nth(scs-secondary-2-colors(), 4);
$color-secondary-2-4: nth(scs-secondary-2-colors(), 5);

1. Fork it (https://github.com/bazzel/sass-color-schemes/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request