@cyhnkckali/vue3-color-picker

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

Emits

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