Svelte Color Wheel

A customizable color wheel component for Svelte applications.

Features

• Interactive color wheel for hue selection
• Lightness slider for brightness control
• Hex input field that responds to external color changes
• Real-time color preview
• Touch and mouse support
• Responsive design with scalable UI elements that fit any container size

Installation

npm install svelte-color-wheel

Usage

Basic Usage

<script lang="ts">
	import { ColorWheel } from 'svelte-color-wheel';

	let selectedColor = '#ff0000';

	function handleColorChange(color: string) {
		selectedColor = color;
		console.log('Selected color:', color);
	}
</script>

<ColorWheel 
	initialColor={selectedColor} 
	onColorChange={handleColorChange} 
/>

<div style="background-color: {selectedColor}; width: 100px; height: 100px;">
	Preview
</div>

Limitations

This color wheel is not able to select grayscale colors due to the color wheel's hue-based selection mechanism. When you input grayscale hex colors like #222222, #888888, or #cccccc, the wheel will position the hue slider to the closest available hue position rather than maintaining a true grayscale representation.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialColor | string | '#ff0000' | Initial color in hex format | | onColorChange | (color: string) => void | undefined | Callback when color changes |

Development

To run the demo locally:

npm run dev

License

This project is licensed under the MIT License - see the LICENSE file for details.