svelte-awesome-color-picker

svelte-awesome-color-picker is a highly customizable color picker component library with built-in keyboard navigation. It is compatible with form libraries.

Links

• 🌟 Github repository
• 🌴 Npm repository
• 🛫 Documentation

install

npm i -D svelte-awesome-color-picker

Usage

<script>
    import ColorPicker from 'svelte-awesome-color-picker';

    let rgb; // or hsv or hex
</script>

<ColorPicker bind:rgb />

Api

props

css variables

components

The color picker can be customized with components. The details and props are detailed below. It is easier to copy the library components and tweak it to your needs.

A Circle and a Chrome variants are available. To use the Chrome variant you need to set the props toRight. You can partially overwrite the components:

<script>
    import ColorPicker, { CircleVariant } from 'svelte-awesome-color-picker';
    import CustomInput from '$lib/path/to/my/awesome/variant/Input.svelte';

    let color
</script>

<!-- example with the CircleVariant and a custom Input component -->
<ColorPicker bind:color components={{...CircleVariant: input: CustomInput}} />

pickerIndicator

Component representing the picker indicator.

• The component should be positioned with position: absolute;.
• It should also have the css property pointer-events: none;.

Props:

sliderIndicator & alphaIndicator

Components representing the (hue) slider and alpha indicators.

• It should have the css property pointer-events: none;.

Props:

Input

Component representing the button to open the color picker and a hidden input with the hex value selected by the user

Props:

pickerWrapper & sliderWrapper & alphaWrapper

Encapsulates the picker, hue slider and alpha slider.

• They should define the css properties width and height.

Props:

wrapper

Encapsulates the whole color picker

Props: