Color picker Vue.js component

Overview

vue-colorpicker

Color picker Vue.js component.

Demo

demo: https://codepen.io/nmcinteer/pen/WOjwKX

Installation

Via npm:

npm install vue-colorpicker

Usage

Javascript:

new Vue({
	el: '#color-picker',
	data: {
		colors: colors,
		selectedColorHex: ''
	},
	components: {
		'color-picker': ColorPicker
	}
});

HTML:

">

   

Options

  • color-options - an array of objects of the form:
var colors = [
	{
		"hex": "#FFA07A",
	  "name": "Light Salmon"
  },
	{
		"hex": "#CD5C5C",
	  "name": "Indian Red"
  },
	{
		"hex": "#DC143C",
	  "name": "Crimson"
  },
	{
		"hex": "#20B2AA",
	  "name": "Light Sea Green"
  },
	{
		"hex": "#008B8B",
		"name": "Dark Cyan"
	},
	{
		"hex": "#4682B4",
	  "name": "Steel Blue"
  }
];
  • empty-option - Leave empty for no empty option, enter true for an empty option without a label, enter any other string for an empty option with a label
  • input-id - An ID for the hidden input field
  • default - The default hex code
You might also like...
Color picker for vue using Tailwind v2
Color picker for vue using Tailwind v2

Vue Tailwind Color Picker Color picker for vue using Tailwind v2. Requires Tailwind Live demo Installation $ npm install vue-tailwind-color-picker $ y

Cordelia Vue - a VueJS plugin that allows you to add a rich color picker into your web pages

Color picker for web and mobile browsers. Vue plugin version of Cordelia Color Picker library.

Vue color picker

Vue color picker Iro color picker for Vue. Demo See demo here Install npm install vue-iro-color-picker --save Usage import ColorPicker from 'vue-iro-

Color Picker app, created by tauri.
Color Picker app, created by tauri.

Color Picker 取色器 ✨ 特性 一键取色并复制到剪贴板 保留历史取色记录 自定义颜色值类型(如:HEX, RGB 等) 自定义取色快捷键(默认:F2) 颜色值去重 历史记录:左键单击显示颜色值,左键双击复制颜色值到剪贴板,右键单击删除颜色 可隐藏界面取色 软件安装包小,占用内存少 🌴

Color picker chrome-style only
Color picker chrome-style only

one-colorpicker A Chrome-style ColorPicker Install $ npm install one-colorpicker Quick Start import {ColorPicker, ColorPanel} from 'one-colorpicker'

Color Picker base on Vue2.x

Color Picker base on Vue2.x

Vue component to pick a color from a base64 image, by clicking on it

vue-img-color-picker Vue component to pick a color from a base64 image, by clicking on it. You can access the selected color by $refs.colorPicker.colo

A color input component for Vuetify.

VuetifyColorInput A color input component for Vuetify. demo Try it out! dependencies chroma.js setup npm npm i vuetify-color-input import VuetifyColor

(vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more
(vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

Owner
Jamena McInteer
My life is about tea 🍵, animals 🐈, health 🌿, programming 💻 , and science 🔬.
Jamena McInteer
:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh

vue-color Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0). Live demo Installation NPM $ npm install vue-color CommonJS var Phot

Don 2.4k Dec 29, 2022
🎨 A natural color picker component for Vue.js

Color picker for Vue.js A Vue.js color picker component designed for humans. Installation npm i --save-dev vue-color-picker-board Browser Include the

Shlomi Nissan 11 Nov 24, 2022
🎨 A Color picker component. Built from the bottom to work with Vue.js.

Verte A Complete Vue.js Color Picker Component Features Multiple Color Models support: RGB, HSL, and HEX. SSR Friendly. Small file size, only 7kb gzip

Baianat 159 Dec 26, 2022
Accessible color picker component for Vue.js

vue-accessible-color-picker An accessible Vue.js color picker component. Links: demo npmjs.com/package/vue-accessible-color-picker on BundlePhobia git

Philipp Rudloff 69 Dec 28, 2022
A color picker vue component

A color picker vue component

Benny Schudel 0 Feb 8, 2021
Color picker Vue.js component

vue-colorpicker Color picker Vue.js component.

Jamena McInteer 3 Jul 13, 2018
A Vue3.x based color picker component with gradient bar control.

a Vue3.x based color picker component. English | 中文 Features Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient. Suppor

null 7 Dec 3, 2022
Radial Color Picker - Vue

Radial Color Picker - Vue Introduction Great UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as

Radial Color Picker 83 Dec 28, 2022
🎨 Lightweight color picker for Vue 3

?? Lightweight color picker for Vue 3

Anish George 141 Jan 2, 2023
A Nice Color Gradient Picker with Vue

Vue Color Gradient Picker Table of Contents Installation Examples Demos Installation To install, you can use npm or yarn: $ npm install vue-color-grad

Arthur Hayrapetyan 42 Dec 14, 2022