Live demo.

Simple color picker made with Svelte

directly inspired from https://github.com/BennyAlex/material-design-inspired-color-picker

npm i svelte-material-color-picker

Usage

<script>
    import Picker from 'svelte-material-color-picker';
</script>


<Picker on:colorChanged {margin} {size} {colorsPerRow} {defaultTint} />

Props

Full list of props/bindable variables for this component:

| name | default | description | | :--------------- | :--------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | margin | 1 | Distance between color circles. | | size | 50 | Size of the colors circles.| | colorsPerRow | 6 | Number of color circles per row.| | defaultTint | 500 | Default tint displayed for each colors.| | selectedColor | #f44336 | The color selected, hex code with hashtag. | | mode | palette | The mode of the color picker. button mode will hide after the palette after selecting a color only showing the color circle of the selected color. palette mode with show the palette and highlight the selected color in it. | | palette | link palette | The palette used by the picker.|

Events

Picker.svelte dispatches the following event:

| name | detail | description | | ----------- | ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | colorChanged | { old:string, new:string } | Triggers when clicking on a color picker. |

<Kanban
  on:colorChanged={(e) => alert(`Color changed from ${e.detail.old} to ${e.detail.new}`)}
/>

Dev Mode

git clone https://github.com/V-Py/svelte-material-color-picker
cd svelte-material-color-picker
npm install
npm run dev