Radial Color Picker For Vue.js

Install & Download:

# NPM
$ npm install @radial-color-picker/vue-color-picker --save

Description:

A lightweight, modern, touch-enabled, fully accessible color picker for Vue 3 and Vue 2.

How to use it:

1. Import and register the color picker component.

import { reactive } from 'vue';
import ColorPicker from '@radial-color-picker/vue-color-picker';
@import '@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';

export default {
  components: { ColorPicker },
};

2. Add the color picker component in your app.

<template>
  <color-picker v-bind="color" @input="onInput"></color-picker>
</template>

export default {
  components: { ColorPicker },
  setup() {
    const color = reactive({
      hue: 50,
      saturation: 100,
      luminosity: 50,
      alpha: 1,
    });
    return {
      color,
      onInput(hue) {
        color.hue = hue;
      },
    };
  },
};

3. All possible props.

hue: {
  default: 0,
},
saturation: {
  default: 100,
},
luminosity: {
  default: 50,
},
alpha: {
  default: 1,
},
step: {
  default: 1,
},
mouseScroll: {
  default: false,
},
variant: {
  default: 'collapsible', // collapsible | persistent
},
disabled: {
  default: false,
},
initiallyCollapsed: {
  default: false,
},
ariaLabel: {
  default: 'color picker',
},
ariaRoledescription: {
  default: 'radial slider',
},
ariaValuetext: {
  default: '',
},
ariaLabelColorWell: {
  default: 'color well',
},

Preview:

Changelog:

v6.0.0 (03/20/2024)

• feat: Modernize and make focus styles more prominent
• fix: Swap faux well border with a real one
• fix: Allow clicking through the collapsed palette
• Performance Improvements

v5.0.1 (10/24/2021)

• Official Vue 3 support and while it is compatible with Vue 2 via @vue/compat it still is a breaking change
• While Nuxt v3 is in Beta the module @radial-color-picker/vue-color-picker/nuxt will be disabled and you’ll have to manually add the CSS file and register the component as a regular Vue component.
• Dropping support for iOS Safari v12.2 and MS Edge 18 (the non-Chromium version).
• refactor: remove MS Edge 18 transparency hack
• refactor: remove conic-gradient polyfill