Lightning Fast and Fully Customizable Color Picker Component For Vue 3

Install & Download:

# Yarn
$ yarn add @cyhnkckali/vue3-color-picker
# NPM
$ npm install @cyhnkckali/vue3-color-picker

Description:

An easy-to-use color picker component for Vue 3 applications.

This component has a wide range of configuration options to fit any project’s needs. Developers can choose between HEX, RGB, or other color formats for flexibility. For accessibility, light and dark themes are available.

The gradient abilities allow creating smooth color transitions. With the interactive color list, recently used colors are saved for easy access again. The eyedropper tool enables selecting colors from anywhere on the screen. These features provide an intuitive and full-featured color-picking experience for users.

How to use it:

1. Import the Vue 3 color picker component.

import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
import '@cyhnkckali/vue3-color-picker/dist/style.css'

2. Add the component to the template.

<template>   
  <Vue3ColorPicker v-model="value" mode="solid" type="RGBA" />
</template>

3. Available component props to customize the color picker.

modelValue: { default: "" },
mode: { // solid or gradient
  default: "gradient",
  type: String as () => Mode,
},
type: {
  default: "HEX8", // HEX8 RGBA RGB HEX
  type: String as () => ColorType 
},
inputType: { 
  default: "RGB", // RGB HSL HSV CMYK
  type: String as () => InputType 
},
theme: { 
  default: "light", // light or dark
  type: String as () => Theme 
},
colorListCount: { default: 18, type: Number },
showColorList: { default: true, type: Boolean },
showEyeDrop: { default: true, type: Boolean },
showAlpha: { default: true, type: Boolean },
showInputMenu: { default: true, type: Boolean },
showInputSet: { default: true, type: Boolean },
disabled: { default: false, type: Boolean },
local: {
  default: { angle: "", positionX: "", positionY: "" },
  type: Object as () => Local,
},
iconClasses: {
  default: {
    linear: "",
    radial: "",
    ruler: "",
    eyeDroper: "",
    inputMenu: "",
    save: "",
    delete: "",
  },
  type: Object as () => IconClasses,
},

Preview:

Lightning Fast and Fully Customizable Color Picker Component For Vue 3

Changelog:

v1.1.9 (04/10/2024)

  • Bugfixes

Add Comment