Graytones SASS Function

example.html

<h1>The Mighty Mighty Graytones</h1>
<h2>Featuring <span class="shade">Shade</span> &amp; <span class="tint">Tint</span></h2>

Graytones-SASS-Function.markdown

Grayscale tones SASS

Just a quick function to grab various warm, cool, & neutral graytones for my Sass files. I built it with the Pantone grays, but they could be any tones really. Better than just the basic grayscale when prototyping or even for production.

A Pen by Scott Zirkel on CodePen.

License.

graytones.scss

$font-color: #ffe88e;

// These are based on the Pantone graytone hexes

$graytone: (
  neutral: (
    one: #e5e5e5,
    two: #ccc,
    three: #b3b3b3,
    four: #999,
    five: #808080,
    six: #666,
    seven: #4d4d4d,
    eight: #333,
    nine: #1a1a1a
  ),
  cool: (
    one: #dad9d7,
    two: #d1d0ce,
    three: #c8c8c8,
    four: #bcbcbc,
    five: #b2b2b2,
    six: #a8a8aa,
    seven: #98999b,
    eight: #898b8e,
    nine: #76777b,
    ten: #63656a,
    eleven: #54565b
  ),
  warm: (
    one: #d7d2cb,
    two: #ccc4bc,
    three: #c0b8b0,
    four: #b5ada6,
    five: #ada29a,
    six: #a69c95,
    seven: #968c83,
    eight: #8d827a,
    nine: #847870,
    ten: #7a6e67,
    eleven: #6f625a
  )
);

@function tint($color, $percentage) {
  @return mix($color, white, $percentage);
}

@function shade($color, $percentage) {
  @return mix($color, black, $percentage);  
}

@function graytones($family, $tone) {
  @return map-get(map-get($graytone, $family), $tone);
}

// Just an example for the fancy CodePen preview window.

body {
  background: shade(graytones(warm, two), 50%);
  color: graytones(cool, one);
  text-align: center;
  margin-top: 10%;
  font-family: Futura, sans-serif;
  line-height: 1.428;
}

.tint {
  color: tint($font-color, 40%);
}

.shade {
  color: shade($font-color, 60%);
}