https://github.com/dev-murphy/pixel-palette
A modern, customizable color picker component for Vue 3.
https://github.com/dev-murphy/pixel-palette
color-picker vue3-typescript
Last synced: 5 months ago
JSON representation
A modern, customizable color picker component for Vue 3.
- Host: GitHub
- URL: https://github.com/dev-murphy/pixel-palette
- Owner: dev-murphy
- License: mit
- Created: 2025-09-02T21:22:33.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-04T00:28:29.000Z (10 months ago)
- Last Synced: 2025-09-04T02:24:57.747Z (10 months ago)
- Topics: color-picker, vue3-typescript
- Language: Vue
- Homepage:
- Size: 84 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Pixel Palette
A modern, customizable color picker component for Vue 3.
## Features
- 🎨 Interactive color space and hue slider
- 🔢 Multiple color formats (HEX, RGB, HSL)
- 🎯 EyeDropper API support (where available)
- 🎲 Random color generator
- 📋 Copy to clipboard with tooltip feedback
- 🎛️ Alpha channel support
- 📱 Responsive design
## Installation
```bash
npm install pixel-palette
# or
pnpm add pixel-palette
# or
yarn add pixel-palette
```
## Usage
### Basic Usage
```vue
import { ColorPicker } from "pixel-palette";
import "pixel-palette/style.css";
function handleColorChange(color) {
console.log("Selected color:", color);
}
```
### With Props
```vue
import { ColorPicker } from "pixel-palette";
import "pixel-palette/style.css";
const updateColor = (color) => {
// color will be in the current format (HEX, RGB, or HSL)
console.log("New color:", color);
};
```
## Props
| Prop | Type | Default | Description |
| -------------- | ----------------------- | --------------------- | ----------------------------------- |
| `title` | `string` | - | Optional title displayed at the top |
| `initialColor` | `string` | `"hsl(0, 100%, 50%)"` | Initial color value |
| `colorMode` | `hex` or `rgb` or `hsl` | `hex` | Initial color mode value |
| `showAlpha` | `boolean` | false | Option to show alpha channel |
## Events
| Event | Payload | Description |
| ----------- | -------- | -------------------------- |
| `set-color` | `string` | Emitted when color changes |
## Browser Support
- Modern browsers with Vue 3 support
- EyeDropper API requires Chrome 95+ or Edge 95+
- Requires secure context (HTTPS) for EyeDropper
## License
[MIT](/LICENSE)