AngularJS - Color Hue Changer

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example78-production</title>

  <link rel="stylesheet/less" type="text/css" href="color.less" />
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
  <script>
    (function() {
      "use strict";
      angular.module('colorChanger', [])
        .controller('ColorController', [

          function() {
            var vm = this;

            vm.hue = '194.3';
            vm.saturation = '100';
            vm.lightness = '50';
            
            vm.getBaseBackground = function() {
              var color = 'hsla(' + vm.hue + ', ' + vm.saturation + '%, ' + vm.lightness + '%, 1)';

              return {'background-color': color};
            }
          }

        ]);
    }());
  </script>
</head>

<body data-ng-app="colorChanger" data-ng-controller="ColorController as color">

  <ul>
    <li ng-style="color.getBaseBackground()"></li>
  </ul>

  <form>
    <label for="hue">Hue:</label>
    <input type="text" id="hue" data-ng-model="color.hue" />
  </form>
  <form>
    <label for="saturation">Saturation:</label>
    <input type="text" id="saturation" data-ng-model="color.saturation" />
  </form>
  <form>
    <label for="lightness">Lightness:</label>
    <input type="text" id="lightness" data-ng-model="color.lightness" />
  </form>

</body>

</html>

it('should check ng-submit', function() {
  expect(element(by.binding('list')).getText()).toBe('list=[]');
  element(by.css('#submit')).click();
  expect(element(by.binding('list')).getText()).toContain('194.3');
  expect(element(by.model('text')).getAttribute('value')).toBe('');
});
it('should ignore empty strings', function() {
  expect(element(by.binding('list')).getText()).toBe('list=[]');
  element(by.css('#submit')).click();
  element(by.css('#submit')).click();
  expect(element(by.binding('list')).getText()).toContain('194.3');
 });

ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  li {
    height: 100px;
    &.bgc-color-base {
      .background-base;
    }
  }
}    

//== color variables
@hue: 194.3; // enter optional hue variable or custom hue range 0-330
@saturation: 100; // saturation range 0-100
@lightness: 50; // lightness range 0-100 (0 = black, 100 = white)
@alpha: 1;

//== base color function
@color-base: hsla(@hue, (@saturation/100), (@lightness/100), @alpha);

//== base color mixins
.background-base(@hue: @hue, @saturation: @saturation, @lightness: @lightness, @alpha: @alpha) {
  background: @color-base;
}