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: '', colorPalette: '', btnSaveLabel:'Save', btnCancelLabel:'Cancel' } | | 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: '' } | | gradientMode | linear or radial | default linear Sets the initial gradient mode when the picker is started | | showButtons | boolean | default true |

Emits

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | update:model-value | event | return 'color value'| | onSave | event | return 'color value'| | onCancel | event | return 'color value'|

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