Generated by SassMeister.com.

SassMeister-input-HTML.html

.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Color Schemer (v0.2.8)
// ----

@import "compass";
@import "color-schemer";
//https://github.com/Team-Sass/color-schemer
////////////////////////////////////////////
// SCHEME

// Pick the base color for your scheme:
$cs-primary: #09739C;

// Select your scheme from the list and place it here:
$cs-scheme: analogic; // mono, complement, triad, tetrad, analogic, accented-analogic

// How distant do you want the hue offset to be:
$cs-hue-offset: 20;

// How distant do you want tints and shades to be from their base:
$cs-brightness-offset: 5;

$cs-color-model: rgb; // rgb, ryb
$cs-colorblind: protanopia; // protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, monochromacy, amonochromacy

$primary   : cs-primary();
$secondary : cs-secondary();
$tertiary  : cs-tertiary();
$quadrary  : cs-quadrary();

@include cs-test(
  red
  , $element: ".scheme"
);

@include cs-test($primary $secondary $tertiary $quadrary);
div {
  height: 100px;
}


////////////////////////////////////////////
// RYB

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  orange
  , $element: ".ryb"
);


////////////////////////////////////////////
// RGB

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  yellow
  , $element: ".rgb"
);

////////////////////////////////////////////
// CMYK

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  green
  , $element: ".cmyk"
);

////////////////////////////////////////////
// CS-MIX

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  blue
  , $element: ".cs-mix"
);

////////////////////////////////////////////
// MIX

@function cs-loop() {
  $list: ();
  @for $i from 0deg through 360deg / 8 {
    $color: cs-cb(adjust-hue(red, $i * 8));
    $list: append($list, $color);
  }
  @return $list;
}

@include cs-test(
  blue
  , $element: ".mix"
);

////////////////////////////////////////////

html {
  height: 100%;
}
body {
  display: table;
  width: 100%;
  height: 100%;
  margin: 0;
}
div {
  display: table-row !important;
  height: auto !important;
}
body:before {
  height: 200px !important;
}

SassMeister-output.css

.scheme {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 100%);
  background: -o-linear-gradient(left, #ff0000 0%, #ff0000 100%);
  background: -webkit-linear-gradient(left, #ff0000 0%, #ff0000 100%);
  background: linear-gradient(to right, #ff0000 0%, #ff0000 100%);
  position: relative;
  z-index: 999999999999;
}

body:before {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #09739c 0%, #09739c 25%, #09429c 25%, #09429c 50%, #099c94 50%, #099c94 75%, #00b8ff 75%, #00b8ff 100%);
  background: -o-linear-gradient(left, #09739c 0%, #09739c 25%, #09429c 25%, #09429c 50%, #099c94 50%, #099c94 75%, #00b8ff 75%, #00b8ff 100%);
  background: -webkit-linear-gradient(left, #09739c 0%, #09739c 25%, #09429c 25%, #09429c 50%, #099c94 50%, #099c94 75%, #00b8ff 75%, #00b8ff 100%);
  background: linear-gradient(to right, #09739c 0%, #09739c 25%, #09429c 25%, #09429c 50%, #099c94 50%, #099c94 75%, #00b8ff 75%, #00b8ff 100%);
  position: relative;
  z-index: 999999999999;
}

div {
  height: 100px;
}

.ryb {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #ffa500 0%, #ffa500 100%);
  background: -o-linear-gradient(left, #ffa500 0%, #ffa500 100%);
  background: -webkit-linear-gradient(left, #ffa500 0%, #ffa500 100%);
  background: linear-gradient(to right, #ffa500 0%, #ffa500 100%);
  position: relative;
  z-index: 999999999999;
}

.rgb {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #ffff00 0%, #ffff00 100%);
  background: -o-linear-gradient(left, #ffff00 0%, #ffff00 100%);
  background: -webkit-linear-gradient(left, #ffff00 0%, #ffff00 100%);
  background: linear-gradient(to right, #ffff00 0%, #ffff00 100%);
  position: relative;
  z-index: 999999999999;
}

.cmyk {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #008000 0%, #008000 100%);
  background: -o-linear-gradient(left, #008000 0%, #008000 100%);
  background: -webkit-linear-gradient(left, #008000 0%, #008000 100%);
  background: linear-gradient(to right, #008000 0%, #008000 100%);
  position: relative;
  z-index: 999999999999;
}

.cs-mix {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #0000ff 0%, #0000ff 100%);
  background: -o-linear-gradient(left, #0000ff 0%, #0000ff 100%);
  background: -webkit-linear-gradient(left, #0000ff 0%, #0000ff 100%);
  background: linear-gradient(to right, #0000ff 0%, #0000ff 100%);
  position: relative;
  z-index: 999999999999;
}

.mix {
  content: "";
  display: block;
  height: 2em;
  background: -moz-linear-gradient(left, #0000ff 0%, #0000ff 100%);
  background: -o-linear-gradient(left, #0000ff 0%, #0000ff 100%);
  background: -webkit-linear-gradient(left, #0000ff 0%, #0000ff 100%);
  background: linear-gradient(to right, #0000ff 0%, #0000ff 100%);
  position: relative;
  z-index: 999999999999;
}

html {
  height: 100%;
}

body {
  display: table;
  width: 100%;
  height: 100%;
  margin: 0;
}

div {
  display: table-row !important;
  height: auto !important;
}

body:before {
  height: 200px !important;
}

SassMeister-rendered.html

.