Package Exports

color-disc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-disc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ColorDisc.js

Procreate-like disc color picker for the web

Demo on CodePen

Color Disc Screen

Installation

Yarn/npm

yarn add color-disc

npm install --save color-disc

Add this snippet to your root javascript file:

  import 'color-disc';

CDN

<script src="https://unpkg.com/color-disc@1.0.1/dist/color-disc.min.js"></script>

Usage

Add color-disc to your HTML markup:

<color-disc size="220" format="hex"></color-disc>

Where

size - is a number (in pixels, defaults to 390px)
format - is an output color format - hsl, rgb or hex (defaults to hsl)

To read the picked color use element.getAttribute() method:

const color = document
  .querySelector('color-disc')
  .getAttribute('color');