A multi format Colorpicker built with Svelte. The Colorpicker accepts and sets hex(a), rgb(a) and hsl(a) colors.
This Colorpicker is available as an npm package from budibase
yarn add @budibase/colorpicker
.npm i @budibase/colorpicker
.import Colorpicker from "@budibase/colorpicker"
<Colorpicker
//must be a valid color supported by Colorpicker (hsl(a), hex(a) or rgb(a))
value="#abc"
//An array of 12 or less swatches for use in the Colorpicker panel.
swatches=["#abc2", "rgba(255,2,100,0.5)", "hsl(360,50,50)"]
//disable swatches for the Colorpicker. Defaults to false
disableSwatches={true | false}
//Open or close the Colorpicker. Defaults to false
open={true | false}
//width of the Colorpreview. Defaults to 25px
width="25px"
//height of the Colorpreview. Defaults to 25px
height="25px"
//change event - invoked when color has been selected
on:change={selectedColor => {}}
//remove swatch - invoked when swatch has been removed
on:removeswatch={removedSwatch => {})}
//add swatch event - invoked when a swatch has been added
on:addswatch={addedSwatch => {}}
/>
The Colorpicker exposes the following events. In each case, the color will be provided as the first parameter to the bound function.
Change Event
on:change={selectedColor: string => {}}
The on change event will be invoked whenever a color has been set in the Colorpicker via the palette, the hue slider, the alpha slider or by typing into the input.
Add Swatch
on:addswatch={addedSwatch: string => {}}
The add swatch event will be invoked when a user adds a swatch by clicking the add button.
Remove Swatch
on:removeswatch={removedSwatch: string => {}}
The remove swatch will be invoked when a user clicks the delete button that appears when hovering over a swatch.
disableSwatches={true}
property to the Colorpicker.