colour signal in a very old angular implementation by uxtemple, we'll hopefully release a new one soon http://s15.postimg.org/hczxtghzv/Screen_Shot_2015_12_28_at_22_37_45.png

colour-signal.html

<div class="colour-signal">
  <div class="colour-signal-basics colour-signal-choices clearfix">
    <div class="colour-signal-basics-transparent colour-signal-choice colour-signal-basics-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: colour === &#39;transparent&#39; }" ng-click="colour=&quot;transparent&quot;"></div>
    <div class="colour-signal-basics-white colour-signal-choice colour-signal-basics-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: hue === 0 &amp;&amp; saturation === 0 &amp;&amp; lightness &gt;= 50}" ng-click="hue=0;saturation=0;lightness=100;"></div>
    <div class="colour-signal-basics-black colour-signal-choice colour-signal-basics-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: hue === 0 &amp;&amp; saturation === 0 &amp;&amp; lightness &lt; 50 }" ng-click="hue=0;saturation=0;lightness=0;"></div>
    <input class="colour-signal-custom" ng-model="colour" style="border-color: {{ colour }}" />
  </div>
  <div class="colour-signal-hue colour-signal-choices clearfix">
    <div class="colour-signal-hue-choice colour-signal-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: $parent.hue === choice.value &amp;&amp; !($parent.hue === 0 &amp;&amp; $parent.saturation === 0),  &#39;colour-signal-hue-range-choice&#39;: choice.range }" ng-click="$parent.hueChosen(choice.value)" ng-repeat="choice in hueChoices" style="background-color:hsl({{ choice.value }}, 100%, 50%);"></div>
  </div>
  <div class="colour-signal-saturation colour-signal-choices clearfix" ng-show="(hue || hue === 0) &amp;&amp; !(hue === 0 &amp;&amp; saturation === 0)">
    <div class="colour-signal-saturation-choice colour-signal-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: $parent.saturation === choice }" ng-click="$parent.saturation = choice" ng-repeat="choice in saturationChoices" style="background-color:hsl({{ hue }}, {{ choice }}%, 50%);"></div>
  </div>
  <div class="colour-signal-lightness colour-signal-choices clearfix" ng-show="hue || hue === 0">
    <div class="colour-signal-lightness-choice colour-signal-choice" ng-class="{ &#39;colour-signal-choice-active&#39;: $parent.lightness === choice,  &#39;colour-signal-basics-white&#39;: hue === 0 &amp;&amp; saturation === 0 &amp;&amp; choice === 100,  &#39;colour-signal-basics-black&#39;: hue === 0 &amp;&amp; saturation === 0 &amp;&amp; choice === 0 }" ng-click="$parent.lightness = choice" ng-repeat="choice in lightnessChoices" style="background-color:hsl({{ hue }}, {{ saturation }}%, {{ choice }}%);"></div>
  </div>
</div>

colour-signal.js

/*jshint -W030 */
!function() {
  'use strict';

  var app = angular.module('colour-signal', []);

  app.directive('colourSignal', [
    '$templateCache',
    '$timeout',
    'truncatedRange',
    function($templateCache,
             $timeout,
             truncatedRange) {
    return {
      restrict: 'A',
      replace: true,
      scope: { 'colour': '=ngModel' },
      link: function link(scope, iElement, iAttrs) {
        function setColourFromHSL(newValue, oldValue) {
          if (newValue !== oldValue && !angular.isUndefined(scope.hue)) {
            scope.colour = 'hsl(' + scope.hue + ',' + scope.saturation + '%,' + scope.lightness + '%)';
          }
        }

        function setHue(newValue, oldValue) {
          var choices, keyValue, keyValueIndex, range;

          scope.hueChoices.some(function(el, i) {
            if (el.value === newValue) {
              keyValue      = el;
              keyValueIndex = i;
              return true;
            }
          });

          if (keyValue) {
            if (keyValue.value === 0 && scope.saturation === 0) {
              scope.hueChoices = truncatedRange(0, 360, hueStep).map(function(value) {
                return {value: value, range: false};
              });
            } else {
              if (!keyValue.range) {
                choices = scope.hueChoices.map(function(el) {
                  if (!el.range) {
                    return el;
                  }
                }).filter(function(el) {
                  return el;
                });

                range = truncatedRange(keyValue.value - hueStep, keyValue.value + hueStep, (hueStep*2)/(hueSquares+4));
                range = range.slice(range.length - (hueSquares + 3), range.length).map(function(value) {
                  return {value: value, range: value !== keyValue.value};
                });
                keyValueIndex = choices.map(function(el) { return el.value }).indexOf(keyValue.value);

                scope.hueChoices = choices.slice(0, keyValueIndex).
                  concat(range).concat(choices.slice(choices.length - (choices.length - keyValueIndex - 1), choices.length));
              }
            }
          }

          setColourFromHSL(newValue, oldValue);
        }

        var hueSquares        = 6,
            hueStep           = (360/hueSquares),
            saturationSquares = 7,
            lightnessSquares  = 6,
            hsl, hueChoicesValues;

        scope.hueChoices = truncatedRange(0, 360, hueStep).map(function(value) {
          return {value: value, range: false};
        });
        scope.saturationChoices = truncatedRange(0, 100, (100-0)/saturationSquares);
        scope.saturationChoices.push(100);
        scope.lightnessChoices = truncatedRange(0, 100, (95-5)/lightnessSquares).reverse();
        scope.lightnessChoices.splice(0,0,100);
        scope.saturation  = 100;
        scope.lightness   = 50;

        // Pick up manual changes to HSL colours
        scope.$watch('colour', function(newValue, oldValue) {
          if (newValue !== oldValue) {
            if (angular.isString(newValue) && newValue.match(/^hsl/)) {
              var asHsl = newValue.replace(/[a-z\(\)\%]*/ig, '').split(',').map(function(value) {
                return parseInt(value, 10);
              });

              if (scope.hue !== asHsl[0]) {
                scope.hue = asHsl[0];
              }
              if (scope.saturation !== asHsl[1]) {
                scope.saturation = asHsl[1];
              }
              if (scope.lightness !== asHsl[2]) {
                scope.lightness = asHsl[2];
              }
            }
          }
        });

        // Parse initial values
        if (angular.isString(scope.colour) && scope.colour.match(/^hsl/)) {
          hsl = scope.colour.replace(/[a-z\(\)\%]*/ig, '').split(',').map(function(value) {
            return parseInt(value, 10);
          });

          hueChoicesValues = scope.hueChoices.map(function(el) { return el.value; });

          if (hueChoicesValues.indexOf(hsl[0]) !== -1) {
            scope.hue = hsl[0];
          } else {
            hueChoicesValues.some(function(value) {
              if (hsl[0] < value) {
                scope.hue = value;
                return true;
              }
            });

            $timeout(function() {
              scope.hue = hsl[0];
            }, 20);
          }
          scope.saturation  = hsl[1];
          scope.lightness   = hsl[2];
        }

        scope.hueChosen = function(value) {
          if (scope.hue === 0 && scope.saturation === 0) {
            scope.saturation  = 100;
            scope.lightness   = 60;
          }

          if (scope.hue === 0 && value === 0) {
            setHue(value, scope.hue);
          } else {
            scope.hue = value;
          }
        }

        scope.$watch('hue', setHue);

        scope.$watch('saturation', setColourFromHSL);
        scope.$watch('lightness', setColourFromHSL);
        scope.$watch('colour', function(value) {
          if (angular.isString(scope.colour) && !scope.colour.match(/^hsl/)) {
            scope.hue = undefined;
          }
        });

      },
      template: $templateCache.get('/colour-signal.html')
    };
  }]);
}();

colour-signal.scss

.colour-signal-choices {
  margin-bottom: 2px;
  margin-left: 40px;
}
.colour-signal-choice {
  width: 36px;
  height: 36px;
  border-radius: 36px;
  border: 1px solid transparent;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.colour-signal-hue-range-choice {
  width: 25px;
  height: 36px;
  border-radius: 36px;
  margin-right: 1px;
}
.colour-signal-custom {
  color: #323232;
  width: 175px;
  height: 36px;
  padding: 0 20px;
  text-align: center;
  border: 10px solid transparent;
  border-radius: 36px;
  outline: none;
  position: relative;

  &:after {
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: -3px;
    content: ' ';
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid white;
  }
}
.colour-signal-choice-active, .no-touch .colour-signal-choice:hover {
  &:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -4px;
    content: ' ';
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid white;
  }

  &.colour-signal-basics-transparent {
    &:after {
      border: 1px solid white;
      background-color: white;
    }
  }
  &.colour-signal-basics-white {
    &:after {
      background-color: black;
      border: 1px solid black;
    }
  }
}
.colour-signal-basics-transparent {
  border: 1px solid white;

  &:before {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    height: 1px;
    width: 100%;
    background: white;
    content: " ";
    @include transform(rotate(-45deg));
  }
}
.colour-signal-basics-white {
  background-color: white;
}
.colour-signal-basics-black {
  background-color: black;
  border-color: white;
}