Vue 3 Color Picker

A colour selective component for Vue 3. Fast and with small package size. Gradient and Solid in one!

gradient solid1

Install

NPM Install

 npm i @cyhnkckali/vue3-color-picker

Yarn Install

  yarn add @cyhnkckali/vue3-color-picker

Import

Import where you want to use it

import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';

Import the style file into your main.js file

import '@cyhnkckali/vue3-color-picker/dist/style.css'

Use/Examples

<script setup>
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
</script>

<template>   

    <Vue3ColorPicker v-model="value" mode="solid" :showColorList="false" :showEyeDrop="false" type="RGBA"/>

    <Vue3ColorPicker v-model="value" mode="gradient" :showColorList="false" :showEyeDrop="false"/>

</template>

Options

Parameter	Type	Description
`mode`	`string`	`solid` or `gradient` default `gradient`
`showColorList`	`boolean`	default `true`
`showEyeDrop`	`boolean`	default `true` Supports Chrome and Edge only
`type`	`string`	Return colour value type `HEX8` `RGBA` `RGB` `HEX` default `HEX8`

Roadmap

Adding other colour types. (HSL, HSV, CMYK)
Dark theme
Fully customisable