Edit in JSFiddle

<h4>HSL Color Methods:-</h4>

        <div class='container-one'>
            background: $backgroundColor;
        </div>

        <div class='container-two'>
            background: darken($backgroundColor, 30%);
        </div>

        <div class='container-three'>
            background: lighten($backgroundColor, 30%);
        </div>

        <div class='container-four'>
            background: invert($backgroundColor);
        </div>
        <div class='container-five'>
            background: complement($backgroundColor);
        </div>
        <div class='container-six'>
            background: saturate($backgroundColor,90%);
        </div>
        <div class='container-seven'>
            background: desaturate($backgroundColor,90%);
        </div>
        <div class='container-eight'>
            background: adjust-hue($backgroundColor,90%);
        </div>
        <div class='container-nine'>
            background: saturation($backgroundColor);
        </div>
        <div class='container-ten'>
            background: hue($backgroundColor);
        </div>
        <div class='container-eleven'>
            background: hsl(180, 20, 30);
        </div>
        <div class='container-tweleve'>
            background: hsla(10, 20, 30,0.2);
        </div>

<h4>RGB Color Methods:-</h4>

        <div class='container-thirteen'>
            background: rgb($myredcolor, $mygreencolor, $mybluecolor);
        </div>

        <div class='container-fourteen'>
            background: rgba($myredcolor, $mygreencolor, $mybluecolor, 0.2);
        </div>

        <div class='container-fifteen'>
            background: red($backgroundColor);
        </div>

        <div class='container-sixteen'>
            background: green($backgroundColor);
        </div>
        <div class='container-seventeen'>
            background: blue($backgroundColor);
        </div>
        <div class='container-eighteen'>
            background: mix(rgb($myredcolor, $mygreencolor, $mybluecolor), #808080);
        </div>

/*HSL colors -- tutorialsavvy.com*/
.container, .container-one, .container-two, .container-three, .container-four, .container-five, .container-six, .container-seven, .container-eight, .container-nine, .container-ten, .container-eleven, .container-tweleve, .container-thirteen, .container-fourteen, .container-fifteen, .container-sixteen, .container-seventeen, .container-eighteen {
  height: 20px;
  width: 600px;
  color: red;
  border: 1px solid #C0C0C0;
  text-align: left; }

.container-one {
  background: lime; }

.container-two {
  background: #006600; }

.container-three {
  background: #99ff99; }

.container-four {
  background: magenta; }

.container-five {
  background: magenta; }

.container-six {
  background: lime; }

.container-seven {
  background: #738c73; }

.container-seven {
  background: #738c73; }

.container-eight {
  background: #007fff; }

.container-nine {
  background: 100%; }

.container-ten {
  background: 120deg; }

.container-eleven {
  background: #3d5c5c; }

.container-tweleve {
  background: rgba(92, 66, 61, 0.2); }

/*RGB colors -- tutorialsavvy.com*/
.container-thirteen {
  background: #235f69; }

.container-fourteen {
  background: rgba(35, 95, 105, 0.2); }

.container-fifteen {
  background: 0; }

.container-sixteen {
  background: 255; }

.container-seventeen {
  background: 0; }

.container-eighteen {
  background: #516f74; }