Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<div class="swatch primary"></div>
<div class="swatch primary-dim"></div>
<div class="swatch primary-bright"></div>
<div class="swatch secondary"></div>
<div class="swatch tertiary"></div>
<div class="swatch primary-gradient"></div>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

$primary-color: #5522bb;
$secondary-color: adjust-hue($primary-color, 120);
$tertiary-color: adjust-hue($primary-color, -120);

div.swatch {
  height: 100px;
  width: 100px;
  margin: 1em;
  float: left;
}

.primary {
  background-color: $primary-color;
}

.primary-dim {
  background-color: desaturate($primary-color, 50);
}

.primary-bright {
  background-color: lighten($primary-color, 20);
}@import "color-me-sass";


.secondary {
  background-color: $secondary-color;
}

.tertiary {
  background-color: $tertiary-color;
}

.primary-gradient {
  background-image: linear-gradient($primary-color, $tertiary-color);
}

SassMeister-output.css

div.swatch {
  height: 100px;
  width: 100px;
  margin: 1em;
  float: left;
}

.primary {
  background-color: #5522bb;
}

.primary-dim {
  background-color: #675984;
}

.primary-bright {
  background-color: #8c61e2;
}

.secondary {
  background-color: #bb5522;
}

.tertiary {
  background-color: #22bb55;
}

.primary-gradient {
  background-image: -webkit-linear-gradient(#5522bb, #22bb55);
  background-image: linear-gradient(#5522bb, #22bb55);
}

SassMeister-rendered.html

<div class="swatch primary"></div>
<div class="swatch primary-dim"></div>
<div class="swatch primary-bright"></div>
<div class="swatch secondary"></div>
<div class="swatch tertiary"></div>
<div class="swatch primary-gradient"></div>