It's a color wheel

COVERAGE: 96.6% TESTS: 17 / 17 project license

Preview

Introducion

"It's a color wheel" is a library that shows a color wheel with a purpose to pick a color

Features

Getting started

CDN

To use a CDN all you need is to add the following code in the HTML page:

<script type="module" src="https://cdn.jsdelivr.net/gh/OmarCastro/its-a-color-wheel@0.5.0/dist/color-wheel.element.min.js?named=color-wheel"></script>

As noted, there is a query string named to set the component name, if it is not defined then the component will not be registered and you would need to import it and register manually, like with the following code:

import element from 'https://cdn.jsdelivr.net/gh/OmarCastro/its-a-color-wheel@0.5.0/dist/esm/color-wheel.element.js'

customElements.define('color-wheel', element)

Nodejs

If you wish to import from nodejs and use a bundler, you can install the its-a-color-wheel package

npm install its-a-color-wheel

Not all bundlers support query strings, it is recommended to import and register the component, like the following code:

import element from 'its-a-color-wheel'

customElements.define('color-wheel', element)

Features

Resizable to space

<color-wheel class="ui-mode--mobile"></color-wheel>
.ui-mode--mobile
{
    --ui-mode: "mobile" 
}

UI and desktop mode

Mobile mode

<color-wheel class="ui-mode--mobile"></color-wheel>
.ui-mode--mobile
{
    --ui-mode: "mobile" 
}

Desktop mode

<color-wheel class="ui-mode--desktop"></color-wheel>
.ui-mode--desktop
{
    --ui-mode: "desktop" 
}

Color modes

HSL

<color-wheel lightness="50"></color-wheel>

HSV

<color-wheel value="100"></color-wheel>

custom inner radius

<color-wheel class="inner-radius--custom"></color-wheel>
.inner-radius--custom {
    --color-wheel-inner-radius: 30%;
}