Sass Colour Palette Guide

Lighten and Darken Functions for colour palettes - Blue, Red, Shades

by Ben Graham

HTML

<section class="container">
  <div class="col-1">
    <p>1</p>
  </div>
  <div class="col-2">
    <p>2</p>
  </div>
  <div class="col-3">
    <p>3</p>
  </div>
  <div class="col-4">
    <p>4</p>
  </div>
  <div class="col-5">
    <p>5</p>
  </div>
</section>
<section class="container-two">
  <div class="col-6">
    <p>6</p>
  </div>
  <div class="col-7">
    <p>7</p>
  </div>
  <div class="col-8">
    <p>8</p>
  </div>
  <div class="col-9">
    <p>9</p>
  </div>
  <div class="col-10">
    <p>10</p>
  </div>
</section>

<section class="container-three">
  <div class="col-11">
    <p>11</p>
  </div>
  <div class="col-12">
    <p>12</p>
  </div>
  <div class="col-13">
    <p>13</p>
  </div>
  <div class="col-14">
    <p>14</p>
  </div>
  <div class="col-15">
    <p>15</p>
  </div>
  <div class="col-16">
    <p>16</p>
  </div>
  <div class="col-17">
    <p>17</p>
  </div>
  <div class="col-18">
    <p>18</p>
  </div>
  <div class="col-19">
    <p>19</p>
  </div>
  <div class="col-20">
    <p>20</p>
  </div>
</section>

SCSS

$brand-primary: #0077ea;
$brand-light:#FAFAFA;
$brand-dark:#001c39;
$brand-sub-primary:#ff002b;
$brand-mid:#e60026;
$brand-shades:#eeeeee;
$primary-text:#333333;
.container,
.container-two,
.container-three {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  background-color: $brand-light;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}
p {
  color: $brand-light;
  display: flex;
  flex-direction:column;
  justify-content:center;
  text-align: center;
  width: 100%;
}
  div {
  height: 100px;
	display: flex;
  cursor: pointer;
  }
  
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-13,
.col-14,
.col-15,
.col-16,
.col-17,
.col-18,
.col-19,
.col-20 {
-webkit-flex: 1;
flex: 1;
}

.col-1 {
  background-color: lighten($brand-primary, 5%);
  &:hover {
  background-color:darken($brand-primary, 5%);
  }
}

.col-2 {
  background-color: $brand-primary;
  &:hover {
  background-color: darken($brand-primary, 10%);
  }
}

.col-3 {
  background-color: darken($brand-primary, 5%);
  &:hover {
  background-color: darken($brand-primary, 20%);
  }
}

.col-4 {
  background-color: darken($brand-primary, 10%);
  &:hover {
  background-color: darken($brand-primary, 25%);
 }
}

.col-5 {
  background-color: darken($brand-primary, 15%);
  &:hover {
  background-color: darken($brand-primary, 30%);
  }
}

.col-6 {
  background-color: lighten($brand-sub-primary, 5%);
  &:hover {
  background-color: darken($brand-sub-primary, 5%);
  }
}

.col-7 {
  background-color: $brand-sub-primary;
  &:hover {
  background-color: darken($brand-sub-primary, 10%);
  }
}

.col-8 {
  background-color: darken($brand-sub-primary, 5%);
  &:hover {
  background-color: darken($brand-sub-primary, 20%);
  }
}

.col-9 {
  background-color: darken($brand-sub-primary, 10%);
  &:hover {
  background-color: darken($brand-sub-primary, 25%);
  }
}

.col-10 {
 ...