Minimal Yet Versatile Color Picker For Vue 3 – vue-pick-colors

vue-pick-colors is a tiny, dynamic, customizable, themeable color picker component for Vue 3.

It supports hex, rgb, rgba, hsl, hsla, hsv, hsva color formats and allows developers to specify predefined colors for easier color selection.

How to use it:

1. Install and import the ‘PickColors’ component to your Vue project.

import PickColors from 'vue-pick-colors'

2. Add the component to the template.

<template>
  <pick-colors v-model:value="value"/>
</template>
<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#ff0000')
</script>

3. Available component props to customize the color picker.

value: {
  type: [String, Array] as PropType<string | string[]>
},
theme: {
  type: String as PropType<Theme>,
  default: 'light' // or 'dark'
},
size: {
  type: [Number, String],
  default: 20
},
width: {
  type: [Number, String]
},
height: {
  type: [Number, String]
},
format: {
  type: String as PropType<Format>,
  default: 'hex', // hex, rgb, rgba, hsl, hsla, hsv, hsva
},
showPicker: {
  type: Boolean,
  default: undefined
},
showAlpha: {
  type: Boolean,
  default: false
},
addColor: {
  type: Boolean,
  default: false
},
deleteColor: {
  type: Boolean,
  default: true
},
max: {
  type: Number,
  default: 13
},
popupContainer: {
  type: [String, Object, Boolean] as PropType<string | HTMLElement | boolean>,
  default: 'body'
},
zIndex: {
  type: Number,
  default: 1000
},
colors: {
  type: Array as PropType<string []>,
  default: () => [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    '#ff4500',
    '#ff7d4d',
    '#00babd',
    '#1f93ff',
    '#fa64c3'
  ]
}

4. Event handlers.

  • @chang(value: stringļ½œstring [],color: string,index: number)
  • @close-picker(value: stringļ½œstring [])
  • @overflow-max

Preview:

vue-pick-colors

Download Details:

Author: qiuzongyuan

Live Demo: https://qiuzongyuan.github.io/vue-pick-colors/use.html

Download Link: https://github.com/qiuzongyuan/vue-pick-colors/archive/refs/heads/main.zip

Official Website: https://github.com/qiuzongyuan/vue-pick-colors

Install & Download:

# Yarn
$ yarn add vue-pick-colors

# NPM
$ npm install vue-pick-colors

Add Comment