It's a color wheel
Preview
Introducion
"It's a color wheel" is a library that shows a color wheel with a purpose to pick a colorFeatures
- It is also a color picker
- Different ui for mobile and desktop
- Support for HSL and HSV
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%;
}