npm install vanilla-colorful --save
Or use one of the following content delivery networks:
<script type="module" src="https://unpkg.com/vanilla-colorful?module"></script>
<script type="module" src="https://cdn.skypack.dev/vanilla-colorful"></script>
<script type="module" src="https://jspm.dev/vanilla-colorful"></script>
<script type="module" src="https://esm.sh/vanilla-colorful"></script>
<hex-color-picker color="#1e88e5"></hex-color-picker>
<script type="module">
import 'vanilla-colorful';
const picker = document.querySelector('hex-color-picker');
picker.addEventListener('color-changed', (event) => {
// get updated color value
const newColor = event.detail.value;
});
// get current color value
console.log(picker.color);
</script>
vanilla-colorful is authored using ES modules which are natively supported
by modern browsers. However, all the code examples listed here use so-called "bare module specifiers":
import 'vanilla-colorful'
.
There is now a feature in the HTML Standard called import maps that enables resolving bare module specifiers without requiring any tools. As of October 2022, import maps are not yet shipped in all browsers.
In the meantime, we recommend using one of the tools that leverage ES modules based development, such as
vite
, @web/dev-server
,
or wmr
. None of these tools are needed when importing from CDN.
The default vanilla-colorful's input/output format is a HEX string (like #ffffff
). In case if
you need another color model, we provide 12 additional color picker bundles.
vanilla-colorful exposes CSS Shadow Parts allowing to override the default styles:
hex-color-picker {
height: 250px;
}
hex-color-picker::part(saturation) {
bottom: 30px;
border-radius: 3px 3px 0 0;
}
hex-color-picker::part(hue) {
height: 30px;
border-radius: 0 0 3px 3px;
}
hex-color-picker::part(saturation-pointer) {
border-radius: 5px;
}
hex-color-picker::part(hue-pointer) {
border-radius: 2px;
width: 15px;
height: inherit;
}
vanilla-colorful provides an additional <hex-input>
element that can be used to type a color:
<hex-input color="#1e88e5"></hex-input>
<script type="module">
import 'vanilla-colorful/hex-input.js';
const input = document.querySelector('hex-input');
input.addEventListener('color-changed', (event) => {
const newColor = event.detail.value;
});
</script>
<hex-input>
renders an unstyled <input>
element inside a slot and exposes it for styling using
part
. You can also pass your own <input>
element as a child if you want to fully configure it.
In addition to color
property, <hex-input>
supports the following boolean properties:
Property | Default | Description |
---|---|---|
alpha |
false |
Allows #rgba and #rrggbbaa color formats |
prefixed |
false |
Enables # prefix displaying |
vanilla-colorful provides a set of base classes that can be imported without registering custom elements. This is useful if you want to create your own color picker with a different tag name.
import { RgbBase } from 'vanilla-colorful/lib/entrypoints/rgb.js';
customElements.define('custom-color-picker', class extends RgbBase {});
vanilla-colorful supports TypeScript and ships with types in the library itself; no need for any other install.
vanilla-colorful uses Custom Elements and Shadow DOM, and does not support IE11 or legacy Edge.
vanilla-colorful has all the benefits of react-colorful with one important difference.
While react-colorful
claims to have zero dependencies, it still expects you to use React or Preact.
This means that Angular, Vue, Svelte or vanilla JS users would have an extra dependency in their apps.
Now when all the evergreen browsers support standards based Custom Elements, it's perfect time to build such tiny and lightweight UI controls as web components rather than framework components.