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!

Features with Version 2.0

Ability to change mode instantly
Change the value in the colour list
Delete a value in the colour list
New style variables
New ui design

Don't forget to star for motivation :)

Try it now Live Demo

Download 1.1.9 to continue with the old version !!!

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: '', solid: '', gradient: '', linear: '', radial: '', colorPalate: '', }`
`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`
`showPickerMode`	`boolean`	default `true`
`iconClasses`	`object`	default `{ ruler: '', eyeDroper: '', arrowDown: '', save: '', delete: '' }`

CSS Colour Variables

Variables Name	Hex	Dark Hex
--cp-primary	#5983fc	#5983fc
--cp-container-bg	#FFF	#212529
--cp-select-color	#2c5ae6af	#2c5ae6af
--cp-range-border	#f7f7f7	#f7f7f7
--cp-range-shadow	#4c86f3	#4c86f3
--cp-container-shadow	#58585881	#2b262696
--cp-gray-100	#f9f9f9	#1b1c22
--cp-gray-200	#f1f1f4	#26272f
--cp-gray-300	#dbdfe9	#363843
--cp-gray-400	#c4cada	#464852
--cp-gray-500	#99a1b7	#636674
--cp-gray-600	#78829d	#808290
--cp-gray-700	#4b5675	#9a9cae
--cp-gray-800	#252f4a	#b5b7c8
--cp-gray-900	#071437	#f5f5f5
--cp-inverse-dark	#57575723	#6b6b6b56
--cp-inverse-white	#9292920d	#92929256