Colors
All Sass color variables prefixed with $color-. This makes it easy to figure out what a variable is doing later.
Primary
$color-pacific-blue
#0099cc
#0099cc
$color-rio-grande
#c4d600
#c4d600
$color-oslo-gray
#888b8d
#888b8d
$color-white
#FFF
#FFF
$color-black
#000
#000
Secondary
$color-midnight-blue
#002f6c
#002f6c
$color-apple-green
#3aa047
#3aa047
$color-hot-orange
#e55d25
#e55d25
$color-stiletto-red
#a4343a
#a4343a
$color-error
#cc0000
#cc0000
Grays
$color-tundora
#464646
#464646
$color-silver
#bbb
#bbb
$color-alto
#ddd
#ddd
$color-gallery
#eee
#eee
$color-alabaster
#f7f7f7
#f7f7f7
Social Media
$color-facebook
#3b5998
#3b5998
$color-twitter
#00b6f1
#00b6f1
$color-youtube
#b31217
#b31217
$color-pinterest
#cb2027
#cb2027
$color-instagram
#c32aa3
#c32aa3
<h3>Primary</h3>
<div class="kss-swatch" style="background-color: #0099cc">
<div class="kss-swatch__hex">$color-pacific-blue<br>#0099cc</div>
</div>
<div class="kss-swatch" style="background-color: #c4d600">
<div class="kss-swatch__hex">$color-rio-grande<br>#c4d600</div>
</div>
<div class="kss-swatch" style="background-color: #888b8d">
<div class="kss-swatch__hex">$color-oslo-gray<br>#888b8d</div>
</div>
<div class="kss-swatch" style="background-color: #FFF">
<div class="kss-swatch__hex">$color-white<br>#FFF</div>
</div>
<div class="kss-swatch" style="background-color: #000">
<div class="kss-swatch__hex">$color-black<br>#000</div>
</div>
<h3 class="kss-m-top">Secondary</h3>
<div class="kss-swatch" style="background-color: #002f6c">
<div class="kss-swatch__hex">$color-midnight-blue<br>#002f6c</div>
</div>
<div class="kss-swatch" style="background-color: #3aa047">
<div class="kss-swatch__hex">$color-apple-green<br>#3aa047</div>
</div>
<div class="kss-swatch" style="background-color: #e55d25">
<div class="kss-swatch__hex">$color-hot-orange<br>#e55d25</div>
</div>
<div class="kss-swatch" style="background-color: #a4343a">
<div class="kss-swatch__hex">$color-stiletto-red<br>#a4343a</div>
</div>
<div class="kss-swatch" style="background-color: #cc0000">
<div class="kss-swatch__hex">$color-error<br>#cc0000</div>
</div>
<h3 class="kss-m-top">Grays</h3>
<div class="kss-swatch" style="background-color: #464646">
<div class="kss-swatch__hex">$color-tundora<br>#464646</div>
</div>
<div class="kss-swatch" style="background-color: #bbb">
<div class="kss-swatch__hex">$color-silver<br>#bbb</div>
</div>
<div class="kss-swatch" style="background-color: #ddd">
<div class="kss-swatch__hex">$color-alto<br>#ddd</div>
</div>
<div class="kss-swatch" style="background-color: #eee">
<div class="kss-swatch__hex">$color-gallery<br>#eee</div>
</div>
<div class="kss-swatch" style="background-color: #f7f7f7">
<div class="kss-swatch__hex">$color-alabaster<br>#f7f7f7</div>
</div>
<h3 class="kss-m-top">Social Media</h3>
<div class="kss-swatch" style="background-color: #3b5998">
<div class="kss-swatch__hex">$color-facebook<br>#3b5998</div>
</div>
<div class="kss-swatch" style="background-color: #00b6f1">
<div class="kss-swatch__hex">$color-twitter<br>#00b6f1</div>
</div>
<div class="kss-swatch" style="background-color: #b31217">
<div class="kss-swatch__hex">$color-youtube<br>#b31217</div>
</div>
<div class="kss-swatch" style="background-color: #cb2027">
<div class="kss-swatch__hex">$color-pinterest<br>#cb2027</div>
</div>
<div class="kss-swatch" style="background-color: #c32aa3">
<div class="kss-swatch__hex">$color-instagram<br>#c32aa3</div>
</div>