Vue Palette Builder

Vue Palette Builder is a VueJS component for creating color palettes. Create a selection of colors using vue-color, and get an array of color values.

Demo

Output

Vue Palette Builder outputs an array of objects that contain a variety of different color formats, such as hex and rgba, like this:

[
  {
    "hsl": {"h": 0,"s": 1,"l": 0.5,"a": 1},
    "hex": "#FF0000",
    "hex8": "#FF0000FF",
    "rgba": {"r": 255,"g": 0,"b": 0,"a": 1},
    "hsv": {"h": 0,"s": 1,"v": 1,"a": 1},
    "oldHue": 0,
    "source": "hsva",
    "a": 1
  }
]

Installation

Install on the command line with:

npm i vue-palette-builder

Import the component in your Vue app:

import PaletteBuilder from 'vue-palette-builder' // import the component

export default {
  components: {
    PaletteBuilder // register the component
  },
  data() { 
    return {
      palette: [] // create a variable called "palette" to hold the output
    }
  }
}

Add the component to your markup:

<PaletteBuilder 
  v-on:get-palette="palette = $event"
  :pickerType="selectedPicker"
  :initialPalette="[{'hex':'#FF0000'}]"        
  id="colorpicker"
  class="pb-8 w-full max-w-sm"
/>

Now the "palette" variable holds the output of whatever palette is built. You can watch it and do something when it is update by assigning a watcher:

watch: {
  palette: function() {
    // do whatever you want
  }
},

Options

• pickerType: Chrome, Sketch, Slider, Swatches, Compact, Material (see vue-color)
• initialPalette: An initial palette for the palette builder to start with, as an array of hex values in the following format:

[{'hex':'#FF0000'},`{'hex':'#FFFF00'}`]