Beautiful Color Picker For Vue 3

A beautiful color picker component for Vue. With support for gradient, multi-color formats, preset colors, and much more.

How to use it:

1. Import and register the color picker.

import Vue3ColorPicker from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
// OR
import { ColorPicker } from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
export default defineComponent({
  components: { ColorPicker },

2. Add the color picker component to the template.

     <color-picker />

3. Available props.

isWidget: propTypes.bool.def(false),
pickerType: propTypes.oneOf(["fk", "chrome"]).def("fk"),
shape: propTypes.oneOf(["circle", "square"]).def("square"),
pureColor: {
  type: [String, Object] as PropType<ColorInputWithoutInstance>,
  default: "#000000",
gradientColor: propTypes.string.def(
  "linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%)"
format: {
  type: String as PropType<ColorFormat>,
  default: "rgb",
disableAlpha: propTypes.bool.def(false),
disableHistory: propTypes.bool.def(false),
roundHistory: propTypes.bool.def(false),
useType: propTypes.oneOf(["pure", "gradient", "both"]).def("pure"),
activeKey: propTypes.oneOf(["pure", "gradient"]).def("pure"),
lang: {
  type: String as PropType<Lang>,
  default: "ZH-cn",
zIndex: propTypes.number.def(9999),
pickerContainer: {
  type: [String, HTMLElement],
  default: "body",
debounce: propTypes.number.def(100),
theme: propTypes.oneOf(["white", "black"]).def("white"),
blurClose: propTypes.bool.def(false),
defaultPopup: propTypes.bool.def(false),


Beautiful Color Picker For Vue 3


v2.3.0 (03/02/2024)

  • auto close popup when mouse leave by blurClose=true (only isWdget=false)
  • default open popup by defaultPopup=true (only isWdget=false)
  • add slot named extra, support add custom template
  • copy color string to clipboard when click selected color block

v2.2.3 (11/22/2023)

  • fixed some bug
  • update: gradient buttons style

v2.2.0 (08/05/2023)

  • fixed some bug

v2.1.6 (07/16/2023)

  • fixed some bug

v2.1.5 (06/15/2023)

  • Fix some bugs

v2.1.4 (06/06/2023)

  • Fix some bugs

v2.1.3 (05/30/2023)

  • Fix some bugs
  • new props: pickerContainer , debounce

v2.1.2 (01/05/2023)

  • bugfix

Download Details:

Author: aesoper101

Live Demo:

Download Link:

Official Website:

Install & Download:

Add Comment