dylanjameswagner
3/4/2016 - 8:33 PM

Grayscale Swatches

Grayscale Swatches

// $gray_5:  lighten($black, 95%);
// $gray_10: lighten($black, 90%);
// $gray_15: lighten($black, 85%);
// $gray_20: lighten($black, 80%);
// $gray_25: lighten($black, 75%);
// $gray_30: lighten($black, 70%);
// $gray_35: lighten($black, 65%);
// $gray_40: lighten($black, 60%);
// $gray_45: lighten($black, 55%);
// $gray_50: lighten($black, 50%);
// $gray_55: lighten($black, 45%);
// $gray_60: lighten($black, 40%);
// $gray_65: lighten($black, 35%);
// $gray_70: lighten($black, 30%);
// $gray_75: lighten($black, 25%);
// $gray_80: lighten($black, 20%);
// $gray_85: lighten($black, 15%);
// $gray_90: lighten($black, 10%);
// $gray_95: lighten($black, 5%);

// $gray_5:  lighten($black, 5%);
// $gray_10: lighten($black, 10%);
// $gray_15: lighten($black, 15%);
// $gray_20: lighten($black, 20%);
// $gray_25: lighten($black, 25%);
// $gray_30: lighten($black, 30%);
// $gray_35: lighten($black, 35%);
// $gray_40: lighten($black, 40%);
// $gray_45: lighten($black, 45%);
// $gray_50: lighten($black, 50%);
// $gray_55: lighten($black, 55%);
// $gray_60: lighten($black, 60%);
// $gray_65: lighten($black, 65%);
// $gray_70: lighten($black, 70%);
// $gray_75: lighten($black, 75%);
// $gray_80: lighten($black, 80%);
// $gray_85: lighten($black, 85%);
// $gray_90: lighten($black, 90%);
// $gray_95: lighten($black, 95%);

$grey_5:  darken($white, 5%);
$grey_10: darken($white, 10%);
$grey_15: darken($white, 15%);
$grey_20: darken($white, 20%);
$grey_25: darken($white, 25%);
$grey_30: darken($white, 30%);
$grey_35: darken($white, 35%);
$grey_40: darken($white, 40%);
$grey_45: darken($white, 45%);
$grey_50: darken($white, 50%);
$grey_55: darken($white, 55%);
$grey_60: darken($white, 60%);
$grey_65: darken($white, 65%);
$grey_70: darken($white, 70%);
$grey_75: darken($white, 75%);
$grey_80: darken($white, 80%);
$grey_85: darken($white, 85%);
$grey_90: darken($white, 90%);
$grey_95: darken($white, 95%);

.gray.gray-10 { background-color: $gray_10; }
.gray.gray-15 { background-color: $gray_15; }
.gray.gray-20 { background-color: $gray_20; }
.gray.gray-25 { background-color: $gray_25; }
.gray.gray-30 { background-color: $gray_30; }
.gray.gray-35 { background-color: $gray_35; }
.gray.gray-40 { background-color: $gray_40; }
.gray.gray-45 { background-color: $gray_45; }
.gray.gray-50 { background-color: $gray_50; }
.gray.gray-55 { background-color: $gray_55; }
.gray.gray-60 { background-color: $gray_60; }
.gray.gray-65 { background-color: $gray_65; }
.gray.gray-70 { background-color: $gray_70; }
.gray.gray-75 { background-color: $gray_75; }
.gray.gray-80 { background-color: $gray_80; }
.gray.gray-85 { background-color: $gray_85; }
.gray.gray-90 { background-color: $gray_90; }
.gray.gray-95 { background-color: $gray_95; }

.grey.grey-10 { background-color: $grey_10; }
.grey.grey-15 { background-color: $grey_15; }
.grey.grey-20 { background-color: $grey_20; }
.grey.grey-25 { background-color: $grey_25; }
.grey.grey-30 { background-color: $grey_30; }
.grey.grey-35 { background-color: $grey_35; }
.grey.grey-40 { background-color: $grey_40; }
.grey.grey-45 { background-color: $grey_45; }
.grey.grey-50 { background-color: $grey_50; }
.grey.grey-55 { background-color: $grey_55; }
.grey.grey-60 { background-color: $grey_60; }
.grey.grey-65 { background-color: $grey_65; }
.grey.grey-70 { background-color: $grey_70; }
.grey.grey-75 { background-color: $grey_75; }
.grey.grey-80 { background-color: $grey_80; }
.grey.grey-85 { background-color: $grey_85; }
.grey.grey-90 { background-color: $grey_90; }
.grey.grey-95 { background-color: $grey_95; }

.swatch {
    display: inline-block;
    width: 50%;
    padding: 10px 10px 8px;
}

.swatch[class="*gray"] {
    float: left;
}

<div class="swatch gray-5">5</div> <div class="swatch grey-5">5</div>
<div class="swatch gray-10">10</div> <div class="swatch grey-10">10</div>
<div class="swatch gray-15">15</div> <div class="swatch grey-15">15</div>
<div class="swatch gray-20">20</div> <div class="swatch grey-20">20</div>
<div class="swatch gray-25">25</div> <div class="swatch grey-25">25</div>
<div class="swatch gray-30">30</div> <div class="swatch grey-30">30</div>
<div class="swatch gray-35">35</div> <div class="swatch grey-35">35</div>
<div class="swatch gray-40">40</div> <div class="swatch grey-40">40</div>
<div class="swatch gray-45">45</div> <div class="swatch grey-45">45</div>
<div class="swatch gray-50">50</div> <div class="swatch grey-50">50</div>
<div class="swatch gray-55">55</div> <div class="swatch grey-55">55</div>
<div class="swatch gray-60">60</div> <div class="swatch grey-60">60</div>
<div class="swatch gray-65">65</div> <div class="swatch grey-65">65</div>
<div class="swatch gray-70">70</div> <div class="swatch grey-70">70</div>
<div class="swatch gray-75">75</div> <div class="swatch grey-75">75</div>
<div class="swatch gray-80">80</div> <div class="swatch grey-80">80</div>
<div class="swatch gray-85">85</div> <div class="swatch grey-85">85</div>
<div class="swatch gray-90">90</div> <div class="swatch grey-90">90</div>
<div class="swatch gray-95">95</div> <div class="swatch grey-95">95</div>