TS Color Picker

A feature-rich web component color picker built with Lit. Beautiful, modern interface for selecting solid colors with RGBA support and multiple format outputs (hex, rgba, hsl).

Features

• 🎨 Solid color picker with intuitive 2D color area
• 🔄 Switch between hex, rgba, and hsl formats
• 📋 Copy to clipboard
• 🎯 Custom target elements - attach to any button
• 🎭 Alpha channel support
• ✨ Modern, polished UI with smooth animations
• 🌐 Works with any framework (or no framework)
• 📦 Tiny bundle size: 9.4 KB gzipped (35 KB minified)

Installation

Via CDN

<script type="module" src="https://unpkg.com/@treatspace/ts-color-picker@latest/dist/ts-color-picker.min.js"></script>

Via npm

npm install @treatspace/ts-color-picker

import '@treatspace/ts-color-picker';

Usage

Default (with built-in input)

<ts-color-picker value="rgba(255, 0, 0, 1)"></ts-color-picker>

With Custom Target Element

<button id="my-btn">Choose Color</button>
<ts-color-picker target="my-btn" value="#ff0000"></ts-color-picker>

Attributes

• value - Initial color value (hex, rgb, rgba, hsl)
• format - Display format: 'hex', 'rgba', 'hsl' (default: 'hex')
• target - ID of element that triggers the picker (optional)

Events

• color-change - Fired when color changes, contains detail.value

picker.addEventListener('color-change', (e) => {
  console.log(e.detail.value); // e.g., "#ff0000"
});

Customization

Customize the appearance using CSS custom properties:

ts-color-picker {
  /* Make it larger */
  --picker-width: 320px;
  --color-area-height: 220px;
  
  /* Custom colors */
  --primary-color: #ff6b6b;
  --success-color: #51cf66;
  
  /* Dark theme */
  --picker-bg: #1a1a1a;
  --label-color: #ffffff;
  --input-text: #ffffff;
  --input-bg: #2a2a2a;
  --input-border: #444;
}

See API.md for all available properties.

Development

npm install
npm run build
npm run watch
npm run serve

License

MIT