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

Roadmap

• Widget type to add