Package Exports

lch-color-wheel

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 (lch-color-wheel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

LCh Color Wheel

A wheel-style color picker based on CIE L*C*h color space.

Demo

Installation

npm

$ npm i lch-color-wheel

import { LchColorWheel } from 'lch-color-wheel'

CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/lch-color-wheel@0.4.1"></script>
<script>
  /* `window.LchColorWheel` object is available */
</script>

Download directly

lch-color-wheel.iife.min.js

Usage

// create a new color picker
var colorWheel = new LchColorWheel({
  // appendTo is the only required property. specify the parent element of the color wheel.
  appendTo: document.getElementById('my-color-picker-container'),

  // optional properties and default values.
  wheelDiameter: 200,
  wheelThickness: 20,
  handleDiameter: 16,
  drawsRgbValidityBoundary: false,

  onChange: function (colorWheel) {
    // the only argument is the LchColorWheel instance itself.
    // console.log("lch:", colorWheel.lch[0], colorWheel.lch[1], colorWheel.lch[2])
  },
})

// set color in LCH / RGB
colorWheel.lch = [32, 134, 306.2]
colorWheel.rgb = [0, 0, 255]

// get color in LCH / RGB
console.log('lch:', colorWheel.lch[0], colorWheel.lch[1], colorWheel.lch[2])
console.log('rgb:', colorWheel.rgb[0], colorWheel.rgb[1], colorWheel.rgb[2])

// please call redraw() after changing some appearance properties.
colorWheel.wheelDiameter = 400
colorWheel.wheelThickness = 40
colorWheel.handleDiameter = 32
colorWheel.redraw()

License

WTFPL

Sister Package

reinvented-color-wheel: HSV color wheel