Categories
JavaScript Vue

Add a Color Picker to a Vuejs App

Spread the love

To add a color picker to a Vuejs app, we can use the vue-color package.

To install it, we run:

npm install vue-color

Then we can use it by writing:

<template>
  <div>
    <photoshop-picker v-model="colors"/>
    <p>{{colors}}</p>
  </div>
</template>

<script>
import { Photoshop } from "vue-color";

export default {
  data() {
    return {
      colors: {}
    };
  },
  components: {
    "photoshop-picker": Photoshop
  }
};
</script>

We just register the component and bind the selected value to the colors state.

The Photoshop-style color picker looks like the color picker in Photoshop.

Other styles include the Material style, compact style, swatches, slider, and Sketch-style.

They can be imported the same way.

The selected color will have several properties with color values.

For example, we may get something like:

{ "hsl": { "h": 0, "s": 0.26726650614624253, "l": 0.27429116, "a": 1 }, "hex": "#593333", "hex8": "#593333FF", "rgba": { "r": 89, "g": 51, "b": 51, "a": 1 }, "hsv": { "h": 0, "s": 0.42179999999999995, "v": 0.34759999999999996, "a": 1 }, "oldHue": 0, "source": "hsva", "a": 1 }

for colors.

We get the RGB, hex, and HSL values all in one object.

The vue-color package lets us add a color picker to our Vuejs app easily.

It’s easy to use and comes in many styles.

Leave a Reply

Your email address will not be published. Required fields are marked *