Vue3 Color Picker

A powerful and flexible color picker component for Vue 3.x applications.

Documentation & Examples | 文档和示例

✨ Features

• Multiple Color Modes
  • Solid color selection with HEX, RGB, and HSL formats
  • Linear gradient with customizable angle and positions
  • Radial gradient with adjustable center and radius
• Advanced Controls
  • Alpha channel support for transparency adjustment
  • Interactive gradient bar with intuitive control points
  • Drag, add, or delete gradient stops with ease
  • Real-time color preview
• Modern Browser Features
  • EyeDropper tool for picking colors from anywhere on screen (Chrome 95+)
  • Full keyboard navigation support
  • Responsive design that works on both desktop and mobile

🖼️ Screenshots

demo.mov

📦 Installation

# Using npm
npm install @mcistudio/vue-colorpicker

# Using yarn
yarn add @mcistudio/vue-colorpicker

# Using pnpm
pnpm add @mcistudio/vue-colorpicker

🚀 Quick Start

Global Registration

import { createApp } from "vue";
import App from "./App.vue";
import ColorPicker from "@mcistudio/vue-colorpicker";
import "@mcistudio/vue-colorpicker/style.css";

const app = createApp(App);
app.use(ColorPicker);
app.mount("#app");

Local Registration

<script setup>
import { ref } from "vue";
import ColorPicker from "@mcistudio/vue-colorpicker";
import "@mcistudio/vue-colorpicker/style.css";

const color = ref({
  mode: "solid",
  color: {
    r: 12,
    g: 134,
    b: 123,
    a: 1,
  },
});
</script>

<template>
  <ColorPicker v-model="color" />
</template>

🌐 Browser Support

• Chrome ≥ 95 (for EyeDropper feature)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

MIT License © 2024