Lightweight Customizable Color Picker For Vue 3 – vue-color-input

A lightweight yet flexible and customizable color picker component for Vue 3 applications.

This component understands and supports all commonly used color models, including RGB, HSL, and HEX, effortlessly handling alpha channels for you. It strikes the perfect balance between minimalism and comprehensive functionality. While you can customize and extend its capabilities with additional properties, it also works flawlessly right out of the box with only v-model provided.

How to use it:

1. Import and register the vue-color-input component.

import ColorInput from 'vue-color-input'

// install it with use()

// OR register globally
app.component('ColorInput', ColorInput)

// OR locally
export.default {
  components: { ColorInput }

2. Add the component to the template.

<color-input v-model="color" />

3. Available props.

modelValue: [String, Object],
/* [ "top", "top right", "top left", "top center",
  "right top", "right", "right bottom", "right center",
  "bottom right", "bottom", "bottom left", "bottom center",
  "left top", "left bottom", "left", "left center" ]
position: {
  type: String,
  default: 'bottom'
transition: {
  type: String,
  default: 'picker-popup'
disableAlpha: {
  type: Boolean,
  default: false
disabled: {
  type: Boolean,
  default: false
disableTextInputs: {
  type: Boolean,
  default: false
/* [ "rgb", "rgb object", "rgb string", 
  "hsv", "hsv object", "hsv string", 
  "hsl", "hsl object", "hsl string",
  "name", "name string",
  "hex", "hex string",
  "hex8", "hex8 string" ]
format: String,

4. Events.

  • @mounted
  • @beforeUnmount
  • @update:modelValue
  • @pickStart
  • @pickEnd
  • @hueInputStart
  • @hueInputEnd
  • @hueInput
  • @alphaInputStart
  • @alphaInputEnd
  • @alphaInput
  • @saturationInputStart
  • @saturationInputEnd
  • @saturationInput
  • @change

5. Methods.

// root instance
const colorInput = this.$refs.colorInput 

// popup color picker instance
const picker = colorInput.$refs.picker 

// root element

// box root element

// color picker root element

// begin color selection (show popup)

// end color selection (hide popup)

// tinycolor instance


Lightweight Customizable Color Picker For Vue 3

Download Details:

Author: gVguy

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-color-input

Add Comment