angular-radial-color-picker

There's a service you can use - ColorPickerService. It has rgbToHsl() which can be used to map a color to the hsla() type that the color picker expects. There's also hslToHex(), hslToRgb() and rgbToHex() which can be used to convert the output of the color picker to other formats.

We suggest to add a custom slider for saturation and luminosity or use <input type="range">.

color-picker component uses $onChanges to detect changes of the color binding. When using <color-picker color="$ctrl.color"></color-picker> if you change a property of $ctrl.color object $onChanges is not triggered, because angular uses a shallow comparison. To properly update the color you'll have to create a new object with the new values. For example:

$ctrl.color.hue = 42; // won't work

// use the angular helper

$ctrl.color = angular.extend({}, $ctrl.color, { hue: 42 });

// or create the object manually

$ctrl.color = {

    hue: 42,

    luminosity: $ctrl.color.luminosity,

    saturation: $ctrl.color.saturation,

    alpha: $ctrl.color.alpha

};

// or use Stage-3 Object Spread properties

$ctrl.color = { ...$ctrl.color, hue: 42 };

// or use Object.assign

$ctrl.color = Object.assign({}, $ctrl.color, { hue: 42 });

touchmove is used with preventDefault() to block scrolling on mobile while rotating the color knob. Even the Web Incubator Community Group acknowledges that in some cases a passive event listener can't be used.

It's another non-passive event that could potentially introduce jank on scroll. To rotate the color knob, but stay on the same scrolling position the wheel event is blocked with preventDefault(). Thus, if you really want this feature for your users you'll have to explicitly add the mouse-scroll="true" attribute.