@cloudparker/easy-color-picker-svelte

easy-color-picker

Implement this simple and lightweight color picker specifically for Svelte without any dependencies, maintaining a small package footprint. Easily obtain the color value by utilizing the on:change event for the picker. Simply add it to any component. It will work well on mobile devices also.

Install

npm install @cloudparker/easy-color-picker-svelte --save-dev

Screenshot

Sample

<script lang="ts">
	import EasyColorPicker from '@cloudparker/easy-color-picker-svelte';
	const handleColor = (ev: CustomEvent) => {
		let color = ev.detail;
		console.log(color);
	};
</script>

<EasyColorPicker
	on:color={handleColorChange}
	rgbaFormat={false}
	colorPalletes={['#f57f17', '#00c853', '#00bfa5', '#2962ff']}
/>

Demo

NA

Props

color: string

default: #0000ff Bind the color value in hex format.

rgbaFormat: boolean

default: false Enable this when the rgba color value required, by default the color picker return hex color value.

colorPalletes: string[]

Set colors for quick access, can set max 4 colors into it.

Events

on:color Tigger with the color value rgba or hex format when color chnaged.