A colour selective component for Vue 3. Fast and with small package size. Gradient and Solid in one! No dependency! Fully customisable!
Don't forget to star for motivation :)
Try it now Live Demo
Download 1.1.9 to continue with the old version !!!
npm i @cyhnkckali/vue3-color-picker
yarn add @cyhnkckali/vue3-color-picker
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
import '@cyhnkckali/vue3-color-picker/dist/style.css'
<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>
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: '' } |
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 |