About Chroma

Chroma is a Sass library that manages a project's color names, color variations, and color schemes.

USAGE

Full documentation is available at http://johnalbin.github.io/chroma/. But here are some quick examples to give you an idea of what Chroma can do.

@import "chroma";

// Define the default color scheme.
$chroma: define-default-color-scheme('Descriptive color names for use in "functional" color names below.');

// Add colors to the default color scheme.
$chroma: add-colors((
  white:       #fff,
  grey-medium: #706e6c,
  black:       #000,
  blue:        #0e71b8,
  red:         #c00,
));

// Create a "functional" color scheme that inherits from the default color scheme.
$chroma: define-color-scheme('functional', 'Colors used by functional parts of the design.');

// Add colors to the functional color scheme.
$chroma: add-colors('functional', (
  // Define a primary highlight color.
  primary:     'blue',

  // Have the "text" color use the hex value given to the "black" color. Even
  // though the "functional" color scheme doesn't define "black", it inherits
  // from the "default" color scheme where "black" is defined.
  text:        'black',

  // Colors can inherit from colors named earlier in the call to add-colors().
  heading:     'text',

  // Have the link color use the primary color.
  link:        'primary',
));

// Create an "alternate" color scheme that inherits from the "functional" color scheme.
$chroma: define-color-scheme('alternate', 'Alternate colors for the site.', $parent: 'functional');

// Add colors to the alternate color scheme.
$chroma: add-colors('alternate', (
  primary:     'red',
));

// Set which color scheme should be used by default when calling the color()
// function.
$chroma-active-scheme: 'functional';

.example-ruleset {
  h1 {
    // Outputs #000.
    color: color(heading);
  }
  a {
    // Outputs #0e71b8.
    color: color(link);

    .alternate-color-section & {
      // Outputs #c00.
      color: color(alternate, link);
    }
  }
}

INSTALLATION

Chroma can be installed either as a Ruby Gem, as a Bower component, or as a NPM module. See Chroma’s online documentation for more information.

REQUIREMENTS

  • Sass 3.4.0 or later

Note: libsass 3.2.5 or earlier does not work with chroma-sass due to a bug in libsass. ☹ libsass 3.3.0 should fix the bug, but it has not been tested. See https://github.com/JohnAlbin/chroma/issues/10

LICENSE

Available under the GPL v2 license. See LICENSE.txt.

Build Status