SCSS tinted palette generator and viewer (Initial color palette by chuvisco via ColourLovers: http://clrlv.rs/13qfvTf)

_palette.scss

//Mixins //
@mixin palette-theme($color) {
  .main { background-color:$color; }
  .light { background-color:lighten($color,3%); }
  .lighter { background-color:lighten($color,5%); }
  .lightest { background-color:lighten($color,10%); }
  .dark { background-color:darken($color,3%); }
  .darker { background-color:darken($color,5%); }
  .darkest { background-color:darken($color,10%); } }

// Layout //
* {   @include box-sizing(border-box); }
.container {
  width:70%;
	margin:0 auto; }
.row div {
	float:left;
	&:last-child { float:right; }
  min-height:100px;
  padding:12px 0 0;
  width:12.5%;
  &.main { width:25%; } }

// Palette
// I'm not in love via ColourLovers)
// http://www.colourlovers.com/palette/2810020/Im_not_in_love
// -----
$melon:#E98264;
$tangerine:#E7B06C;
$lemon:#E7C386;
$marine:#7A9D86;
$ink:#4C4B5A;

.melon { @include palette-theme($melon); }
.tangerine { @include palette-theme($tangerine); }
.lemon { @include palette-theme($lemon); }
.marine { @include palette-theme($marine); }
.ink { @include palette-theme($ink); }

// Typography //
body {
  background:#ccc;
  color:black;
  font-family:"Helvetica", "Arial", sans-serif;
  font-weight:700;
  text-align:center; }
.white { color:white; }
h1 {
  font-size:2em;
  margin:0;
  padding:0;
  &.title {
    border-bottom:4px solid #444;
    color:#444;
    margin-bottom:.5em;
    text-align:left; } }
h2 {
  font-size:1.2em;
  margin:.6em 0;
  padding:0; }

example.html

<div class="container">
   <h1 class="title">Simple Web Site Palette Viewer</h1>
   <div class="row melon">
      <div class="lightest"><h2>10%</h2><h2 class="white">10%</h2></div>
      <div class="lighter"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="light"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="main"><h1>melon</h1><h1 class="white">melon</h1></div>
      <div class="dark"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="darker"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="darkest"><h2>10%</h2><h2 class="white">10%</h2></div>
   </div>
   <div class="row tangerine">
      <div class="lightest"><h2>10%</h2><h2 class="white">10%</h2></div>
      <div class="lighter"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="light"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="main"><h1>tangerine</h1><h1 class="white">tangerine</h1></div>
      <div class="dark"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="darker"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="darkest"><h2>10%</h2><h2 class="white">10%</h2></div>
   </div>
   <div class="row lemon">
      <div class="lightest"><h2>10%</h2><h2 class="white">10%</h2></div>
      <div class="lighter"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="light"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="main"><h1>lemon</h1><h1 class="white">lemon</h1></div>
      <div class="dark"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="darker"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="darkest"><h2>10%</h2><h2 class="white">10%</h2></div>
   </div>
   <div class="row marine">
      <div class="lightest"><h2>10%</h2><h2 class="white">10%</h2></div>
      <div class="lighter"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="light"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="main"><h1>marine</h1><h1 class="white">marine</h1></div>
      <div class="dark"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="darker"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="darkest"><h2>10%</h2><h2 class="white">10%</h2></div>
   </div>
   <div class="row ink">
      <div class="lightest"><h2>10%</h2><h2 class="white">10%</h2></div>
      <div class="lighter"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="light"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="main"><h1>ink</h1><h1 class="white">ink</h1></div>
      <div class="dark"><h2>3%</h2><h2 class="white">3%</h2></div>
      <div class="darker"><h2>5%</h2><h2 class="white">5%</h2></div>
      <div class="darkest"><h2>10%</h2><h2 class="white">10%</h2></div>
   </div>
</div><!-- .container -->