Vue 3 Color Picker

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

Live Demo

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
`v-model`	`string`	default `''`
`mode`	`string`	`solid` or `gradient` default `gradient`
`theme`	`string`	`light` or `dark` default `light`
`type`	`string`	Return colour value type `HEX8` `RGBA` `RGB` `HEX` default `HEX8`
`inputType`	`string`	Input type of colour values `RGB` `HSL` `HSV` `CMYK` default `RGB`
`disabled`	`boolean`	default `false`
`local`	`object`	default `{ angle: '', positionX: '', positionY: '' }`
`colorListCount`	`number`	Determines how many colours to keep in the colour list default `18`
`showColorList`	`boolean`	default `true`
`showEyeDrop`	`boolean`	default `true` Supports Chrome and Edge only
`showAlpha`	`boolean`	default `true`
`showInputMenu`	`boolean`	default `true`
`showInputSet`	`boolean`	default `true`
`iconClasses`	`object`	default `{ linear: '', radial: '', ruler: '', eyeDroper: '', inputMenu: '', save: '', delete: '' }`

CSS Colour Variables

Variables Name	Hex	Dark Hex
--cp-container-bg	#FFF	#212529
--cp-ps-color	#707070
--cp-act-color	#5983fc
--cp-range-border	#f7f7f7
--cp-input-menu-bg	#F5F5F5	#242629
--cp-border-color	#e5e5e5	#43474b
--cp-range-shadow	#4c86f3
--cp-label-color	#787878
--cp-container-shadow	#58585881	#2b262696
--cp-font-color	#141414	#e7e7e7
--cp-button-color	#F5F5F5	#1a1d20

Roadmap

Widget type to add