vue-accessible-color-picker

A color picker component for Vue.js.

Demo

Installation

npm install vue-accessible-color-picker

Usage

In a Vue single file component, import the ColorPicker component and its styles.

<template>
	<ColorPicker />
</template>

<script setup>
import { ColorPicker } from 'vue-accessible-color-picker'
</script>

<style>
@import url('vue-accessible-color-picker/styles');
</style>

You can also register the component and import the styles globally.

Template and styles used for the demo above

Template:

<ColorPicker
	:color="{
		h: 320,
		s: 100,
		l: 50,
		a: 0.8
	}"
>
	<template #hue-range-input-label>
		<span class="visually-hidden">Hue</span>
	</template>

	<template #alpha-range-input-label>
		<span class="visually-hidden">Alpha</span>
	</template>
</ColorPicker>

Styles:

.visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

Made with love by Philipp.