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.
