An easy and accessible color picker component that supports ‘hex’, ‘hsl’, ‘hwb’, and ‘rgb’ foramts.

How to use it:

1. Import the component.

import { ColorPicker } from 'vue-accessible-color-picker';

2. Register the color picker component.

.export default {
  components: {
    ColorPicker,
  }
}

3. Or import and register the component globally.

import { ColorPickerPlugin } from 'vue-accessible-color-picker';
Vue.component('ColorPickerPlugin', ColorPickerPlugin)

4. Create a default color picker component.

<template>
  <ColorPicker />
</template>

5. Default props.

color: {
  type: [String, Object],
  required: false,
  default: null,
},
id: {
  type: String,
  required: false,
  default: 'color-picker',
},
visibleFormats: {
  type: Array,
  required: false,
  default: () => ['hex', 'hsl', 'hwb', 'rgb'],
  validator (visibleFormats) {
    return visibleFormats.length > 0 && visibleFormats.every(format => ALLOWED_VISIBLE_FORMATS.includes(format))
  },
},

Preview:

Accessible Color Picker Component For Vue