vue-colorfull is a tiny color picker component for Vue apps.

Inspired by react-colorful

Getting Started

npm install vue-colorfull
or
pnpm add -D vue-colorfull

import { ref } from "vue";
import { VueColorfull } from "vue-colorful";
import type { HsvaColor, HsvColor, HslColor, HslaColor, RgbColor, RgbaColor } from 'vue-colorfull'

const colorhex = ref<string>('00ddff')

...

<template>
    <VueColorfull v-model="colorhex"  type="hex"/>
</template>

Types

type	value example
hex	"#ffffff"	string
hexa	"#ffffff88"	string
rgb	{ r: 255, g: 255, b: 255 }	RgbColor
rgba	{ r: 255, g: 255, b: 255, a: 1 }	RgbaColor
rgbString	"rgb(255, 255, 255)"	string
rgbaString	"rgba(255, 255, 255, 1)"	string
hsl	{ h: 0, s: 0, l: 100 }	HslColor
hsla	{ h: 0, s: 0, l: 100, a: 1 }	HslaColor
hslString	"hsl(0, 0%, 100%)"	string
hslaSting	"hsla(0, 0%, 100%, 1)"	string
hsv	{ h: 0, s: 0, v: 100 }	HsvColor
hsva	{ h: 0, s: 0, v: 100, a: 1 }	HsvaColor
hsvString	"hsv(0, 0%, 100%)"	string
hsvaSting	"hsva(0, 0%, 100%, 1)"	string