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.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