Swatches

Swatches is a color framework built on SASS. Used well, it gives your application an amazing flexibility with respect to color choices.

Basic Idea

You provide Swatches with a list of base colors. For each base color, a color swatch of twenty shades and tints will be generated--from black all the way to white. These tints and shades will be made available to your application as SASS variables.

For example, let's say that you had a color you want to call "red" that has the RGB values of (217, 83, 79). Swatches will generate the following color variables for you:

$red-0: #000000;
$red-2: #080302;
$red-4: #0f0505;
$red-6: #170908;
$red-8: #1e0b0b;
$red-10: #260e0d;
$red-12: #2d1110;
$red-14: #341413;
$red-16: #3c1716;
$red-18: #441a18;
$red-20: #4b1c1b;
$red-22: #53201e;
$red-24: #5a2220;
$red-26: #622523;
$red-28: #692826;
$red-30: #702b29;
$red-32: #782e2b;
$red-34: #7f302e;
$red-36: #873331;
$red-38: #8e3633;
$red-40: #963936;
$red-42: #9d3c39;
$red-44: #a43f3c;
$red-46: #ac423e;
$red-48: #b44541;
$red-50: #bb4744;
$red-52: #c34a47;
$red-54: #ca4d49;
$red-56: #d2504c;
$red-58: #d9534f;
$red-60: #db5c58;
$red-62: #dc6460;
$red-64: #de6b68;
$red-66: #e07471;
$red-68: #e27c79;
$red-70: #e48582;
$red-72: #e58c8a;
$red-74: #e79492;
$red-76: #e99d9b;
$red-78: #eba5a3;
$red-80: #edadab;
$red-82: #eeb6b4;
$red-84: #f0bdbc;
$red-86: #f2c6c5;
$red-88: #f4cecd;
$red-90: #f6d6d5;
$red-92: #f7dede;
$red-94: #f9e6e6;
$red-96: #fbefef;
$red-98: #fdf7f7;
$red-100: #ffffff;

If you use these variables in your SASS instead of directly hard-coding red values, then you could tweak your red hue to make it oranger by regenerating this "red" color using the RGB base color (217, 110, 79). Swatches will update the SASS variables for you, and anywhere your app used these variables, the reds would now appear oranger.

Note the numbers in the names of the color variables. They represent the value of the color, from 0 (black) to 100 (white). Two unrelated colors with the same value number ($blue-25 and $orange-25, for example) should visually seem to have a similar darkness.

Installing

Install the engine in your Gemfile like so:

gem 'swatches', path: 'lib/swatches'

Create a config/swatches.rb file in your application that looks like this:

Swatches.config.stylesheet_directory = 'app-layer/variables'

Swatches.config.colors = [
    #--------COLOR NAME-----------RED-----GREEN--BLUE----#
    %w(      app-blue               0     118    169     ),
    %w(      app-sea-green         49     172    151     ),
    %w(      app-orange           227     115     65     ),
    %w(      app-plum             117      37     87     ),
    %w(      app-gray             119     120    123     ),
    %w(      sys-red              217      83     79     ),
    %w(      sys-yellow           250     190     70     ),
    %w(      sys-green             92     184     92     ),
  ]

config.colors is a list of named colors and their RGB values. config.stylesheet_directory is the location where you want Swatches to put the generated color variables file. It is a relative path that assumes you want to put the file somewhere in 'app/assets/stylesheets', so don't bother putting that part in your path.

Finally, add a route to config/routes.rb so that you can easily preview your color swatches:

mount Swatches::Engine, :at => "/swatches",

Using

Whenever you change the list of colors in config/swatches.rb, run the following rake task:

rake swatches:generate

This will create a new _color-swatches.css.scss file and put it in the stylesheet directory named in config/swatches.rb. Restart your web server for these new colors to take effect.

You can preview these generated colors by navigating to /swatches in your application.

Contributors

Swatches was originally developed by Wyatt Greene and is maintained by District Management Group.