vue-color-palette

pnpm add vue-color-palette

Playground

Usage

Styles

You need to import the component styles:

import 'vue-color-palette/index.css'

[!IMPORTANT] 🚧 Only import theme.css if you are NOT using shadcn-schema in your project:

import 'vue-color-palette/theme.css'

Basic Usage

ColorPicker renders the panel directly. Use ColorPickerTrigger if you need a trigger button:

<script setup lang="ts">
import { ref } from 'vue'
import { ColorPicker, ColorPickerTrigger } from 'vue-color-palette'
import 'vue-color-palette/index.css'

const color = ref('#1447e6')
</script>

<template>
  <!-- Direct panel -->
  <ColorPicker v-model:value="color" />

  <!-- With trigger button -->
  <ColorPickerTrigger v-model:value="color" />
</template>

Props

ColorPickerProps

• value - Current color value (supports solid colors and gradients)
• defaultValue - Default color value
• colorModes - Available color modes: 'monochrome' | 'linear-gradient' | 'radial-gradient'
• format - Color format: 'HEX' | 'RGB' | 'HSL' | 'HSV' | 'CMYK'
• disabled - Whether the picker is disabled
• enableModePicker - Enable mode picker (solid/gradient)
• enableFormatPicker - Enable format picker
• enableInput - Enable color input fields
• enableAlpha - Enable alpha channel control
• enableEyeDrop - Enable eye dropper tool
• recentColors - Recent colors array or false to disable
• swatchColors - Swatch colors array or true to use default colors
• locale - Locale string or custom locale config
• isDark - Force dark mode (undefined for auto detection)

ColorPickerTriggerProps

Extends ColorPickerProps with:

• placeholder - Placeholder text for the trigger button

Credits

• react-best-gradient-color-picker - UI design is largely inspired by this project
• TDesign - Built-in color presets are based on TDesign
• vue3-color-picker

License

MIT License © jinghaihan