:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh

Last update: Aug 16, 2022

vue-color

npm

Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).

Live demo

intro

Installation

NPM

$ npm install vue-color

CommonJS

var Photoshop = require('vue-color/src/Photoshop.vue');

new Vue({
  components: {
    'Photoshop': Photoshop
  }
})

ES6

import { Photoshop } from 'vue-color'

new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

Browser globals

The dist folder contains vue-color.js and vue-color.min.js with all components exported in the window.VueColor object. These bundles are also available on NPM packages.

<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>
  var Photoshop = VueColor.Photoshop
</script>

Local setup

npm install
npm run dev

Usage

var colors = {
  hex: '#194d33',
  hex8: '#194D33A8',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
}
// or
var colors = '#194d33'
// or
var colors = '#194D33A8'
// or 
var colors = { h: 150, s: 0.66, v: 0.30 }
// or 
var colors = { r: 255, g: 0, b: 0 }
// etc...

new Vue({
  el: '#app',
  components: {
    'material-picker': material,
    'compact-picker': compact,
    'swatches-picker': swatches,
    'slider-picker': slider,
    'sketch-picker': sketch,
    'chrome-picker': chrome,
    'photoshop-picker': photoshop
  },
  data () {
    return {
      colors
    }
  }
})

colors accepts either a string of a hex color '#333' or a object of rgb or hsl values { r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }, whatever tinycolor2 accepts as an input.

<!-- suppose you have the data 'colors' in your component -->
<material-picker v-model="colors" />
<compact-picker v-model="colors" />
<swatches-picker v-model="colors" />
<slider-picker v-model="colors" />
<sketch-picker v-model="colors" />
<chrome-picker v-model="colors" />
<photoshop-picker v-model="colors" />

OR

<chrome-picker :value="colors" @input="updateValue"></chrome-picker>

In some cases you can give the component a predefined set of colors with the property presetColors (for Sketch only) or palette (for Compact and Grayscale), by simply passing it an array with the color values as strings in any css compatible format.

<sketch-picker 
  @input="updateValue"
  :value="colors"
  :preset-colors="[ 
    '#f00', '#00ff00', '#00ff0055', 'rgb(201, 76, 76)', 'rgba(0,0,255,1)', 'hsl(89, 43%, 51%)', 'hsla(89, 43%, 51%, 0.6)'
  ]"
></sketch-picker>

<compact-picker 
  @input="updateValue"
  :value="colors"
  :palette="[ 
    '#f00', '#00ff00', '#00ff0055', 'rgb(201, 76, 76)', 'rgba(0,0,255,1)', 'hsl(89, 43%, 51%)', 'hsla(89, 43%, 51%, 0.6)'
  ]"
></compact-picker>

License

vue-color is licensed under The MIT License.

GitHub

https://github.com/xiaokaike/vue-color
Comments
  • 1. NPM run dist error

    I got this error when trying to run npm run dist

    > [email protected] dist /Users/tian/Kerja/git/btbldr/node_modules/vue-color
    > webpack --progress --hide-modules --config  webpack.build.js && NODE_ENV=production webpack --progress --hide-modules --config  webpack.build.min.js
    
    Hash: 4b712a995855341bcaf9  
    Version: webpack 1.13.0
    Time: 82ms
                      Asset     Size  Chunks             Chunk Names
        ./dist/vue-color.js  2.37 kB       0  [emitted]  vue-color
    ./dist/vue-color.js.map  2.73 kB       0  [emitted]  vue-color
    Hash: e0e1d518934a14133eeb  
    Version: webpack 1.13.0
    Time: 89ms
                      Asset     Size  Chunks             Chunk Names
    ./dist/vue-color.min.js  2.24 kB       0  [emitted]  vue-color
    
    ERROR in ./dist/vue-color.min.js from UglifyJs
    Unexpected token: name (Compact) [./dist/vue-color.min.js:57,8]
    
    Reviewed by oknoorap at 2016-05-11 09:04
  • 2. [Vue warn]: The computed property "fields" is already defined in data.

    When I instanciate the 'Chrome' component from 'vue-color' on chrome debuger I've got the following warning:
    [Vue warn]: The computed property "fields" is already defined in data.

    Reviewed by cde06 at 2017-08-10 11:04
  • 3. How to use this as input?

    I need to add color as input like

    ![Image of Sample] (https://cloud.githubusercontent.com/assets/8116716/26331696/5050e086-3f20-11e7-81d6-ffc2defb6b55.gif)

    After I focus the input field color picker should be show, Please help

    Reviewed by pavinthan at 2017-06-24 06:06
  • 4. Vue 2.0 Compatibility

    Hello, Love this plugin!
    But there is currently an issue with Vue 2.0 Compatibility.

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "colors" (found in component: <swatches>)  
    
    [Vue warn]: data-pick="{{pick}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.  
    
    [Vue warn]: data-color="{{c}}": Interpolation inside attributes has been deprecated. Use v-bind or the colon shorthand instead.
    

    Simply used in a Vue 2.0 component as follow:
    <swatches :colors="color"></swatches>

    First issue would be resolved by raising an event within the src/mixin/color.js lines 38 & 42.
    Users would then need to subscribe to this using something like @pick="updateColor"

    Second issue would be resolved by using :data-pick="pick" instead of data-pick="{{pick}}", line 2 of src/components/Swatches.vue.
    I imagine there would be other issues in the other components, however I am only using swatches.

    Third issue is similar to the Second issue, however located on line 6 of src/components/Swtaches.vue

    I would make a pull request, or whatever, but I am hopeless with git :)

    Reviewed by Towerful at 2016-06-29 19:07
  • 5. Clear button

    Hi, Thank you for great effort

    ~~I think we need to clear button to completely remove the color if not needed~~ it's very easy to make one .. Thank you so much

    Reviewed by lionhurt at 2018-01-18 14:29
  • 6. Chrome hex input

    Not sure if this is an issue but more of a question. Is there any way to disable the autocomplete on keyup of the hex value input for the chrome picker? It's almost more of an inconvenience.

    Reviewed by runrog at 2017-05-21 03:59
  • 7. vue.esm.js:610 [Vue warn]: Failed to mount component: template or render function not defined.

    I'm getting this error ...

    vue.esm.js:610 [Vue warn]: Failed to mount component: template or render function not defined.
    
    found in
    
    ---> <ChromePicker>
           <ColorChooser> at components/ptemplate/ColorChooser.vue
             <ColorRow> at components/ptemplate/ColorRow.vue
               <VTabItem>
                 <VTabsItems>
                   <ThemeProvider>
                     <VTabs>
                       <Recipe> at components/ptemplate/Ptemplate.vue
                         <Pages/ptemplate/Id.vue> at pages/ptemplate/_id.vue
                           <Nuxt>
                             <VContent>
                               <VApp>
                                 <Default> at layouts/default.vue
                                   <Root>
    

    Using this template ...

    <template>
      <v-layout row wrap>
        <v-flex xs7>
          <v-text-field v-model="d_color" :hint="cblabel" persistent-hint prefix="#" @input="save()"/>
        </v-flex>
        <v-flex xs4>
          <div class="color-box" :style="{ backgroundColor: `#${d_color}` }" @click="showPicker=true"/>
        </v-flex>
        <div v-if="showPicker">
          <chrome-picker :value="colors" @input="updateValue"></chrome-picker>
        </div>
      </v-layout>
    </template>
    

    Initializing like this ...

    <script>
    const chrome = require('vue-color')
    export default {
      components: {
        'chrome-picker': chrome
      },
    

    I saw something about Nuxt (which I'm using) in another issue. Is this really the problem?

    Thanks!

    Reviewed by fmay at 2019-02-27 12:05
  • 8. Lack of documentation

    Hi, I'm Paul. First of all, I'd like to thank the creators of this plugin. It's really nice. But I'd like to point out that the lack of documentation makes it hard to understand the product's capabilities. I needed to expand the preset colors of the Sketch component and I had to go to the source code to check if there was a property I could use, and there was one indeed (:predefinedColors). This could be a drag for newcomers whom would wrongly assume that vue-color won't let them load their own predefined colors.

    I offer myself to help adding this to the docs.

    Reviewed by BeardScript at 2018-09-28 08:33
  • 9. 一般进入的是一个字符串,但是返回的是一个数组,是通过v-model绑定的,怎样进行过滤啊

    比如进入的是: #FFFFFF,

    返回的变成了一个对象,不合理啊,数据都乱了啊

    { "hsl": { "h": 0, "s": 0.7699115044247787, "l": 0.2712, "a": 0 }, "hex": "#7A1010", "hex8": "#7A101000", "rgba": { "r": 122, "g": 16, "b": 16, "a": 0 }, "hsv": { "h": 0, "s": 0.87, "v": 0.48, "a": 0 }, "oldHue": 0, "source": "hsva", "a": 0 } 、、、、、、、、、、、、、、、、、 求解决方法 求解决方法 求解决方法 help help help

    Reviewed by CrazyApple1 at 2018-09-07 13:01
  • 10. Color not automatically selected when using RGBA

    Colors like so:

    data() {
        return {
            colors: {
                rgba: {
                    r: 255,
                    g: 0,
                    b: 0,
                    a: 1,
                }
            }
        };
    },
    

    Input like so:

    <chrome-picker :value="colors" @input="updateColor" :disableFields="true"/>
    

    Everything renders fine and the input event works etc... the only issue is the picker circle/slider have not adjusted to represent the initial colors value, however when I use a Hex string (i.e #F00) this does happen.

    UPDATE

    It actually only seems to not be working when I try to update this.colors like so:

    const colors = node.fill.match(/\d+/g); // Standard rgba string
    
    this.colors = {
        rgba: {
            r: +colors[0],
            g: +colors[1],
            b: +colors[2],
            a: +colors[3]
        }
    };
    

    I take it this is not reactive intentionally...?

    Cheers.

    Reviewed by chopfitzroy at 2019-03-11 18:56
  • 11. I have an error. 'Cannot read 'hsv' of undefined'

    My code..

    ...