Accessible Color Picker Component For Vue

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 {PropType<string | ColorHsl | ColorHsv | ColorHwb | ColorRgb>} */
  type: [String, Object],
  required: false,
  default: null,
},
id: {
  type: String,
  required: false,
  default: 'color-picker',
},
visibleFormats: {
  /** @type {PropType<VisibleColorFormat[]>} */
  type: Array,
  required: false,
  default: () => ALLOWED_VISIBLE_FORMATS,
  validator: (/** @type {any[]} */ visibleFormats) => {
    return visibleFormats.length > 0 && visibleFormats.every((format) => ALLOWED_VISIBLE_FORMATS.includes(format))
  },
},
defaultFormat: {
  type: String,
  required: false,
  default: 'hsl',
  validator: (/** @type {VisibleColorFormat} */ defaultFormat) => {
    return ALLOWED_VISIBLE_FORMATS.includes(defaultFormat)
  },
},
/**
 * Controls whether the control related to a color’s alpha channel are rendered in the color picker.
 *
 * The following settings are available:
 *
 * - **show**: Default. The alpha channel range input and the alpha channel value input are rendered.
 * - **hide**: The alpha channel range input and the alpha channel value input are not rendered. The `color-change` event emits a `cssColor` property without the alpha channel part.
 */
alphaChannel: {
  type: String,
  required: false,
  default: 'show',
  validator: (/** @type {string} */ alphaChannel) => {
    return ALPHA_CHANNEL_PROP_VALUES.includes(alphaChannel)
  },
},

Preview:

Changelog:

v4.1.4 (08/02/2023)

• Bug Fixes: not setting box-sizing on the color picker element

v4.1.3 (05/18/2023)

• bugfix

v4.1.2 (11/18/2022)

• more duplicate ID attributes

v4.1.0 (11/13/2022)

• reworks color picker styles
• refactor: sets specific style properties in JS

v4.0.6 (09/02/2022)

• bugfixes

v4.0.5 (08/28/2022)

• bugfixes

v4.0.4 (08/07/2022)

• bugfixes

v4.0.3 (05/30/2022)

• incorrectly reading hex color from prop

v4.0.2 (05/24/2022)

• Fixed: incorrectly formatting hex colors with hidden alpha channel

v4.0.1 (05/23/2022)

• Fixed: showing alpha channel of hex color in wrong scenario

v4.0.0 (04/03/2022)

• Code Refactoring

v3.3.1 (02/14/2022)

• bugfix

v3.3.0 (02/05/2022)

• provide untranspiled ES module bundles

v3.2.0 (12/16/2021)

• add prop for hiding alpha channel

v3.1.0 (12/11/2021)

• convert to script setup syntax

v3.0.1 (11/05/2021)

• Fixed: clicking color space not emitting color

v3.0.0 (03/22/2021)

• types: remove VueAccessibleColorPicker namespace
• improve color prop parsing
• Changes the default color format from ‘rgb’ to ‘hsl’. To upgrade without changing this in your application, you can pass ‘rgb’ to the defaultFormat prop
• Updates browser support on account of using Object.fromEntries. Most notably, Edge using the EdgeHTML engine and Safari versions before 12.2 are no longer supported

v2.0.0 (01/17/2021)

• migrate to Vue.js version 3

v1.1.2 (12/20/2020)

• Bug Fixes

v1.1.0 (12/20/2020)

• add basic type definitions

10/31/2020

• chore: remove unnecessary v-if directive

Download Details:

Author: kleinfreund

Live Demo: https://vue-accessible-color-picker.netlify.app/

Download Link: https://github.com/kleinfreund/vue-accessible-color-picker/archive/main.zip

Official Website: https://github.com/kleinfreund/vue-accessible-color-picker

Install & Download:

# Yarn
$ yarn add vue-accessible-color-picker

# NPM
$ npm i vue-accessible-color-picker --save