Flexible and Minimalistic Radial Color Picker For Vue.js

Radial Color Picker Vue is easy and simple to use. Selecting a color should be as easy as moving a slider, clicking a check box, or pressing a key just as other basic form elements behave.

This is a flexible and minimalistic color picker. It was developed keeping in mind the use of mobile devices and keyboards.

radial color picker react, gradient color picker, vue color picker, color picker code in angular, vue color picker board, vue 3 color picker, how would you implement a color picker with rxjs


  • Small size – 3.3 KB compressed (JS and CSS combined)
  • Supports touch devices
  • Optimized animation
  • Ease of use
    • Screen reader support.
    • Press the Tab key to focus the picker.
    • ↑ or → arrow key to increase hue. PgUp to go faster.
    • ↓ or → arrow key to decrease hue. PgDown to go faster.
    • Enter to select a color and close or open the picker.
    • Mouse over to increase color and scroll down to decrease color hue (Opt-in).
  • Experimental TypeScript support

How to make use of it:

Install and download:

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

1. Import and register a color picker item.

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 a color picker component to your app.

  <color-picker v-bind="color" @input="onInput"></color-picker>
export default {
  components: { ColorPicker },
  setup() {
    const color = reactive({
      hue: 50,
      saturation: 100,
      luminosity: 50,
      alpha: 1,
    return {
      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',

Radial Color Picker For Vue.js Plugin/Github, vue bs color picker

See Demo And Download

Official Website(radial-color-picker): Click Here

This superior jQuery/javascript plugin is developed by radial-color-picker. For extra advanced usage, please go to the official website.

Related Posts


[Heatmap] Jquery Plugin for Display As a Graph of the Contribution on GitHub

Jquery plugin to present as a contribution graph on Github when viewing a user profile, you can use it to apply to other JS frameworks like Angularjs as…


A Customizable Calendar JavaScript UI Widget/Component Library

Color Calendar is a customizable event calendar component library. Flexible, customizable, and themed events calendar and month/year picker component written in Vanilla JavaScript. Features Zero dependencies Add…


Animated Calendar UI Design Using HTML CSS JavaScript

Calendar UI design with dark mode and animations using HTML CSS JavaScript. An elegant, animated, and lightweight (or bold) calendar user interface design implemented in HTML, JS,…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


A Lightweight and Customizable WYSIWYG Editor In Pure JavaScript | SunEditor

WYSIWYG HTML editor based on pure JavaScript, suneditor is a lightweight, versatile, customizable, pure JavaScript WYSIWYG textual content(text) editor in your web functions. Key Features:  Paste from…


Vue.js Directive To Lock Body Scroll Without Breaking Scroll

v-scroll-lock is a Vue.js directive to lock body scrolling (for iOS mobile and tablet, Android and Safari/Chrome/Firefox for desktop) without breaking the scrolling of the target element….