Home

Awesome

Angular Radial Color Picker

<p align="center"><img width="250" src="./screenshots/thumbnail.png" alt="screenshot"></p> <p align="center"><a href="https://www.npmjs.com/package/angular-radial-color-picker"> <img src="https://img.shields.io/npm/dt/angular-radial-color-picker.svg" alt="Downloads"> </a> <a href="https://www.npmjs.com/package/angular-radial-color-picker"> <img src="https://img.shields.io/npm/v/angular-radial-color-picker.svg" alt="Version"> </a> <a href="https://www.npmjs.com/package/angular-radial-color-picker"> <img src="https://img.shields.io/npm/l/angular-radial-color-picker.svg" alt="License"> </a></p>

Introduction

Great UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as moving a slider, clicking a checkbox or pressing a key just like other basic form elements behave.

This is a flexible and elegant material design color picker. Developed with mobile devices and keyboard usage in mind. Key features:

Quick Links

<a name="demos">Demos</a>

<a name="usage">Usage</a>

With Module Build System

Color Picker on npm

npm install -S angular-radial-color-picker

And in your app:

import angular from 'angular';
import colorPicker from 'angular-radial-color-picker';
import 'angular-radial-color-picker/dist/css/color-picker.scss';

angular.module('app', [colorPicker]);

Depending on your build tool of choice you have to setup the appropriate Webpack loaders or Rollup plugins. The color picker was tested with the latest versions of sass-loader and rollup-plugin-postcss.

UMD version

You can also use the minified sources directly:

<head>
    <link href="https://unpkg.com/angular-radial-color-picker@latest/dist/css/color-picker.min.css" rel="stylesheet">
</head>
<body ng-app="app">
    <color-picker></color-picker>

    <script src="https://unpkg.com/angular@1.6.6/angular.min.js"></script>
    <script src="https://unpkg.com/angular-radial-color-picker@latest/dist/color-picker.umd.min.js"></script>
    <script>
        angular.module('app', ['color.picker.core']);
    </script>
</body>

Back To Top

<a name="options">Options</a>

<color-picker> component has several attributes, all of which are optional. See the example which uses all options.

OptionsTypeDefault/Description
colorObjectObject for initializing/changing the color of the picker. Defaults to red: <br> {hue: 0, saturation: 100, luminosity: 50, alpha: 1}.
on-selectFunctionCallback which is triggered when a color is selected.
on-color-changeFunctionA function to invoke when color is changed (i.e. on rotation).
mouse-scrollBooleanUse wheel (scroll) event to rotate. Defaults to false.
scroll-sensitivityNumberAmount of degrees to rotate the picker with keyboard and/or wheel. <br> Defaults to 2 degrees.

Back To Top

<a name="events">Events</a>

For maximum flexibility the component utilizes the pub/sub pattern. For easier communication a set of events are provided that can even programmatically open or close the picker without interacting with the UI. All events carry the current (selected) color in the event data payload.

NameDescription
color-picker.showFires when the color picker is about to show and before any animation is started.
color-picker.shownFires when the color picker is shown and has finished animating.
color-picker.selectedFires when a color is selected via the middle selector. Event is fired right before hide.
color-picker.hideFires when the color picker is about to hide and before any animation is started.
color-picker.hiddenFires when the color picker is hidden and has finished animating.
color-picker.openProgramatically opens the color picker if it's not already opened.
color-picker.closeProgramatically closes the color picker if it's not already closed.

Example:

// Assign the selected color to the ViewModel and log it to the console
$scope.$on('color-picker.selected', function(ev, color) {
    vm.selectedColor = 'hsla(' + color.hue + ', ' + color.saturation + '%, ' + color.luminosity + '%, ' + color.alpha + ')';
    console.log('Selected color:', color);
});

// The good'n'tested "poke-it-with-a-stick" method:
$scope.$emit('color-picker.open');

Back To Top

<a name="styling">Styling/Sizing</a>

The color picker has a default width/height of 280px, but can also be sized via CSS. For example:

color-picker {
    width: 350px;
    height: 350px;
}

If you want a percentage based size you can use this neat little trick with 1:1 aspect ratio box of 40% width of the parent element:

color-picker {
    height: 0;
    width: 40%;
    padding-bottom: 40%;
}

Back To Top

<a name="questions">First Asked Questions</a>

<details> <summary>Color picker uses <code>hsla()</code>. How can I use other formats like <code>rgba()</code> or HEX?</summary> <p>There's a service you can use - <code>ColorPickerService</code>. It has <code>rgbToHsl()</code> which can be used to map a color to the <code>hsla()</code> type that the color picker expects. There's also <code>hslToHex()</code>, <code>hslToRgb()</code> and <code>rgbToHex()</code> which can be used to convert the output of the color picker to other formats.</p> </details> <details> <summary>How to select other shades of the solid colors?</summary> <p>We suggest to add a custom slider for saturation and luminosity or use <code>&lt;input type="range"&gt;</code>.</p> </details> <details> <summary>How can I change the active color of the picker after initialization?</summary> <p><code>color-picker</code> component uses <code>$onChanges</code> to detect changes of the color binding. When using <code>&lt;color-picker color="$ctrl.color"&gt;&lt;/color-picker&gt;</code> if you change a property of <code>$ctrl.color</code> object <code>$onChanges</code> is not triggered, because <a href="https://github.com/angular/angular.js/issues/14378#issuecomment-328805679">angular uses a shallow comparison</a>. To properly update the color you'll have to create a new object with the new values. For example: <pre>$ctrl.color.hue = 42; // won't work</pre> <pre>// use the angular helper $ctrl.color = angular.extend({}, $ctrl.color, { hue: 42 });</pre> <pre>// or create the object manually $ctrl.color = { hue: 42, luminosity: $ctrl.color.luminosity, saturation: $ctrl.color.saturation, alpha: $ctrl.color.alpha };</pre> <pre>// or use Stage-3 Object Spread properties $ctrl.color = { ...$ctrl.color, hue: 42 };</pre> <pre>// or use Object.assign $ctrl.color = Object.assign({}, $ctrl.color, { hue: 42 });</pre> </p> </details> <details> <summary>Why does Google Chrome throw a <code>[Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event.</code> warning in the console?</summary> <p><code>touchmove</code> is used with <code>preventDefault()</code> to block scrolling on mobile while rotating the color knob. Even the <a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#removing-the-need-to-cancel-events">Web Incubator Community Group</a> acknowledges that in some cases a passive event listener can't be used.</p> </details> <details> <summary>Why is the scroll-to-rotate not turned on by default?</summary> <p>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 <code>wheel</code> event is blocked with <code>preventDefault()</code>. Thus, if you really want this feature for your users you'll have to explicitly add the <code>mouse-scroll="true"</code> attribute.</p> </details> <br>

Back To Top

Contribute

If you're interested in the project you can help out with feature requests, bugfixes, documentation improvements or any other helpful contributions. You can use the issue list of this repo for bug reports and feature requests and as well as for questions and support.

We are also particularly interested in projects you did with this plugin. If you have created something colorful and creative with the color picker and want to show it off send us a quick mail.

The project is using an adapted version of Angular's commit convention and commit messages should adhere to it.

Back To Top