ColorDisc.js

Procreate-like disc color picker for the web

Demo on CodePen

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/[email protected]/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');