Welcome folks today in this blog post we will be building a native html5 rgb hexadecimal color picker
using vue-color
library in vue.js
using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the below library using the npm
command as shown below
npm i vue-color
CommonJS
1 2 3 4 5 6 7 |
<span class="pl-k">var</span> <span class="pl-v">Photoshop</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'vue-color/src/Photoshop.vue'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">components</span>: <span class="pl-kos">{</span> <span class="pl-s">'Photoshop'</span>: <span class="pl-v">Photoshop</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> |
ES6
1 2 3 4 5 6 7 |
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Photoshop</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'vue-color'</span> <span class="pl-k">new</span> <span class="pl-v">Vue</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">components</span>: <span class="pl-kos">{</span> <span class="pl-s">'photoshop-picker'</span>: <span class="pl-v">Photoshop</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span> |
Live Vue Color Picker demo
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.
1 2 3 4 5 |
<span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">path/to/vue.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">path/to/vue-color.min.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">script</span><span class="pl-kos">></span> <span class="pl-k">var</span> <span class="pl-v">Photoshop</span> <span class="pl-c1">=</span> <span class="pl-v">VueColor</span><span class="pl-kos">.</span><span class="pl-c1">Photoshop</span> <span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> |
Usage
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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 } } }) |