Accessible Color Picker Component For Vue

Install & Download:

# Yarn
$ yarn add vue-accessible-color-picker
# NPM
$ npm i vue-accessible-color-picker --save

Description:

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)