A set of Svelte components for picking and editing colors

• no inline styles
• the module exports functions for color conversion from/to hex/rgb/hsl/hsv color space. See utils.d.ts for definitions of types and functions.

Includes components:

• ColorPicker -- a component for picking a color with transparency
• ColorEdit -- allow edit color value via input fields

Inspired by:

• svelte-awesome-color-picker
• svelte-color-picker
• Coloris

Docs & Demo • API

Install

NPM

npm i -D @apsc/color

PNPM

pnpm add -D @apsc/color

Usage

ColorPicker

<script>
  let color='#f00';
</script>
<ColorPicker bind:color />

Basic styles are described in the color-picker.css file.

ColorEdit

<script>
  let color='#f00';
</script>
<ColorEdit bind:color />

Basic styles are described in the color-edit.css file.