Pixel Palette

A modern, customizable color picker component for Vue 3.

⚠️ Warning
All versions below v1.7.x are incomplete and should not be used. If you are on an older version, please upgrade to a newer release. Refer to the migration guide for details. Older versions will be deprecated or unpublished over time.

Live Demo

You can view a live demo of the color picker.

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
• 🌗 Dark/Light Mode

Installation

npm install pixel-palette
# or
pnpm add pixel-palette
# or
yarn add pixel-palette

Usage

Basic Usage

<template>
  <ColorPicker @set-color="handleColorChange" />
</template>

<script setup>
import { ColorPicker } from "pixel-palette";

function handleColorChange(color) {
  console.log("Selected color:", color);
}
</script>

With Props

<template>
  <ColorPicker
    title="Primary Color"
    :initial-color="'hsla(210, 100%, 50%, 0.8)'"
    color-mode="hex"
    :enable-alpha="true"
    :open-alpha-by-default="false"
    :dark-mode="false"
    @set-color="updateColor"
  />
</template>

<script setup>
import { ColorPicker } from "pixel-palette";

const updateColor = (color) => {
  // color will be in the current format (HEX, RGB, or HSL)
  console.log("New color:", color);
};
</script>

Migration Guide

First, you need to run the upgrade package command in your package manager of choice

pnpm update pixel-palette

Then remove the style imports from the project.

<script setup>
import { ColorPicker } from "pixel-palette";
// import "pixel-palette/style.css"; <- if you have this, remove this line
// import "pixel-palette/style"; <- if you have this, remove this line

const updateColor = (color) => {
  // color will be in the current format (HEX, RGB, or HSL)
  console.log("New color:", color);
};
</script>

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
enableAlpha	boolean	true	Option to enable alpha channel
openAlphaByDefault	boolean	false	Option to show/hide alpha channel
darkMode	boolean	false	Option to show dark mode

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