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 color picker component.

<script setup>
  import { ColorPicker } from 'vue-accessible-color-picker'
</script>
  <style>
@import url('vue-accessible-color-picker/styles');
</style>

2. Create a default color picker component.

<template>
  <ColorPicker />
</template>

3. 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)
  },
},

4. Emit an event every time the internal colors object is updated.

<template>
  <ColorPicker
    @color-change="updateColor"
  />
</template>
function updateColor (eventData) {
  console.log(eventData)
}

Preview:

Accessible Color Picker Component For Vue

Changelog:

v5.0.1 (11/23/2023)

  • Bug Fixes

v5.0.0 (11/23/2023)

  • Code Refactoring

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

Add Comment